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

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>
  );
};