All files / app/pages/stacking/components estimated-minimum-label.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
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import { StepsIcon } from '@components/icons/steps';
import { color, Flex, FlexProps, Text } from '@stacks/ui';
import React, { FC } from 'react';
 
interface EstimatedMinimumLabelProps extends FlexProps {
  estimatedStackingMinimum: string;
}
export const EstimatedMinimumLabel: FC<EstimatedMinimumLabelProps> = props => {
  const { estimatedStackingMinimum, ...rest } = props;
  return (
    <Flex {...rest}>
      <Flex
        width="44px"
        height="44px"
        background={color('bg-4')}
        borderRadius="50%"
        alignItems="center"
        justifyContent="center"
      >
        <StepsIcon size="14px" />
      </Flex>
      <Flex ml="base" flexDirection="column">
        <Text as="h4" display="block" textStyle="body.large.medium" lineHeight="20px">
          Estimated minimum
        </Text>
        <Text
          display="block"
          textStyle="body.large"
          color={color('text-caption')}
          lineHeight="20px"
          mt="extra-tight"
        >
          {estimatedStackingMinimum}
        </Text>
      </Flex>
    </Flex>
  );
};