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();

src/lib/constants.ts

@@ -0,0 +1 @@
+export const websiteName = "Website"

src/pages/_document.tsx

@@ -3,7 +3,10 @@ import { Html, Head, Main, NextScript } from 'next/document'
 export default function Document() {
   return (
     <Html lang="en">
-      <Head />
+      <Head>
+        <meta name="viewport" content="width=device-width, initial-scale=1"/>
+        <link rel="icon" href="/logo.svg"/>
+      </Head>
       <body>
         <Main />
         <NextScript />

src/pages/api/user/index.ts

@@ -1,5 +1,5 @@
 import type {NextApiRequest, NextApiResponse} from 'next';
-import CRUD from '@/utils/CRUD';
+import CRUD from '@/models/api/CRUD';
 import {CreateUserQuery} from '@/models/api/UserQuery';
 import {hashPassword} from '@/lib/PasswordTools';
 import prismaClient from '@/lib/prismaClient';

src/pages/dashboard.tsx

@@ -4,8 +4,10 @@ import {useRouter} from 'next/router';
 import {Flex} from '@chakra-ui/react';
 
 import type {Session} from '@/models/data_models/Session';
-import CardUser from "../components/layout/Dashboard/CardUser";
-import LeftPanel from "../components/layout/Dashboard/LeftPanel/LeftPanel";
+import CardUser from "../components/layout/dashboard/card_user/CardUser";
+import LeftPanel from "../components/layout/dashboard/left_panel/LeftPanel";
+import Head from 'next/head';
+import {websiteName} from '@/lib/constants';
 
 export default function Dashboard() {
   const router = useRouter();
@@ -26,10 +28,14 @@ export default function Dashboard() {
     };
 
     return (
-        <Flex gap={10}>
-          <LeftPanel user={refinedUser} />
-          <CardUser user={refinedUser} />
-        </Flex>
+        <>
+          <Head><title>{websiteName} | Dashboard</title></Head>
+
+          <Flex gap={10}>
+            <LeftPanel user={refinedUser} />
+            <Flex justify={'center'} alignItems={'center'} ><CardUser user={refinedUser} /></Flex>
+          </Flex>
+        </>
     );
   }
 }

src/pages/index.tsx

@@ -1,18 +1,14 @@
 import Head from 'next/head';
 import Navbar from '@/components/Navbar';
-import HeroBanner from '@/components/layout/Home/HeroBanner';
-import HomePresentation from '@/components/layout/Home/PresentationSection';
+import HeroBanner from '@/components/layout/home/HeroBanner';
+import HomePresentation from '@/components/layout/home/PresentationSection';
+import {websiteName} from '@/lib/constants';
 
 
 export default function Home() {
   return (
       <>
-        <Head>
-          <title>Create Next App</title>
-          <meta name="description" content="Generated by create next app"/>
-          <meta name="viewport" content="width=device-width, initial-scale=1"/>
-          <link rel="icon" href="/favicon.ico"/>
-        </Head>
+        <Head><title>{websiteName}</title></Head>
 
         <Navbar/>
         <HeroBanner/>

src/pages/login.tsx

@@ -2,20 +2,25 @@ import {
   Box,
   Flex,
 } from '@chakra-ui/react';
+import Head from 'next/head';
 import LoginForm from '@/components/form/LoginForm';
-
+import {websiteName} from '@/lib/constants';
 
 export default function Login() {
   return (
-      <Flex gap={5} h={'100vh'} justify={'center'} alignItems={'center'}>
-        <Box flexBasis={'100%'}
-             display={{base: "none", md: "block"}}
-             h={"100%"}
-             bgImage={'/couple_horizon.png'}
-             bgSize={'cover'}
-             bgPos={'center'}
-        />
-        <LoginForm/>
-      </Flex>
+      <>
+        <Head><title>{websiteName} | Connexion</title></Head>
+
+        <Flex gap={5} h={'100vh'} justify={'center'} alignItems={'center'}>
+          <Box flexBasis={'100%'}
+               display={{base: 'none', md: 'block'}}
+               h={'100%'}
+               bgImage={'/couple_horizon.png'}
+               bgSize={'cover'}
+               bgPos={'center'}
+          />
+          <LoginForm/>
+        </Flex>
+      </>
   );
 }

src/pages/register.tsx

@@ -1,9 +1,13 @@
 import { Box, Flex } from "@chakra-ui/react";
 import RegisterForm from "@/components/form/RegisterForm";
+import {websiteName} from '@/lib/constants';
+import Head from 'next/head';
 
 export default function Register() {
   return (
-    <Box>
+    <>
+      <Head><title>{websiteName} | Inscription</title></Head>
+
       <Flex gap={10} h={"100vh"} alignItems={"center"}>
         <Box
           display={{ base: "none", md: "block" }}
@@ -15,6 +19,6 @@ export default function Register() {
         />
         <RegisterForm />
       </Flex>
-    </Box>
+    </>
   );
 }

src/styles/Home.module.css

@@ -1,278 +0,0 @@
-.main {
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  align-items: center;
-  padding: 6rem;
-  min-height: 100vh;
-}
-
-.description {
-  display: inherit;
-  justify-content: inherit;
-  align-items: inherit;
-  font-size: 0.85rem;
-  max-width: var(--max-width);
-  width: 100%;
-  z-index: 2;
-  font-family: var(--font-mono);
-}
-
-.description a {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-.description p {
-  position: relative;
-  margin: 0;
-  padding: 1rem;
-  background-color: rgba(var(--callout-rgb), 0.5);
-  border: 1px solid rgba(var(--callout-border-rgb), 0.3);
-  border-radius: var(--border-radius);
-}
-
-.code {
-  font-weight: 700;
-  font-family: var(--font-mono);
-}
-
-.grid {
-  display: grid;
-  grid-template-columns: repeat(4, minmax(25%, auto));
-  width: var(--max-width);
-  max-width: 100%;
-}
-
-.card {
-  padding: 1rem 1.2rem;
-  border-radius: var(--border-radius);
-  background: rgba(var(--card-rgb), 0);
-  border: 1px solid rgba(var(--card-border-rgb), 0);
-  transition: background 200ms, border 200ms;
-}
-
-.card span {
-  display: inline-block;
-  transition: transform 200ms;
-}
-
-.card h2 {
-  font-weight: 600;
-  margin-bottom: 0.7rem;
-}
-
-.card p {
-  margin: 0;
-  opacity: 0.6;
-  font-size: 0.9rem;
-  line-height: 1.5;
-  max-width: 30ch;
-}
-
-.center {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  position: relative;
-  padding: 4rem 0;
-}
-
-.center::before {
-  background: var(--secondary-glow);
-  border-radius: 50%;
-  width: 480px;
-  height: 360px;
-  margin-left: -400px;
-}
-
-.center::after {
-  background: var(--primary-glow);
-  width: 240px;
-  height: 180px;
-  z-index: -1;
-}
-
-.center::before,
-.center::after {
-  content: '';
-  left: 50%;
-  position: absolute;
-  filter: blur(45px);
-  transform: translateZ(0);
-}
-
-.logo,
-.thirteen {
-  position: relative;
-}
-
-.thirteen {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 75px;
-  height: 75px;
-  padding: 25px 10px;
-  margin-left: 16px;
-  transform: translateZ(0);
-  border-radius: var(--border-radius);
-  overflow: hidden;
-  box-shadow: 0px 2px 8px -1px #0000001a;
-}
-
-.thirteen::before,
-.thirteen::after {
-  content: '';
-  position: absolute;
-  z-index: -1;
-}
-
-/* Conic Gradient Animation */
-.thirteen::before {
-  animation: 6s rotate linear infinite;
-  width: 200%;
-  height: 200%;
-  background: var(--tile-border);
-}
-
-/* Inner Square */
-.thirteen::after {
-  inset: 0;
-  padding: 1px;
-  border-radius: var(--border-radius);
-  background: linear-gradient(
-    to bottom right,
-    rgba(var(--tile-start-rgb), 1),
-    rgba(var(--tile-end-rgb), 1)
-  );
-  background-clip: content-box;
-}
-
-/* Enable hover only on non-touch devices */
-@media (hover: hover) and (pointer: fine) {
-  .card:hover {
-    background: rgba(var(--card-rgb), 0.1);
-    border: 1px solid rgba(var(--card-border-rgb), 0.15);
-  }
-
-  .card:hover span {
-    transform: translateX(4px);
-  }
-}
-
-@media (prefers-reduced-motion) {
-  .thirteen::before {
-    animation: none;
-  }
-
-  .card:hover span {
-    transform: none;
-  }
-}
-
-/* Mobile */
-@media (max-width: 700px) {
-  .content {
-    padding: 4rem;
-  }
-
-  .grid {
-    grid-template-columns: 1fr;
-    margin-bottom: 120px;
-    max-width: 320px;
-    text-align: center;
-  }
-
-  .card {
-    padding: 1rem 2.5rem;
-  }
-
-  .card h2 {
-    margin-bottom: 0.5rem;
-  }
-
-  .center {
-    padding: 8rem 0 6rem;
-  }
-
-  .center::before {
-    transform: none;
-    height: 300px;
-  }
-
-  .description {
-    font-size: 0.8rem;
-  }
-
-  .description a {
-    padding: 1rem;
-  }
-
-  .description p,
-  .description div {
-    display: flex;
-    justify-content: center;
-    position: fixed;
-    width: 100%;
-  }
-
-  .description p {
-    align-items: center;
-    inset: 0 0 auto;
-    padding: 2rem 1rem 1.4rem;
-    border-radius: 0;
-    border: none;
-    border-bottom: 1px solid rgba(var(--callout-border-rgb), 0.25);
-    background: linear-gradient(
-      to bottom,
-      rgba(var(--background-start-rgb), 1),
-      rgba(var(--callout-rgb), 0.5)
-    );
-    background-clip: padding-box;
-    backdrop-filter: blur(24px);
-  }
-
-  .description div {
-    align-items: flex-end;
-    pointer-events: none;
-    inset: auto 0 0;
-    padding: 2rem;
-    height: 200px;
-    background: linear-gradient(
-      to bottom,
-      transparent 0%,
-      rgb(var(--background-end-rgb)) 40%
-    );
-    z-index: 1;
-  }
-}
-
-/* Tablet and Smaller Desktop */
-@media (min-width: 701px) and (max-width: 1120px) {
-  .grid {
-    grid-template-columns: repeat(2, 50%);
-  }
-}
-
-@media (prefers-color-scheme: dark) {
-  .vercelLogo {
-    filter: invert(1);
-  }
-
-  .logo,
-  .thirteen img {
-    filter: invert(1) drop-shadow(0 0 0.3rem #ffffff70);
-  }
-}
-
-@keyframes rotate {
-  from {
-    transform: rotate(360deg);
-  }
-  to {
-    transform: rotate(0deg);
-  }
-}