style(Switched Badge with Tag): Switch badge with Tag, prettier

src/components/layout/dashboard/card_user/CardUser.jsx

@@ -5,57 +5,70 @@ import {
   CardBody,
   IconButton,
   Heading,
-  Box, CardHeader,
-} from '@chakra-ui/react';
-import Carousel from '../../../Carousel';
-import {BiHeart} from 'react-icons/bi';
-import {RxCross1} from 'react-icons/rx';
-import PassionBadgeList
-  from '@/components/layout/dashboard/card_user/PassionBadgeList';
+  Box,
+  CardHeader,
+} from "@chakra-ui/react";
+import Carousel from "../../../Carousel";
+import { BiHeart } from "react-icons/bi";
+import { RxCross1 } from "react-icons/rx";
+import PassionTagList from "@/components/layout/dashboard/card_user/PassionTagList";
 
 export default function CardUser(props) {
-  const {user} = props;
+  const { user } = props;
 
   const interestingUser = {
-    lastName: 'dujardin',
-    firstName: 'jean',
+    lastName: "dujardin",
+    firstName: "jean",
     age: 19,
-    aPropos: 'Je suis une personne fictive, pas tres fictive',
-    images: ['/401446.webp', '/135538.webp'],
-    passions: ['Sport', 'Piscine', 'Formule1'],
+    aPropos: "Je suis une personne fictive, pas tres fictive",
+    images: ["/401446.webp", "/135538.webp"],
+    passions: ["Sport", "Piscine", "Formule1"],
   };
 
   return (
-    <Card w={"100%"} h={"100%"} borderRadius={'1rem'} overflow={'hidden'}>
+    <Card w={"100%"} h={"100%"} borderRadius={"1rem"} overflow={"hidden"}>
       <CardHeader>
-        <Carousel borderRadius={"1rem"} images={interestingUser.images}/>
+        <Carousel borderRadius={"1rem"} images={interestingUser.images} />
       </CardHeader>
 
       <CardBody>
-        <Flex justify={'space-between'} mb={'20px'}>
-          <Heading fontSize={'1.5rem'} fontWeight={'bold'} flexBasis={'70%'}>
-            {interestingUser.firstName} {interestingUser.lastName}, {interestingUser.age}ans
+        <Flex justify={"space-between"} mb={"20px"}>
+          <Heading fontSize={"1.5rem"} fontWeight={"bold"} flexBasis={"70%"}>
+            {interestingUser.firstName} {interestingUser.lastName},{" "}
+            {interestingUser.age}ans
           </Heading>
 
           <Flex gap={1}>
-            <IconButton borderRadius={'1rem'} colorScheme={'purple'}><BiHeart/></IconButton>
-            <IconButton borderRadius={'1rem'} colorScheme={'purple'}
-                        variant={'outline'}><RxCross1/></IconButton>
+            <IconButton borderRadius={"1rem"} colorScheme={"purple"}>
+              <BiHeart />
+            </IconButton>
+            <IconButton
+              borderRadius={"1rem"}
+              colorScheme={"purple"}
+              variant={"outline"}
+            >
+              <RxCross1 />
+            </IconButton>
           </Flex>
         </Flex>
 
-        <Box mb={'20px'}>
-          <Heading size={'sm'} fontWeight={'bold'}>A propos :</Heading>
+        <Box mb={"20px"}>
+          <Heading size={"sm"} fontWeight={"bold"}>
+            A propos :
+          </Heading>
           <Text>{interestingUser.aPropos}</Text>
         </Box>
 
         <Box>
-          <Heading size={'sm'} fontWeight={'bold'}>Passions :</Heading>
-          <PassionBadgeList passions={interestingUser.passions}
-                            userPassions={user.passions}/>
+          <Heading size={"sm"} fontWeight={"bold"}>
+            Passions :
+          </Heading>
+          <PassionTagList
+            passions={interestingUser.passions}
+            userPassions={user.passions}
+          />
         </Box>
       </CardBody>
     </Card>
   );
-
 }

src/components/layout/dashboard/card_user/PassionBadgeList.tsx

@@ -1,19 +0,0 @@
-import {Badge, Flex} from '@chakra-ui/react';
-
-type Props = {
-  passions: string[],
-  userPassions?: string[]
-}
-
-export default function PassionBadgeList({passions, userPassions = []}: Props) {
-  return (
-      <Flex gap={'0.5rem'} mt={'1vh'}>
-        {passions.map((passion, index) =>
-            <Badge key={index} colorScheme={
-              userPassions.includes(passion) ? 'purple' : 'ghost'
-            }
-            >#{passion}</Badge>,
-        )}
-      </Flex>
-  );
-}

src/components/layout/dashboard/card_user/PassionTagList.tsx

@@ -0,0 +1,22 @@
+import { Badge, Flex, Tag } from "@chakra-ui/react";
+
+type Props = {
+  passions: string[];
+  userPassions?: string[];
+};
+
+export default function PassionTagList({ passions, userPassions = [] }: Props) {
+  return (
+    <Flex gap={"0.5rem"} mt={"1vh"}>
+      {passions.map((passion, index) => (
+        <Tag
+          key={index}
+          variant={userPassions.includes(passion) ? "subtle" : "outline"}
+          colorScheme={"purple"}
+        >
+          {passion}
+        </Tag>
+      ))}
+    </Flex>
+  );
+}

src/components/layout/user_profile/CustomCheckbox.jsx

@@ -1,10 +1,6 @@
 import {
-  Badge,
   useCheckbox,
-  Text,
-  Flex,
   chakra,
-  Box,
   Tag,
   TagLeftIcon,
   TagLabel,
@@ -13,7 +9,7 @@ import {
 import { IoAdd, IoRemove } from "react-icons/io5";
 
 export default function CustomCheckbox(props) {
-  const { text, checked, value } = props;
+  const { text } = props;
   const { state, getInputProps, getCheckboxProps, getLabelProps, htmlProps } =
     useCheckbox(props);