feat(Début userContext + card): ajout du début de contextUser + card

package-lock.json

@@ -20,7 +20,9 @@
         "next": "13.2.3",
         "react": "18.2.0",
         "react-dom": "18.2.0",
-        "react-hook-form": "^7.43.5"
+        "react-hook-form": "^7.43.5",
+        "react-icons": "^4.8.0",
+        "react-slick": "^0.29.0"
       },
       "devDependencies": {
         "@types/node": "^18.15.1",
@@ -2321,6 +2323,11 @@
         "url": "https://github.com/chalk/chalk?sponsor=1"
       }
     },
+    "node_modules/classnames": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz",
+      "integrity": "sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw=="
+    },
     "node_modules/client-only": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz",
@@ -2546,6 +2553,11 @@
         "node": ">=10.13.0"
       }
     },
+    "node_modules/enquire.js": {
+      "version": "2.1.6",
+      "resolved": "https://registry.npmjs.org/enquire.js/-/enquire.js-2.1.6.tgz",
+      "integrity": "sha512-/KujNpO+PT63F7Hlpu4h3pE3TokKRHN26JYmQpPyjkRD/N57R7bPDNojMXdi7uveAKjYB7yQnartCxZnFWr0Xw=="
+    },
     "node_modules/error-ex": {
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
@@ -3962,6 +3974,14 @@
       "resolved": "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz",
       "integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw=="
     },
+    "node_modules/json2mq": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/json2mq/-/json2mq-0.2.0.tgz",
+      "integrity": "sha512-SzoRg7ux5DWTII9J2qkrZrqV1gt+rTaoufMxEzXbS26Uid0NwaJd123HcoB80TgubEppxxIGdNxCx50fEoEWQA==",
+      "dependencies": {
+        "string-convert": "^0.2.0"
+      }
+    },
     "node_modules/json5": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz",
@@ -4029,6 +4049,11 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/lodash.debounce": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
+      "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow=="
+    },
     "node_modules/lodash.merge": {
       "version": "4.6.2",
       "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
@@ -4615,6 +4640,14 @@
         "react": "^16.8.0 || ^17 || ^18"
       }
     },
+    "node_modules/react-icons": {
+      "version": "4.8.0",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.8.0.tgz",
+      "integrity": "sha512-N6+kOLcihDiAnj5Czu637waJqSnwlMNROzVZMhfX68V/9bu9qHaMIJC4UdozWoOk57gahFCNHwVvWzm0MTzRjg==",
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
     "node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
@@ -4665,6 +4698,22 @@
         }
       }
     },
+    "node_modules/react-slick": {
+      "version": "0.29.0",
+      "resolved": "https://registry.npmjs.org/react-slick/-/react-slick-0.29.0.tgz",
+      "integrity": "sha512-TGdOKE+ZkJHHeC4aaoH85m8RnFyWqdqRfAGkhd6dirmATXMZWAxOpTLmw2Ll/jPTQ3eEG7ercFr/sbzdeYCJXA==",
+      "dependencies": {
+        "classnames": "^2.2.5",
+        "enquire.js": "^2.1.6",
+        "json2mq": "^0.2.0",
+        "lodash.debounce": "^4.0.8",
+        "resize-observer-polyfill": "^1.5.0"
+      },
+      "peerDependencies": {
+        "react": "^0.14.0 || ^15.0.1 || ^16.0.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^0.14.0 || ^15.0.1 || ^16.0.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/react-style-singleton": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.2.1.tgz",
@@ -4719,6 +4768,11 @@
         "url": "https://github.com/sponsors/mysticatea"
       }
     },
+    "node_modules/resize-observer-polyfill": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
+      "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg=="
+    },
     "node_modules/resolve": {
       "version": "1.22.1",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.1.tgz",
@@ -4890,6 +4944,11 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/string-convert": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/string-convert/-/string-convert-0.2.1.tgz",
+      "integrity": "sha512-u/1tdPl4yQnPBjnVrmdLo9gtuLvELKsAoRapekWggdiQNvvvum+jYF329d84NAa660KQw7pB2n36KrIKVoXa3A=="
+    },
     "node_modules/string.prototype.matchall": {
       "version": "4.0.8",
       "resolved": "https://registry.npmjs.org/string.prototype.matchall/-/string.prototype.matchall-4.0.8.tgz",

package.json

@@ -21,7 +21,9 @@
     "next": "13.2.3",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-hook-form": "^7.43.5"
+    "react-hook-form": "^7.43.5",
+    "react-icons": "^4.8.0",
+    "react-slick": "^0.29.0"
   },
   "devDependencies": {
     "@types/node": "^18.15.1",

src/components/CardUser.jsx

@@ -14,16 +14,14 @@ export default function CardUser(props){
       padding={"0px"}
     >
       <Carousel
-            images = {user.images}
+        user={user}
         borderRadiusImg={borderRad}
-            height = {"60vh"}
+        heightPhoto={"60vh"}
+        heightText={"40vh"}
       />
       <Flex>
-                <Box>
+        <Box></Box>
-
-                </Box>
       </Flex>
     </Card>
   );
-    
 }

src/components/Carousel.jsx

