kb

client/src/components/Radio/index.tsx

@@ -1,25 +1,47 @@
 import React from 'react';
-import { Stack, Box, Flex, useTheme } from '@chakra-ui/react';
+import { Box, Flex, useTheme, Grid, type GridProps, theme } from '@chakra-ui/react';
 import type { StackProps } from '@chakra-ui/react';
+import MyIcon from '@/components/Icon';
 
 // @ts-ignore
-interface Props extends StackProps {
-  list: { label: string; value: string | number }[];
+interface Props extends GridProps {
+  list: { icon?: string; title: string; desc?: string; value: string | number }[];
+  align?: 'top' | 'center';
   value: string | number;
   onChange: (e: string | number) => void;
 }
 
-const Radio = ({ list, value, onChange, ...props }: Props) => {
+const MyRadio = ({ list, value, align = 'center', onChange, ...props }: Props) => {
+  const theme = useTheme();
   return (
-    <Stack {...props} spacing={5} direction={'row'}>
+    <Grid gridGap={[3, 5]} fontSize={['sm', 'md']} {...props}>
       {list.map((item) => (
         <Flex
           key={item.value}
-          alignItems={'center'}
+          alignItems={align}
           cursor={'pointer'}
           userSelect={'none'}
-          _before={{
+          py={3}
+          pl={'14px'}
+          pr={'36px'}
+          border={theme.borders.sm}
+          borderWidth={'1.5px'}
+          borderRadius={'md'}
+          bg={'myWhite.300'}
+          position={'relative'}
+          {...(value === item.value
+            ? {
+                borderColor: 'myBlue.700'
+              }
+            : {
+                _hover: {
+                  bg: 'white'
+                }
+              })}
+          _after={{
             content: '""',
+            position: 'absolute',
+            right: '14px',
             w: '16px',
             h: '16px',
             mr: 1,
@@ -36,18 +58,21 @@ const Radio = ({ list, value, onChange, ...props }: Props) => {
                   borderColor: 'myGray.200'
                 })
           }}
-          _hover={{
-            _before: {
-              borderColor: 'myBlue.600'
-            }
-          }}
           onClick={() => onChange(item.value)}
         >
-          {item.label}
+          {!!item.icon && <MyIcon mr={'14px'} name={item.icon as any} w={'18px'} />}
+          <Box>
+            <Box>{item.title}</Box>
+            {!!item.desc && (
+              <Box fontSize={'sm'} color={'myGray.500'}>
+                {item.desc}
+              </Box>
+            )}
+          </Box>
         </Flex>
       ))}
-    </Stack>
+    </Grid>
   );
 };
 
-export default Radio;
+export default MyRadio;