feat: new app page

client/src/components/Slider/index.tsx

@@ -9,28 +9,30 @@ import {
 } from '@chakra-ui/react';
 
 const MySlider = ({
-  markList,
+  markList = [],
   setVal,
   activeVal,
   max = 100,
   min = 0,
-  step = 1
+  step = 1,
+  width = '100%'
 }: {
-  markList: {
+  markList?: {
     label: string | number;
     value: number;
   }[];
-  activeVal?: number;
+  activeVal: number;
   setVal: (index: number) => void;
   max?: number;
   min?: number;
   step?: number;
+  width?: string | string[] | number | number[];
 }) => {
   const startEndPointStyle = {
     content: '""',
-    borderRadius: '10px',
-    width: '10px',
-    height: '10px',
+    borderRadius: '6px',
+    width: '6px',
+    height: '6px',
     backgroundColor: '#ffffff',
     border: '2px solid #D7DBE2',
     position: 'absolute',
@@ -44,37 +46,62 @@ const MySlider = ({
   }, [activeVal, markList]);
 
   return (
-    <Slider max={max} min={min} step={step} size={'lg'} value={value} onChange={setVal}>
-      {markList.map((item, i) => (
+    <Slider
+      max={max}
+      min={min}
+      step={step}
+      size={'lg'}
+      value={activeVal}
+      width={width}
+      onChange={setVal}
+    >
+      {markList?.map((item, i) => (
         <SliderMark
           key={item.value}
-          value={i}
-          mt={3}
+          value={item.value}
           fontSize={'sm'}
+          mt={3}
+          whiteSpace={'nowrap'}
           transform={'translateX(-50%)'}
-          {...(activeVal === item.value ? { color: 'myBlue.500', fontWeight: 'bold' } : {})}
+          color={'myGray.600'}
         >
           <Box px={3} cursor={'pointer'}>
             {item.label}
           </Box>
         </SliderMark>
       ))}
+      <SliderMark
+        value={activeVal}
+        textAlign="center"
+        bg="myBlue.600"
+        color="white"
+        px={1}
+        minW={'18px'}
+        w={'auto'}
+        h={'18px'}
+        borderRadius={'18px'}
+        fontSize={'xs'}
+        transform={'translate(-50%, -170%)'}
+        boxSizing={'border-box'}
+      >
+        {activeVal}
+      </SliderMark>
       <SliderTrack
         bg={'#EAEDF3'}
         overflow={'visible'}
         h={'4px'}
         _before={{
           ...startEndPointStyle,
-          left: '-5px'
+          left: '-3px'
         }}
         _after={{
           ...startEndPointStyle,
-          right: '-5px'
+          right: '-3px'
         }}
       >
-        <SliderFilledTrack />
+        <SliderFilledTrack bg={'myBlue.600'} />
       </SliderTrack>
-      <SliderThumb border={'2.5px solid'} borderColor={'myBlue.500'}></SliderThumb>
+      <SliderThumb border={'3px solid'} borderColor={'myBlue.600'}></SliderThumb>
     </Slider>
   );
 };