All files / app/components info-card.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
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import { Hr } from '@components/hr';
import { ExplainerTooltip } from '@components/tooltip';
import { Box, BoxProps, color, Flex, FlexProps, Stack, StackProps, Text } from '@stacks/ui';
import React, { cloneElement, FC, isValidElement } from 'react';
 
export const InfoCard: FC<FlexProps> = props => (
  <Flex
    flexDirection="column"
    boxShadow="low"
    border={`1px solid ${color('border')}`}
    borderRadius="8px"
    minHeight="84px"
    {...props}
  />
);
 
type ChildProps = BoxProps;
 
type TChild = React.ReactElement<ChildProps>;
 
interface Props extends BoxProps {
  children: TChild | TChild[];
}
export const InfoCardGroup = ({ children, ...props }: Props) => {
  const parsedChildren = Array.isArray(children) ? children : [children];
  const infoGroup = parsedChildren.flatMap((child, index) => {
    Iif (!isValidElement(child)) return null;
    return [
      cloneElement(child, {
        key: index,
        mb: index === parsedChildren.length ? '280px' : undefined,
      }),
      index !== parsedChildren.length - 1 && <Hr my="loose" key={index.toString() + '-hr'} />,
    ];
  });
  return <Box {...props}>{infoGroup}</Box>;
};
 
export const InfoCardSection: FC<StackProps> = ({ children, ...props }) => (
  <Stack {...props} spacing="base-tight">
    {children}
  </Stack>
);
 
export const InfoCardRow: FC<FlexProps> = props => (
  <Flex justifyContent="space-between" {...props} />
);
 
interface InfoCardLabelProps extends FlexProps {
  explainer?: string;
}
export const InfoCardLabel: FC<InfoCardLabelProps> = ({ children, ...props }) => (
  <Flex color={color('text-caption')} alignItems="center" {...props}>
    <Box mr={props.explainer ? 'tight' : undefined}>{children}</Box>
    {props.explainer && <ExplainerTooltip>{props.explainer}</ExplainerTooltip>}
  </Flex>
);
 
export const InfoCardValue: FC<FlexProps> = props => (
  <Text textStyle="body.large.medium" textAlign="right" {...props} />
);