All files / app/pages/start-stacking/components start-stacking-layout.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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import { Title } from '@components/title';
import {
  Flex,
  FlexProps,
  Text,
  BoxProps,
  ButtonProps,
  Button,
  ExclamationMarkCircleIcon,
  color,
  Box,
} from '@stacks/ui';
import React, { FC } from 'react';
 
export const StartStackingLayout: FC<FlexProps> = props => (
  <Flex
    as="main"
    flexDirection="row"
    alignItems="center"
    mx="auto"
    minHeight="calc(100vh - 44px)"
    px="extra-loose"
    {...props}
  />
);
 
export const StackingOptionsCardContainer: FC<FlexProps> = props => (
  <Flex flexDirection={['column', 'column', 'column', 'row']} width="100%" my="56px" {...props} />
);
 
export const StackingOptionCard: FC<FlexProps> = ({ children, ...props }) => (
  <Flex
    px="loose"
    py="extra-loose"
    as="section"
    flexDirection="column"
    alignItems="center"
    borderRadius="6px"
    flex={1}
    {...props}
  >
    <Flex flexDirection="column" maxWidth={[null, null, '320', '400px']}>
      {children}
    </Flex>
  </Flex>
);
 
export const StackingOptionCardTitle: FC<BoxProps> = props => (
  <Title fontSize="32px" mt="base-loose" {...props} />
);
 
export const StackingOptionsCardDescription: FC<BoxProps> = props => (
  <Text textStyle="body.large" mt="extra-loose" {...props} />
);
 
export const StackingOptionCardBenefitContainer: FC<BoxProps> = props => (
  <Box mt={['tight', 'base', 'base', 'extra-loose']} mb="extra-loose" {...props} />
);
 
interface StackingOptionCardBenefitProps extends BoxProps {
  icon: FC;
}
export const StackingOptionCardBenefit: FC<StackingOptionCardBenefitProps> = props => {
  const { icon: Icon, ...rest } = props;
  return (
    <Flex alignItems="center" my="base">
      <Flex width="32px" justifyContent="center" alignItems="center" mr="tight">
        <Icon />
      </Flex>
      <Text display="block" textStyle="body.large.medium" color={color('text-body')} {...rest} />
    </Flex>
  );
};
 
export const StackingOptionCardButton: FC<ButtonProps> = props => (
  <Button alignSelf="flex-start" mt="base" {...(props as unknown as any)} />
);
 
export const InsufficientStackingBalanceWarning: FC<FlexProps> = props => (
  <Flex
    color={color('feedback-alert')}
    ml="base"
    mt="base-tight"
    alignItems="center"
    textStyle="body.small"
    {...props}
  >
    <ExclamationMarkCircleIcon width="16px" mt="1px" mr="6px" />
    Insufficient balance
  </Flex>
);