All files / app/pages/stacking/components next-cycle-start-time.tsx

0% Statements 0/7
100% Branches 0/0
0% Functions 0/1
0% Lines 0/6

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40                                                                               
import { ClockIcon } from '@components/icons/clock';
import { color, Flex, FlexProps, Text } from '@stacks/ui';
import React, { FC } from 'react';
 
interface NextCycleStartTimeProps extends FlexProps {
  nextCycleStartsIn: string;
}
 
export const NextCycleStartTime: FC<NextCycleStartTimeProps> = props => {
  const { nextCycleStartsIn, ...rest } = props;
  return (
    <Flex {...rest}>
      <Flex
        width="44px"
        height="44px"
        background={color('bg-4')}
        borderRadius="50%"
        alignItems="center"
        justifyContent="center"
      >
        <ClockIcon size="14px" />
      </Flex>
      <Flex ml="base" flexDirection="column">
        <Text as="h4" display="block" textStyle="body.large.medium" lineHeight="20px">
          Next cycle starts in
        </Text>
        <Text
          display="block"
          textStyle="body.large"
          color={color('text-caption')}
          lineHeight="20px"
          mt="extra-tight"
        >
          {nextCycleStartsIn}
        </Text>
      </Flex>
    </Flex>
  );
};