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

@@ -1,29 +1,27 @@
 import { CardBody, Card, Image, Flex, Box } from "@chakra-ui/react";
 import Carousel from "./Carousel";
 
-export default function CardUser(props){
+export default function CardUser(props) {
-    const {user} = props;
+  const { user } = props;
-    // const data_user = props;
+  // const data_user = props;
-    const borderRad = "1.5rem";
+  const borderRad = "1.5rem";
 
-    return (
+  return (
-        <Card 
+    <Card
-          borderRadius={borderRad}
+      borderRadius={borderRad}
-          width={"30vw"}
+      width={"30vw"}
-          height={"100vh"}
+      height={"100vh"}
-          padding={"0px"}
+      padding={"0px"}
-            >
+    >
-            <Carousel
+      <Carousel
-            images = {user.images}
+        user={user}
-            borderRadiusImg = {borderRad}
+        borderRadiusImg={borderRad}
-            height = {"60vh"}
+        heightPhoto={"60vh"}
-            />
+        heightText={"40vh"}
-            <Flex>
+      />
-                <Box>
+      <Flex>
-
+        <Box></Box>
-                </Box>
+      </Flex>
-            </Flex>
+    </Card>
-        </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,86 +19,90 @@ 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 = [
+  //   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-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-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',
+  //     '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'}
+      <Box
-      height={height}
+        position={"relative"}
-      width={'full'}
+        height={heightPhoto}
-      overflow={'hidden'}>
+        width={"full"}
-      {/* CSS files for react-slick */}
+        overflow={"hidden"}
-      <link
+      >
-        rel="stylesheet"
+        {/* CSS files for react-slick */}
-        type="text/css"
+        <link
-        charSet="UTF-8"
+          rel="stylesheet"
-        href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css"
+          type="text/css"
-      />
+          charSet="UTF-8"
-      <link
+          href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css"
-        rel="stylesheet"
+        />
-        type="text/css"
+        <link
-        href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css"
+          rel="stylesheet"
-      />
+          type="text/css"
-      {/* Left Icon */}
+          href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css"
-      <IconButton
+        />
-        aria-label="left-arrow"
+        {/* Left Icon */}
-        colorScheme="purple"
+        <IconButton
-        borderRadius="full"
+          aria-label="left-arrow"
-        position="absolute"
+          colorScheme="purple"
-        left={side}
+          borderRadius="full"
-        top={top}
+          position="absolute"
-        transform={'translate(0%, -50%)'}
+          left={side}
-        zIndex={2}
+          top={top}
-        onClick={() => slider?.slickPrev()}>
+          transform={"translate(0%, -50%)"}
-        <BiLeftArrowAlt />
+          zIndex={2}
-      </IconButton>
+          onClick={() => slider?.slickPrev()}
-      {/* Right Icon */}
+        >
-      <IconButton
+          <BiLeftArrowAlt />
-        aria-label="right-arrow"
+        </IconButton>
-        colorScheme="purple"
+        {/* Right Icon */}
-        borderRadius="full"
+        <IconButton
-        position="absolute"
+          aria-label="right-arrow"
-        right={side}
+          colorScheme="purple"
-        top={top}
+          borderRadius="full"
-        transform={'translate(0%, -50%)'}
+          position="absolute"
-        zIndex={2}
+          right={side}
-        onClick={() => slider?.slickNext()}>
+          top={top}
-        <BiRightArrowAlt />
+          transform={"translate(0%, -50%)"}
-      </IconButton>
+          zIndex={2}
-      {/* Slider */}
+          onClick={() => slider?.slickNext()}
-      <Slider {...settings} ref={(slider) => setSlider(slider)}>
+        >
-        {cards.map((url, index) => (
+          <BiRightArrowAlt />
-          <Box
+        </IconButton>
-            key={index}
+        {/* Slider */}
-            borderRadius={borderRadiusImg}
+        <Slider {...settings} ref={(slider) => setSlider(slider)}>
-            height={'6xl'}
+          {user.images.map((url, index) => (
-            // position="relative"
+            <Box
-            // backgroundPosition="center"
+              key={index}
-            // backgroundRepeat="no-repeat"
+              borderTopEndRadius={borderRadiusImg}
-            // backgroundSize="cover"
+              height={heightPhoto}
-            backgroundImage={`url(${url})`}
+              backgroundPosition="center"
-          />
+              backgroundSize="cover"
-        ))}
+              backgroundImage={`url(${url})`}
-      </Slider>
+            />
-    </Box>
+          ))}
+        </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(){
+export default function Test_card() {
+  const user = {
+    name: "dujardin",
+    surname: "jean",
+    age: 19,
+    aPropos: "Je suis une personne fictive, pas tres fictive",
+    images: ["401446.webp"],
+    passions: ["Sport", "Piscine", "Formule1"],
+  };
 
-    const user = {
+  return <CardUser user={user} />;
-        name: "dujardin",
+}
-        surname: "jean",
-        age:19,
-        aPropos: "Je suis une personne fictive, pas tres fictive",
-        images: [
-            "401446.webp"
-        ],
-        passions : [
-            "Sport",
-            "Piscine",
-            "Formule1",
-        ]
-    }
-
-    return(
-        <CardUser user={user}/>
-    )
-}