All files / app/pages/stacking/delegated-stacking/components duration-select-item.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
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import { Box, color, Flex, FlexProps, Text } from '@stacks/ui';
import React, { FC } from 'react';
import { useFocus } from 'use-events';
 
type DelegationTypes = 'limited' | 'indefinite';
 
interface DurationSelectItemProps extends Omit<FlexProps, 'onChange'> {
  title: string;
  delegationType: DelegationTypes;
  activeDelegationType: DelegationTypes | null;
  onChange(duration: DelegationTypes): void;
  icon: JSX.Element;
}
 
export const DurationSelectItem: FC<DurationSelectItemProps> = props => {
  const { title, icon, delegationType, activeDelegationType, onChange, children, ...rest } = props;
  const [isFocused, bind] = useFocus();
  return (
    <Flex
      minHeight="72px"
      p="base-loose"
      as="label"
      htmlFor={delegationType}
      border={`1px solid ${color('border')}`}
      borderRadius="12px"
      position="relative"
      {...(isFocused
        ? {
            _before: {
              content: '""',
              position: 'absolute',
              top: '-1px',
              left: '-1px',
              right: '-1px',
              bottom: '-1px',
              borderRadius: '12px',
              border: '2px solid #CEDAFA',
            },
          }
        : {})}
      {...rest}
    >
      <Flex width="100%">
        <Box position="relative" top="-3px">
          {icon}
        </Box>
        <Flex ml="base-loose" width="100%" flexDirection={['column', 'row']}>
          <Box>
            <Text
              textStyle="body.small"
              fontWeight={500}
              display="block"
              style={{ wordBreak: 'break-all' }}
            >
              {title}
            </Text>
            <Text
              textStyle="body.small"
              color={color('text-caption')}
              mt="tight"
              display="inline-block"
              lineHeight="18px"
            >
              {children}
            </Text>
          </Box>
        </Flex>
        <Flex ml="loose" alignItems="center">
          <input
            type="radio"
            id={delegationType}
            name="delegationType"
            value={delegationType}
            checked={delegationType === activeDelegationType}
            style={{ transform: 'scale(1.2)', outline: 0 }}
            onChange={e => onChange(e.target.value as DelegationTypes)}
            {...bind}
          />
        </Flex>
      </Flex>
    </Flex>
  );
};