lucasvbr/meeting-app
1
0
Fork 0
mirror of https://github.com/LucasVbr/meeting-app.git synced 2026-05-13 17:21:53 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Laurian-Dufrechou
2023-03-21 20:56:44 +01:00
parent 4f90ebc285
commit 13b8406de9
7 changed files with 2418 additions and 2292 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package-lock.json
Generated
+60 -1
View File
@@ -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
+3 -1
View File
@@ -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
+22 -24
View File
@@ -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";
return (
<Card
borderRadius={borderRad}
width={"30vw"}
height={"100vh"}
padding={"0px"}
>
<Carousel
images = {user.images}
borderRadiusImg = {borderRad}
height = {"60vh"}
/>
<Flex>
<Box>
</Box>
</Flex>
</Card>
);
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
user={user}
borderRadiusImg={borderRad}
heightPhoto={"60vh"}
heightText={"40vh"}
/>
<Flex>
<Box></Box>
</Flex>
</Card>
);
}
src/components/Carousel.jsx
+79 -75
View File
@@ -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>
</>
);
}
src/components/context/Users.jsx
+24
View File
@@ -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
+10 -19
View File
@@ -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 = {
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}/>
)
return <CardUser user={user} />;
}
yarn.lock
+2217 -2169
View File
File diff suppressed because it is too large Load Diff