feat(finished Card): Finished Card, missing responsive

src/components/CardUser.jsx

@@ -4,7 +4,7 @@ import Carousel from "./Carousel";
 export default function CardUser(props) {
   const { user } = props;
   // const data_user = props;
-  const borderRad = "1.5rem";
+  const borderRad = "2rem";
 
   return (
     <Card
@@ -16,8 +16,8 @@ export default function CardUser(props) {
       <Carousel
         user={user}
         borderRadiusImg={borderRad}
-        heightPhoto={"60vh"}
-        heightText={"40vh"}
+        heightPhoto={"75vh"}
+        heightText={"25vh"}
       />
       <Flex>
         <Box></Box>

src/components/Carousel.jsx

@@ -1,7 +1,23 @@
 import React from "react";
-import { Box, IconButton, useBreakpointValue } from "@chakra-ui/react";
+import {
+  Box,
+  Flex,
+  Spacer,
+  IconButton,
+  useBreakpointValue,
+  ButtonGroup,
+  Badge,
+  Text,
+} from "@chakra-ui/react";
 // Here we have used react-icons package for the icons
-import { BiLeftArrowAlt, BiRightArrowAlt } from "react-icons/bi";
+import {
+  BiLeftArrowAlt,
+  BiRightArrowAlt,
+  BiHeart,
+  // RxCross1,
+} from "react-icons/bi";
+
+import { RxCross1 } from "react-icons/rx";
 // And react-slick as our Carousel Lib
 import Slider from "react-slick";
 
@@ -19,11 +35,25 @@ const settings = {
 };
 
 export default function Carousel(props) {
-  const { heightPhoto, heightText, borderRadiusImg, user } = props;
+  const { borderRadiusImg, user } = props;
   // As we have used custom buttons, we need a reference variable to
   // change the state
+
+  // C'est l'utilisateur qui est login
+  const actualUser = {
+    lastName: "Alexandra",
+    firstName: "Lamie",
+    age: 21,
+    aPropos: "Je suis la personne fictive la plus fictive",
+    images: ["401446.webp"],
+    passions: ["Sport", "Voiture", "Cuisine"],
+  };
+
   const [slider, setSlider] = React.useState();
 
+  const heightPhoto = "75vh";
+  const heightText = "25vh";
+
   // These are the breakpoints which changes the position of the
   // buttons as the screen size changes
   const top = useBreakpointValue({ base: "90%", md: "50%" });
@@ -98,10 +128,53 @@ export default function Carousel(props) {
           ))}
         </Slider>
       </Box>
-      <Box height={heightText} bgGradient="radial(purple.200, purple.300)">
-        <h1>
-          {user.name} {user.surname} , {user.age}
-        </h1>
+      <Box
+        height={heightText}
+        borderBottomRadius={borderRadiusImg}
+        // bgGradient="radial(purple.200, purple.300)"
+      >
+        <Flex m={"1vh"}>
+          <h1
+            style={{
+              fontSize: "1.5rem",
+              fontWeight: "bold",
+              textAlign: "center",
+            }}
+          >
+            {user.firstName} {user.lastName} , {user.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" }}>{user.aPropos}</Text>
+        </Box>
+        <Box m={"1vh"}>
+          <h2 style={{ fontWeight: "bold" }}>Passions :</h2>
+          <Flex gap={"0.5rem"} mt={"1vh"}>
+            {user.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/pages/api/user/readUser.ts

@@ -1,23 +1,24 @@
-import {NextApiRequest, NextApiResponse} from 'next';
-import { PrismaClient } from '@prisma/client'
+import { NextApiRequest, NextApiResponse } from "next";
+import { PrismaClient } from "@prisma/client";
 
 const prisma = new PrismaClient();
 
-export default async function readUser(req: NextApiRequest, res: NextApiResponse) {
-  
-  const {email, password} = req.query
-  
-  if(!email) {
-    const users = await prisma.user.findMany()
-    return res.status(200).send({message: "readUser", users});
+export default async function readUser(
+  req: NextApiRequest,
+  res: NextApiResponse
+) {
+  const { email, password } = req.query;
+
+  if (!email && !password) {
+    const users = await prisma.user.findMany();
+    return res.status(200).send({ message: "readUser", users });
   }
-  
-  const user = await prisma.user.findUnique({where :{"email" : email}})
-  
+
+  const user = await prisma.user.findUnique({ where: { email: email } });
+
   if (user?.password == password) {
-    res.status(200).send({message: "User found", user});
+    res.status(200).send({ message: "User found", user });
   }
 
-  res.status(400).send({message: "Mot de passe incorrect"});
-
-}
+  res.status(400).send({ message: "Mot de passe incorrect" });
+}

src/pages/test_card.jsx

@@ -2,13 +2,15 @@ import CardUser from "../components/CardUser";
 
 export default function Test_card() {
   const user = {
-    name: "dujardin",
-    surname: "jean",
+    lastName: "dujardin",
+    firstName: "jean",
     age: 19,
     aPropos: "Je suis une personne fictive, pas tres fictive",
     images: ["401446.webp"],
     passions: ["Sport", "Piscine", "Formule1"],
   };
 
+  //faudra faire une requete sur la BD pour chaque utilisateurs
+
   return <CardUser user={user} />;
 }