@@ -1,9 +1,9 @@
-import React from 'react';
+import React from "react";
-import { Box, IconButton, useBreakpointValue } from '@chakra-ui/react';
+import { Box, IconButton, useBreakpointValue } from "@chakra-ui/react";
 // Here we have used react-icons package for the icons
-import { BiLeftArrowAlt, BiRightArrowAlt } from 'react-icons/bi';
+import { BiLeftArrowAlt, BiRightArrowAlt } from "react-icons/bi";
 // And react-slick as our Carousel Lib
-import Slider from 'react-slick';
+import Slider from "react-slick";
 
 // Settings for the slider
 const settings = {
@@ -19,17 +19,15 @@ const settings = {
 };
 
 export default function Carousel(props) {
-
+  const { heightPhoto, heightText, borderRadiusImg, user } = props;
-
-    const { height, borderRadiusImg } = props;
   // As we have used custom buttons, we need a reference variable to
   // change the state
   const [slider, setSlider] = React.useState();
 
   // These are the breakpoints which changes the position of the
   // buttons as the screen size changes
-  const top = useBreakpointValue({ base: '90%', md: '50%' });
+  const top = useBreakpointValue({ base: "90%", md: "50%" });
-  const side = useBreakpointValue({ base: '30%', md: '10px' });
+  const side = useBreakpointValue({ base: "30%", md: "10px" });
 
   // These are the images used in the slide
   //   const cards = [
@@ -38,14 +36,14 @@ export default function Carousel(props) {
   //     'https://images.unsplash.com/photo-1571432248690-7fd6980a1ae2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1yZWxhdGVkfDl8fHxlbnwwfHx8fA%3D%3D&auto=format&fit=crop&w=900&q=60',
   //   ];
 
-    const cards = props.images;
-
   return (
+    <>
       <Box
-      position={'relative'}
+        position={"relative"}
-      height={height}
+        height={heightPhoto}
-      width={'full'}
+        width={"full"}
-      overflow={'hidden'}>
+        overflow={"hidden"}
+      >
         {/* CSS files for react-slick */}
         <link
           rel="stylesheet"
@@ -66,9 +64,10 @@ export default function Carousel(props) {
           position="absolute"
           left={side}
           top={top}
-        transform={'translate(0%, -50%)'}
+          transform={"translate(0%, -50%)"}
           zIndex={2}
-        onClick={() => slider?.slickPrev()}>
+          onClick={() => slider?.slickPrev()}
+        >
           <BiLeftArrowAlt />
         </IconButton>
         {/* Right Icon */}
@@ -79,26 +78,31 @@ export default function Carousel(props) {
           position="absolute"
           right={side}
           top={top}
-        transform={'translate(0%, -50%)'}
+          transform={"translate(0%, -50%)"}
           zIndex={2}
-        onClick={() => slider?.slickNext()}>
+          onClick={() => slider?.slickNext()}
+        >
           <BiRightArrowAlt />
         </IconButton>
         {/* Slider */}
         <Slider {...settings} ref={(slider) => setSlider(slider)}>
-        {cards.map((url, index) => (
+          {user.images.map((url, index) => (
             <Box
               key={index}
-            borderRadius={borderRadiusImg}
+              borderTopEndRadius={borderRadiusImg}
-            height={'6xl'}
+              height={heightPhoto}
-            // position="relative"
+              backgroundPosition="center"
-            // backgroundPosition="center"
+              backgroundSize="cover"
-            // backgroundRepeat="no-repeat"
-            // backgroundSize="cover"
               backgroundImage={`url(${url})`}
             />
           ))}
         </Slider>
       </Box>
+      <Box height={heightText} bgGradient="radial(purple.200, purple.300)">
+        <h1>
+          {user.name} {user.surname} , {user.age}
+        </h1>
+      </Box>
+    </>
   );
 }

src/components/context/Users.jsx

@@ -0,0 +1,24 @@
+import { createContext, useContext, useState } from "react";
+
+// faudra récuperer les users de la base de données
+
+const UsersContext = createContext(null);
+
+export const UsersProvider = ({ children }) => {
+  const [users, setUsers] = useState(users);
+
+  return (
+    <UserContext.Provider value={{ users, setUsers }}>
+      {children}
+    </UserContext.Provider>
+  );
+};
+
+export const useUser = () => {
+  const usersState = useContext(UsersContext);
+
+  if (!usersState) {
+    throw new Error("useUsers must be used within a UsersProvider");
+  }
+  return usersState;
+};

src/pages/test_card.jsx

@@ -1,23 +1,14 @@
 import CardUser from "../components/CardUser";
 
 export default function Test_card() {
-
   const user = {
     name: "dujardin",
     surname: "jean",
     age: 19,
     aPropos: "Je suis une personne fictive, pas tres fictive",
-        images: [
+    images: ["401446.webp"],
-            "401446.webp"
+    passions: ["Sport", "Piscine", "Formule1"],
-        ],
+  };
-        passions : [
-            "Sport",
-            "Piscine",
-            "Formule1",
-        ]
-    }
 
-    return(
+  return <CardUser user={user} />;
-        <CardUser user={user}/>
-    )
 }