Edit Carousel

Took 1 hour 41 minutes

src/components/Carousel.jsx

@@ -1,154 +0,0 @@
-import React from "react";
-import {
-  Box,
-  Flex,
-  Spacer,
-  IconButton,
-  useBreakpointValue,
-  ButtonGroup,
-  Badge,
-  Text,
-} from "@chakra-ui/react";
-
-import { BiLeftArrowAlt, BiRightArrowAlt, BiHeart } from "react-icons/bi";
-
-import { RxCross1 } from "react-icons/rx";
-import Slider from "react-slick";
-
-const settings = {
-  dots: true,
-  arrows: false,
-  fade: true,
-  infinite: true,
-  autoplay: true,
-  speed: 500,
-  autoplaySpeed: 5000,
-  slidesToShow: 1,
-  slidesToScroll: 1,
-};
-
-export default function Carousel(props) {
-  const { borderRadiusImg, actualUser, potentialMatch } = props;
-
-  const [slider, setSlider] = React.useState();
-
-  const heightPhoto = "75vh";
-  const heightText = "25vh";
-
-  const top = useBreakpointValue({ base: "90%", md: "50%" });
-  const side = useBreakpointValue({ base: "30%", md: "10px" });
-
-  return (
-    <>
-      <Box
-        position={"relative"}
-        height={heightPhoto}
-        width={"full"}
-        overflow={"hidden"}
-      >
-        {/* CSS files for react-slick */}
-        <link
-          rel="stylesheet"
-          type="text/css"
-          charSet="UTF-8"
-          href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css"
-        />
-        <link
-          rel="stylesheet"
-          type="text/css"
-          href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css"
-        />
-        {/* Left Icon */}
-        <IconButton
-          aria-label="left-arrow"
-          colorScheme="purple"
-          borderRadius="full"
-          position="absolute"
-          left={side}
-          top={top}
-          transform={"translate(0%, -50%)"}
-          zIndex={2}
-          onClick={() => slider?.slickPrev()}
-        >
-          <BiLeftArrowAlt />
-        </IconButton>
-        {/* Right Icon */}
-        <IconButton
-          aria-label="right-arrow"
-          colorScheme="purple"
-          borderRadius="full"
-          position="absolute"
-          right={side}
-          top={top}
-          transform={"translate(0%, -50%)"}
-          zIndex={2}
-          onClick={() => slider?.slickNext()}
-        >
-          <BiRightArrowAlt />
-        </IconButton>
-        {/* Slider */}
-        <Slider {...settings} ref={(slider) => setSlider(slider)}>
-          {potentialMatch.images.map((url, index) => (
-            <Box
-              key={index}
-              borderTopRadius={borderRadiusImg}
-              height={heightPhoto}
-              backgroundPosition="center"
-              backgroundSize="cover"
-              backgroundImage={`url(${url})`}
-            />
-          ))}
-        </Slider>
-      </Box>
-      <Box
-        height={heightText}
-        borderBottomRadius={borderRadiusImg}
-        // bgGradient="radial(purple.200, purple.300)"
-      >
-        <Flex m={"1vh"}>
-          <h1
-            style={{
-              fontSize: "1.5rem",
-              fontWeight: "bold",
-              textAlign: "center",
-            }}
-          >
-            {potentialMatch.firstName} {potentialMatch.lastName} ,{" "}
-            {potentialMatch.age} ans
-          </h1>
-          <Spacer />
-          <Box alignItems="center" display="flex">
-            <Flex flexDirection={{ base: "row", sm: "column" }}>
-              <ButtonGroup gap={"0.5rem"}>
-                <IconButton borderRadius={"1rem"} colorScheme={"pink"}>
-                  <BiHeart />
-                </IconButton>
-                <IconButton borderRadius={"1rem"} colorScheme={"red"}>
-                  <RxCross1 />
-                </IconButton>
-              </ButtonGroup>
-            </Flex>
-          </Box>
-        </Flex>
-
-        <Box m={"1vh"}>
-          <Text style={{ fontWeight: "bold" }}>{potentialMatch.aPropos}</Text>
-        </Box>
-        <Box m={"1vh"}>
-          <h2 style={{ fontWeight: "bold" }}>Passions :</h2>
-          <Flex gap={"0.5rem"} mt={"1vh"}>
-            {potentialMatch.passions.map((passion, index) =>
-              actualUser.passions.includes(passion) ? (
-                <Badge borderRadius={"0.5rem"} colorScheme={"purple"}>
-                  #{passion}
-                </Badge>
-              ) : (
-                <Badge borderRadius={"0.5rem"}>#{passion}</Badge>
-              )
-            )}
-          </Flex>
-        </Box>
-      </Box>
-    </>
-  );
-}

