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

2026-07-09 15:08:06 +00:00 · 2023-03-21 20:56:44 +01:00
parent 4f90ebc285
commit 13b8406de9
7 changed files with 2418 additions and 2292 deletions
@@ -1,29 +1,27 @@
 import { CardBody, Card, Image, Flex, Box } from "@chakra-ui/react";
 import Carousel from "./Carousel";

-export default function CardUser(props){
-    const {user} = props;
-    // const data_user = props;
-    const borderRad = "1.5rem";
+export default function CardUser(props) {
+  const { user } = props;
+  // const data_user = props;
+  const borderRad = "1.5rem";

-    return (
-        <Card 
-          borderRadius={borderRad}
-          width={"30vw"}
-          height={"100vh"}
-          padding={"0px"}
-            >
-            <Carousel
-            images = {user.images}
-            borderRadiusImg = {borderRad}
-            height = {"60vh"}
-            />
-            <Flex>
-                <Box>
-
-                </Box>
-            </Flex>
-        </Card>
-    );
-    
-}
+  return (
+    <Card
+      borderRadius={borderRad}
+      width={"30vw"}
+      height={"100vh"}
+      padding={"0px"}
+    >
+      <Carousel
+        user={user}
+        borderRadiusImg={borderRad}
+        heightPhoto={"60vh"}
+        heightText={"40vh"}
+      />
+      <Flex>
+        <Box></Box>
+      </Flex>
+    </Card>
+  );
+}
@@ -1,9 +1,9 @@
-import React from 'react';
-import { Box, IconButton, useBreakpointValue } from '@chakra-ui/react';
+import React from "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 { height, borderRadiusImg } = props;
+  const { heightPhoto, heightText, borderRadiusImg, user } = 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 side = useBreakpointValue({ base: '30%', md: '10px' });
+  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',
-//   ];
-
-    const cards = props.images;
+  //   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
-      position={'relative'}
-      height={height}
-      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)}>
-        {cards.map((url, index) => (
-          <Box
-            key={index}
-            borderRadius={borderRadiusImg}
-            height={'6xl'}
-            // position="relative"
-            // backgroundPosition="center"
-            // backgroundRepeat="no-repeat"
-            // backgroundSize="cover"
-            backgroundImage={`url(${url})`}
-          />
-        ))}
-      </Slider>
-    </Box>
+    <>
+      <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)}>
+          {user.images.map((url, index) => (
+            <Box
+              key={index}
+              borderTopEndRadius={borderRadiusImg}
+              height={heightPhoto}
+              backgroundPosition="center"
+              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>
+    </>
  );
-}
+}
@@ -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;
+};