feat(Info user Dashboard): Added info user Panel left side of dashboard

src/components/CardUser.jsx

@@ -6,22 +6,30 @@ export default function CardUser(props) {
   // const data_user = props;
   const borderRad = "2rem";
 
+  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={borderRad}
-      width={"30vw"}
-      height={"100vh"}
+      width={"35vw"}
+      height={"90vh"}
       padding={"0px"}
+      marginY={"auto"}
     >
       <Carousel
-        user={user}
+        actualUser={user}
+        potentialMatch={potentialMatch}
         borderRadiusImg={borderRad}
         heightPhoto={"75vh"}
         heightText={"25vh"}
       />
-      <Flex>
-        <Box></Box>
-      </Flex>
     </Card>
   );
 }

src/components/Carousel.jsx

@@ -10,11 +10,7 @@ import {
   Text,
 } from "@chakra-ui/react";
 
-import {
-  BiLeftArrowAlt,
-  BiRightArrowAlt,
-  BiHeart,
-} from "react-icons/bi";
+import { BiLeftArrowAlt, BiRightArrowAlt, BiHeart } from "react-icons/bi";
 
 import { RxCross1 } from "react-icons/rx";
 import Slider from "react-slick";
@@ -32,17 +28,7 @@ const settings = {
 };
 
 export default function Carousel(props) {
-  const { borderRadiusImg, user } = props;
-
-  // 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 { borderRadiusImg, actualUser, potentialMatch } = props;
 
   const [slider, setSlider] = React.useState();
 
@@ -52,13 +38,6 @@ export default function Carousel(props) {
   const top = useBreakpointValue({ base: "90%", md: "50%" });
   const side = useBreakpointValue({ base: "30%", md: "10px" });
 
-  // These are the images used in the slide
-  //   const cards = [
-  //     'https://images.unsplash.com/photo-1612852098516-55d01c75769a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1yZWxhdGVkfDR8fHxlbnwwfHx8fA%3D%3D&auto=format&fit=crop&w=900&q=60',
-  //     'https://images.unsplash.com/photo-1627875764093-315831ac12f7?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1yZWxhdGVkfDJ8fHxlbnwwfHx8fA%3D%3D&auto=format&fit=crop&w=900&q=60',
-  //     'https://images.unsplash.com/photo-1571432248690-7fd6980a1ae2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1yZWxhdGVkfDl8fHxlbnwwfHx8fA%3D%3D&auto=format&fit=crop&w=900&q=60',
-  //   ];
-
   return (
     <>
       <Box
@@ -109,10 +88,10 @@ export default function Carousel(props) {
         </IconButton>
         {/* Slider */}
         <Slider {...settings} ref={(slider) => setSlider(slider)}>
-          {user.images.map((url, index) => (
+          {potentialMatch.images.map((url, index) => (
             <Box
               key={index}
-              borderTopEndRadius={borderRadiusImg}
+              borderTopRadius={borderRadiusImg}
               height={heightPhoto}
               backgroundPosition="center"
               backgroundSize="cover"
@@ -134,7 +113,8 @@ export default function Carousel(props) {
               textAlign: "center",
             }}
           >
-            {user.firstName} {user.lastName} , {user.age} ans
+            {potentialMatch.firstName} {potentialMatch.lastName} ,{" "}
+            {potentialMatch.age} ans
           </h1>
           <Spacer />
           <Box alignItems="center" display="flex">
@@ -152,12 +132,12 @@ export default function Carousel(props) {
         </Flex>
 
         <Box m={"1vh"}>
-          <Text style={{ fontWeight: "bold" }}>{user.aPropos}</Text>
+          <Text style={{ fontWeight: "bold" }}>{potentialMatch.aPropos}</Text>
         </Box>
         <Box m={"1vh"}>
           <h2 style={{ fontWeight: "bold" }}>Passions :</h2>
           <Flex gap={"0.5rem"} mt={"1vh"}>
-            {user.passions.map((passion, index) =>
+            {potentialMatch.passions.map((passion, index) =>
               actualUser.passions.includes(passion) ? (
                 <Badge borderRadius={"0.5rem"} colorScheme={"purple"}>
                   #{passion}

src/components/InfoUser.jsx

@@ -0,0 +1,84 @@
+import {
+  Card,
+  Flex,
+  Box,
+  Image,
+  Text,
+  Button,
+  Center,
+  HStack,
+  VStack,
+  Spacer,
+} from "@chakra-ui/react";
+import { useRouter } from "next/router";
+import Carousel from "./Carousel";
+import { AiFillMessage } from "react-icons/ai";
+import { BsFillPersonFill } from "react-icons/bs";
+
+export default function InfoUser(props) {
+  const router = useRouter();
+  const { user } = props;
+  // const data_user = props;
+  const borderRad = "2rem";
+
+  const buttonGenerator = (icon, text, url) => {
+    return (
+      <Button
+        bg={"white"}
+        _hover={{ bg: "blackAlpha.100", color: "purple.400" }}
+        width={"100%"}
+        lineHeight={"auto"}
+        justifyContent={"left"}
+        onClick={() => router.push(url)}
+      >
+        <HStack spacing={"1rem"} alignItems={"center"}>
+          {icon}
+          <Text fontWeight={"bold"} fontSize={"1.2rem"}>
+            {text}
+          </Text>
+        </HStack>
+      </Button>
+    );
+  };
+
+  //changer l'url
+  const messageButton = buttonGenerator(
+    <AiFillMessage />,
+    "Messages",
+    "/test_card"
+  );
+
+  const profileButton = buttonGenerator(
+    <BsFillPersonFill />,
+    "Profile",
+    "/test_card"
+  );
+
+  return (
+    <Card
+      borderRadius={borderRad}
+      width={"20vw"}
+      height={"100vh"}
+      padding={"0px"}
+    >
+      <Flex direction={"column"} height={"100%"} margin={"10%"}>
+        <Box>
+          <Image src={user.images[0]} borderRadius={borderRad} />
+          <Box mt={"1vh"}>
+            <Text fontSize={"1.5rem"} fontWeight={"bold"}>
+              {user.firstName} {user.lastName}
+            </Text>
+            <Text as={"i"} fontWeight={"bold"}>
+              "{user.aPropos}""
+            </Text>
+          </Box>
+        </Box>
+        <Spacer />
+        <VStack mt={"1vh"} spacing={3.5} alignContent={"bottom"}>
+          {messageButton}
+          {profileButton}
+        </VStack>
+      </Flex>
+    </Card>
+  );
+}

src/pages/register.tsx

@@ -1,27 +1,18 @@
-import {
-  Box,
-  Button,
-  Flex,
-  FormControl,
-  FormErrorMessage,
-  FormLabel,
-  Heading,
-  Image,
-  Input,
-  Spacer,
-} from '@chakra-ui/react';
-import {useRouter} from 'next/router';
-import {useForm} from 'react-hook-form';
-import RegisterForm from '@/components/form/RegisterForm';
+import { Box, Flex } from "@chakra-ui/react";
+import RegisterForm from "@/components/form/RegisterForm";
 
 export default function Register() {
-
   return (
     <Box>
-        <Flex gap={10} h={'100vh'} alignItems={'center'}>
-          <Box display={{base: 'none', md: 'block'}} h={'100%'}
-               flexBasis={'100%'} bgImage={'/couple_holding_hands.png'}
-               bgPos={'center'} bgSize={'cover'}/>
+      <Flex gap={10} h={"100vh"} alignItems={"center"}>
+        <Box
+          display={{ base: "none", md: "block" }}
+          h={"100%"}
+          flexBasis={"100%"}
+          bgImage={"/couple_holding_hands.png"}
+          bgPos={"center"}
+          bgSize={"cover"}
+        />
         <RegisterForm />
       </Flex>
     </Box>

src/pages/test_card.jsx

@@ -1,16 +1,22 @@
+import { Flex } from "@chakra-ui/react";
 import CardUser from "../components/CardUser";
+import InfoUser from "../components/InfoUser";
 
 export default function Test_card() {
   const user = {
-    lastName: "dujardin",
-    firstName: "jean",
-    age: 19,
-    aPropos: "Je suis une personne fictive, pas tres fictive",
-    images: ["401446.webp"],
-    passions: ["Sport", "Piscine", "Formule1"],
+    lastName: "Alexandra",
+    firstName: "Lamy",
+    age: 21,
+    aPropos: "Je suis la personne fictive la plus fictive",
+    images: ["135538.webp"],
+    passions: ["Sport", "Voiture", "Cuisine"],
   };
 
-  //faudra faire une requete sur la BD pour chaque utilisateurs
-
-  return <CardUser user={user} />;
+  return (
+    <Flex gap={10}>
+      {/* à terme, envoyer les données du user depuis la session */}
+      <InfoUser user={user} />
+      <CardUser user={user} />
+    </Flex>
+  );
 }