src/components/Carousel.tsx

@@ -0,0 +1,45 @@
+import {useState} from 'react';
+import {Flex, IconButton} from '@chakra-ui/react';
+import { BiLeftArrowAlt, BiRightArrowAlt } from "react-icons/bi";
+
+interface Props {
+  images: string[];
+}
+
+const Carousel = ({images}: Props) => {
+  const [currentIndex, setCurrentIndex] = useState(0);
+
+  const handleClickPrevious = () => {
+    setCurrentIndex(
+        (currentIndex === 0)
+            ? images.length - 1
+            : currentIndex - 1,
+    );
+  };
+
+  const handleClickNext = () => {
+    setCurrentIndex(
+        (currentIndex === images.length - 1)
+            ? 0
+            : currentIndex + 1,
+    );
+  };
+
+  return (
+      <Flex px={2} align="center" justify={'space-between'}
+            bgImage={images[currentIndex]} bgSize={'cover'} width={'100%'}
+            height={500}>
+        <IconButton aria-label="left-arrow" colorScheme="purple"
+                    borderRadius="full" onClick={handleClickPrevious}>
+          <BiLeftArrowAlt/>
+        </IconButton>
+
+        <IconButton aria-label="left-arrow" colorScheme="purple"
+                    borderRadius="full" onClick={handleClickNext}>
+          <BiRightArrowAlt/>
+        </IconButton>
+      </Flex>
+  );
+};
+
+export default Carousel;

src/components/form/LoginForm.tsx

@@ -31,7 +31,7 @@ export default function LoginForm() {
       const {ok: connexionSuccess} = res as SignInResponse;
 
       if (!connexionSuccess) setInvalidInput(true);
-      else router.push('/');
+      else router.push('/dashboard');
     });
   };
 

src/components/layout/Dashboard/CardUser.jsx

@@ -1,29 +0,0 @@
-import {Card, Flex, Box} from '@chakra-ui/react';
-import Carousel from '../../Carousel';
-
-export default function CardUser(props) {
-  const {user} = props;
-
-  const potentialMatch = {
-    lastName: 'dujardin',
-    firstName: 'jean',
-    age: 19,
-    aPropos: 'Je suis une personne fictive, pas tres fictive',
-    images: ['401446.webp'],
-    passions: ['Sport', 'Piscine', 'Formule1'],
-  };
-
-  return (
-    <Card borderRadius={"1rem"}
-          width={'35vw'}
-          height={'90vh'}
-          padding={'0px'}
-          marginY={'auto'}
-          overflow={'hidden'}>
-      <Carousel actualUser={user}
-                potentialMatch={potentialMatch}
-                heightPhoto={'75vh'}
-                heightText={'25vh'}/>
-    </Card>
-  );
-}

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

@@ -0,0 +1,59 @@
+import {
+  Card,
+  Flex,
+  Text,
+  CardBody,
+  IconButton,
+  Heading,
+  Box
+} 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';
+
+export default function CardUser(props) {
+  const {user} = props;
+
+  const interestingUser = {
+    lastName: 'dujardin',
+    firstName: 'jean',
+    age: 19,
+    aPropos: 'Je suis une personne fictive, pas tres fictive',
+    images: ['/401446.webp', '/135538.webp'],
+    passions: ['Sport', 'Piscine', 'Formule1'],
+  };
+
+  return (
+    <Card maxW="md" borderRadius={'1rem'} overflow={'hidden'}>
+      <Carousel images={interestingUser.images}/>
+
+      <CardBody>
+        <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>
+          </Flex>
+        </Flex>
+
+        <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}/>
+        </Box>
+      </CardBody>
+    </Card>
+  );
+
+}

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

@@ -0,0 +1,19 @@
+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/left_panel/LeftPanel.jsx

@@ -12,7 +12,7 @@ import {useRouter} from 'next/router';
 import {AiFillMessage} from 'react-icons/ai';
 import {BsFillPersonFill} from 'react-icons/bs';
 import LeftPanelButton
-  from '@/components/layout/Dashboard/LeftPanel/LeftPanelButton';
+  from '@/components/layout/dashboard/left_panel/LeftPanelButton';
 
 export default function LeftPanel(props) {
   const router = useRouter();