mirror of
https://github.com/LucasVbr/meeting-app.git
synced 2026-05-13 17:21:53 +00:00
Edit Carousel
Took 1 hour 41 minutes
This commit is contained in:
Lucàs
Generated
+13
-55
@@ -17,14 +17,13 @@
|
||||
"bcrypt": "^5.1.0",
|
||||
"eslint": "8.35.0",
|
||||
"eslint-config-next": "13.2.3",
|
||||
"framer-motion": "^10.0.2",
|
||||
"framer-motion": "^10.8.5",
|
||||
"next": "13.2.3",
|
||||
"next-auth": "^4.20.1",
|
||||
"react": "18.2.0",
|
||||
"react-dom": "18.2.0",
|
||||
"react-hook-form": "^7.43.5",
|
||||
"react-icons": "^4.8.0",
|
||||
"react-slick": "^0.29.0"
|
||||
"react-icons": "^4.8.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/bcrypt": "^5.0.0",
|
||||
@@ -2416,11 +2415,6 @@
|
||||
"node": ">=10"
|
||||
}
|
||||
},
|
||||
"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",
|
||||
@@ -2680,11 +2674,6 @@
|
||||
"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",
|
||||
@@ -3375,9 +3364,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/framer-motion": {
|
||||
"version": "10.0.2",
|
||||
"resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-10.0.2.tgz",
|
||||
"integrity": "sha512-1k8y1e6DMRQ/r6or4TBxRhE1cXlDE5bm+SFeWLeh7ng0sfSbpROC2Qd1OEHq6lLXNARar/KKoj/EQ6eIvn60Uw==",
|
||||
"version": "10.8.5",
|
||||
"resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-10.8.5.tgz",
|
||||
"integrity": "sha512-qwvUAIwCc6fEZhg7ST+/z+f7Vt882jJvLiWZUHNdq2oZ/Y7gM6mLlpKi9xQg+pLu6DQVypikcKQ+MKnoFoXAJg==",
|
||||
"dependencies": {
|
||||
"tslib": "^2.4.0"
|
||||
},
|
||||
@@ -3387,6 +3376,14 @@
|
||||
"peerDependencies": {
|
||||
"react": "^18.0.0",
|
||||
"react-dom": "^18.0.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"react": {
|
||||
"optional": true
|
||||
},
|
||||
"react-dom": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/framer-motion/node_modules/@emotion/is-prop-valid": {
|
||||
@@ -4175,14 +4172,6 @@
|
||||
"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",
|
||||
@@ -4250,11 +4239,6 @@
|
||||
"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",
|
||||
@@ -5099,22 +5083,6 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"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",
|
||||
@@ -5182,11 +5150,6 @@
|
||||
"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",
|
||||
@@ -5395,11 +5358,6 @@
|
||||
"safe-buffer": "~5.2.0"
|
||||
}
|
||||
},
|
||||
"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-width": {
|
||||
"version": "4.2.3",
|
||||
"resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
|
||||
|
||||
+2
-3
@@ -18,14 +18,13 @@
|
||||
"bcrypt": "^5.1.0",
|
||||
"eslint": "8.35.0",
|
||||
"eslint-config-next": "13.2.3",
|
||||
"framer-motion": "^10.0.2",
|
||||
"framer-motion": "^10.8.5",
|
||||
"next": "13.2.3",
|
||||
"next-auth": "^4.20.1",
|
||||
"react": "18.2.0",
|
||||
"react-dom": "18.2.0",
|
||||
"react-hook-form": "^7.43.5",
|
||||
"react-icons": "^4.8.0",
|
||||
"react-slick": "^0.29.0"
|
||||
"react-icons": "^4.8.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/bcrypt": "^5.0.0",
|
||||
|
||||
@@ -1,154 +0,0 @@
|
||||
import React from "react";
|
||||
import {
|
||||
Box,
|
||||
Flex,
|
||||
Spacer,
|
||||
IconButton,
|
||||
useBreakpointValue,
|
||||
ButtonGroup,
|
||||
Badge,
|
||||
Text,
|
||||
} from "@chakra-ui/react";
|
||||
|
||||
import { BiLeftArrowAlt, BiRightArrowAlt, BiHeart } from "react-icons/bi";
|
||||
|
||||
import { RxCross1 } from "react-icons/rx";
|
||||
import Slider from "react-slick";
|
||||
|
||||
const settings = {
|
||||
dots: true,
|
||||
arrows: false,
|
||||
fade: true,
|
||||
infinite: true,
|
||||
autoplay: true,
|
||||
speed: 500,
|
||||
autoplaySpeed: 5000,
|
||||
slidesToShow: 1,
|
||||
slidesToScroll: 1,
|
||||
};
|
||||
|
||||
export default function Carousel(props) {
|
||||
const { borderRadiusImg, actualUser, potentialMatch } = props;
|
||||
|
||||
const [slider, setSlider] = React.useState();
|
||||
|
||||
const heightPhoto = "75vh";
|
||||
const heightText = "25vh";
|
||||
|
||||
const top = useBreakpointValue({ base: "90%", md: "50%" });
|
||||
const side = useBreakpointValue({ base: "30%", md: "10px" });
|
||||
|
||||
return (
|
||||
<>
|
||||
<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)}>
|
||||
{potentialMatch.images.map((url, index) => (
|
||||
<Box
|
||||
key={index}
|
||||
borderTopRadius={borderRadiusImg}
|
||||
height={heightPhoto}
|
||||
backgroundPosition="center"
|
||||
backgroundSize="cover"
|
||||
backgroundImage={`url(${url})`}
|
||||
/>
|
||||
))}
|
||||
</Slider>
|
||||
</Box>
|
||||
<Box
|
||||
height={heightText}
|
||||
borderBottomRadius={borderRadiusImg}
|
||||
// bgGradient="radial(purple.200, purple.300)"
|
||||
>
|
||||
<Flex m={"1vh"}>
|
||||
<h1
|
||||
style={{
|
||||
fontSize: "1.5rem",
|
||||
fontWeight: "bold",
|
||||
textAlign: "center",
|
||||
}}
|
||||
>
|
||||
{potentialMatch.firstName} {potentialMatch.lastName} ,{" "}
|
||||
{potentialMatch.age} ans
|
||||
</h1>
|
||||
<Spacer />
|
||||
<Box alignItems="center" display="flex">
|
||||
<Flex flexDirection={{ base: "row", sm: "column" }}>
|
||||
<ButtonGroup gap={"0.5rem"}>
|
||||
<IconButton borderRadius={"1rem"} colorScheme={"pink"}>
|
||||
<BiHeart />
|
||||
</IconButton>
|
||||
<IconButton borderRadius={"1rem"} colorScheme={"red"}>
|
||||
<RxCross1 />
|
||||
</IconButton>
|
||||
</ButtonGroup>
|
||||
</Flex>
|
||||
</Box>
|
||||
</Flex>
|
||||
|
||||
<Box m={"1vh"}>
|
||||
<Text style={{ fontWeight: "bold" }}>{potentialMatch.aPropos}</Text>
|
||||
</Box>
|
||||
<Box m={"1vh"}>
|
||||
<h2 style={{ fontWeight: "bold" }}>Passions :</h2>
|
||||
<Flex gap={"0.5rem"} mt={"1vh"}>
|
||||
{potentialMatch.passions.map((passion, index) =>
|
||||
actualUser.passions.includes(passion) ? (
|
||||
<Badge borderRadius={"0.5rem"} colorScheme={"purple"}>
|
||||
#{passion}
|
||||
</Badge>
|
||||
) : (
|
||||
<Badge borderRadius={"0.5rem"}>#{passion}</Badge>
|
||||
)
|
||||
)}
|
||||
</Flex>
|
||||
</Box>
|
||||
</Box>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,45 @@
|
||||
import {useState} from 'react';
|
||||
import {Flex, IconButton} from '@chakra-ui/react';
|
||||
import { BiLeftArrowAlt, BiRightArrowAlt } from "react-icons/bi";
|
||||
|
||||
interface Props {
|
||||
images: string[];
|
||||
}
|
||||
|
||||
const Carousel = ({images}: Props) => {
|
||||
const [currentIndex, setCurrentIndex] = useState(0);
|
||||
|
||||
const handleClickPrevious = () => {
|
||||
setCurrentIndex(
|
||||
(currentIndex === 0)
|
||||
? images.length - 1
|
||||
: currentIndex - 1,
|
||||
);
|
||||
};
|
||||
|
||||
const handleClickNext = () => {
|
||||
setCurrentIndex(
|
||||
(currentIndex === images.length - 1)
|
||||
? 0
|
||||
: currentIndex + 1,
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<Flex px={2} align="center" justify={'space-between'}
|
||||
bgImage={images[currentIndex]} bgSize={'cover'} width={'100%'}
|
||||
height={500}>
|
||||
<IconButton aria-label="left-arrow" colorScheme="purple"
|
||||
borderRadius="full" onClick={handleClickPrevious}>
|
||||
<BiLeftArrowAlt/>
|
||||
</IconButton>
|
||||
|
||||
<IconButton aria-label="left-arrow" colorScheme="purple"
|
||||
borderRadius="full" onClick={handleClickNext}>
|
||||
<BiRightArrowAlt/>
|
||||
</IconButton>
|
||||
</Flex>
|
||||
);
|
||||
};
|
||||
|
||||
export default Carousel;
|
||||
@@ -31,7 +31,7 @@ export default function LoginForm() {
|
||||
const {ok: connexionSuccess} = res as SignInResponse;
|
||||
|
||||
if (!connexionSuccess) setInvalidInput(true);
|
||||
else router.push('/');
|
||||
else router.push('/dashboard');
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
@@ -1,29 +0,0 @@
|
||||
import {Card, Flex, Box} from '@chakra-ui/react';
|
||||
import Carousel from '../../Carousel';
|
||||
|
||||
export default function CardUser(props) {
|
||||
const {user} = props;
|
||||
|
||||
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={"1rem"}
|
||||
width={'35vw'}
|
||||
height={'90vh'}
|
||||
padding={'0px'}
|
||||
marginY={'auto'}
|
||||
overflow={'hidden'}>
|
||||
<Carousel actualUser={user}
|
||||
potentialMatch={potentialMatch}
|
||||
heightPhoto={'75vh'}
|
||||
heightText={'25vh'}/>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,59 @@
|
||||
import {
|
||||
Card,
|
||||
Flex,
|
||||
Text,
|
||||
CardBody,
|
||||
IconButton,
|
||||
Heading,
|
||||
Box
|
||||
} from '@chakra-ui/react';
|
||||
import Carousel from '../../../Carousel';
|
||||
import {BiHeart} from 'react-icons/bi';
|
||||
import {RxCross1} from 'react-icons/rx';
|
||||
import PassionBadgeList
|
||||
from '@/components/layout/dashboard/card_user/PassionBadgeList';
|
||||
|
||||
export default function CardUser(props) {
|
||||
const {user} = props;
|
||||
|
||||
const interestingUser = {
|
||||
lastName: 'dujardin',
|
||||
firstName: 'jean',
|
||||
age: 19,
|
||||
aPropos: 'Je suis une personne fictive, pas tres fictive',
|
||||
images: ['/401446.webp', '/135538.webp'],
|
||||
passions: ['Sport', 'Piscine', 'Formule1'],
|
||||
};
|
||||
|
||||
return (
|
||||
<Card maxW="md" borderRadius={'1rem'} overflow={'hidden'}>
|
||||
<Carousel images={interestingUser.images}/>
|
||||
|
||||
<CardBody>
|
||||
<Flex justify={'space-between'} mb={'20px'}>
|
||||
<Heading fontSize={'1.5rem'} fontWeight={'bold'} flexBasis={'70%'}>
|
||||
{interestingUser.firstName} {interestingUser.lastName}, {interestingUser.age}ans
|
||||
</Heading>
|
||||
|
||||
<Flex gap={1}>
|
||||
<IconButton borderRadius={'1rem'} colorScheme={'purple'}><BiHeart/></IconButton>
|
||||
<IconButton borderRadius={'1rem'} colorScheme={'purple'}
|
||||
variant={'outline'}><RxCross1/></IconButton>
|
||||
</Flex>
|
||||
</Flex>
|
||||
|
||||
<Box mb={'20px'}>
|
||||
<Heading size={'sm'} fontWeight={'bold'}>A propos :</Heading>
|
||||
<Text>{interestingUser.aPropos}</Text>
|
||||
</Box>
|
||||
|
||||
<Box>
|
||||
<Heading size={'sm'} fontWeight={'bold'}>Passions :</Heading>
|
||||
<PassionBadgeList passions={interestingUser.passions}
|
||||
userPassions={user.passions}/>
|
||||
</Box>
|
||||
</CardBody>
|
||||
</Card>
|
||||
);
|
||||
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
import {Badge, Flex} from '@chakra-ui/react';
|
||||
|
||||
type Props = {
|
||||
passions: string[],
|
||||
userPassions?: string[]
|
||||
}
|
||||
|
||||
export default function PassionBadgeList({passions, userPassions = []}: Props) {
|
||||
return (
|
||||
<Flex gap={'0.5rem'} mt={'1vh'}>
|
||||
{passions.map((passion, index) =>
|
||||
<Badge key={index} colorScheme={
|
||||
userPassions.includes(passion) ? 'purple' : 'ghost'
|
||||
}
|
||||
>#{passion}</Badge>,
|
||||
)}
|
||||
</Flex>
|
||||
);
|
||||
}
|
||||
+1
-1
@@ -12,7 +12,7 @@ import {useRouter} from 'next/router';
|
||||
import {AiFillMessage} from 'react-icons/ai';
|
||||
import {BsFillPersonFill} from 'react-icons/bs';
|
||||
import LeftPanelButton
|
||||
from '@/components/layout/Dashboard/LeftPanel/LeftPanelButton';
|
||||
from '@/components/layout/dashboard/left_panel/LeftPanelButton';
|
||||
|
||||
export default function LeftPanel(props) {
|
||||
const router = useRouter();
|
||||
@@ -0,0 +1 @@
|
||||
export const websiteName = "Website"
|
||||
@@ -3,7 +3,10 @@ import { Html, Head, Main, NextScript } from 'next/document'
|
||||
export default function Document() {
|
||||
return (
|
||||
<Html lang="en">
|
||||
<Head />
|
||||
<Head>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1"/>
|
||||
<link rel="icon" href="/logo.svg"/>
|
||||
</Head>
|
||||
<body>
|
||||
<Main />
|
||||
<NextScript />
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import type {NextApiRequest, NextApiResponse} from 'next';
|
||||
import CRUD from '@/utils/CRUD';
|
||||
import CRUD from '@/models/api/CRUD';
|
||||
import {CreateUserQuery} from '@/models/api/UserQuery';
|
||||
import {hashPassword} from '@/lib/PasswordTools';
|
||||
import prismaClient from '@/lib/prismaClient';
|
||||
|
||||
@@ -4,8 +4,10 @@ import {useRouter} from 'next/router';
|
||||
import {Flex} from '@chakra-ui/react';
|
||||
|
||||
import type {Session} from '@/models/data_models/Session';
|
||||
import CardUser from "../components/layout/Dashboard/CardUser";
|
||||
import LeftPanel from "../components/layout/Dashboard/LeftPanel/LeftPanel";
|
||||
import CardUser from "../components/layout/dashboard/card_user/CardUser";
|
||||
import LeftPanel from "../components/layout/dashboard/left_panel/LeftPanel";
|
||||
import Head from 'next/head';
|
||||
import {websiteName} from '@/lib/constants';
|
||||
|
||||
export default function Dashboard() {
|
||||
const router = useRouter();
|
||||
@@ -26,10 +28,14 @@ export default function Dashboard() {
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Head><title>{websiteName} | Dashboard</title></Head>
|
||||
|
||||
<Flex gap={10}>
|
||||
<LeftPanel user={refinedUser} />
|
||||
<CardUser user={refinedUser} />
|
||||
<Flex justify={'center'} alignItems={'center'} ><CardUser user={refinedUser} /></Flex>
|
||||
</Flex>
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
+4
-8
@@ -1,18 +1,14 @@
|
||||
import Head from 'next/head';
|
||||
import Navbar from '@/components/Navbar';
|
||||
import HeroBanner from '@/components/layout/Home/HeroBanner';
|
||||
import HomePresentation from '@/components/layout/Home/PresentationSection';
|
||||
import HeroBanner from '@/components/layout/home/HeroBanner';
|
||||
import HomePresentation from '@/components/layout/home/PresentationSection';
|
||||
import {websiteName} from '@/lib/constants';
|
||||
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<>
|
||||
<Head>
|
||||
<title>Create Next App</title>
|
||||
<meta name="description" content="Generated by create next app"/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1"/>
|
||||
<link rel="icon" href="/favicon.ico"/>
|
||||
</Head>
|
||||
<Head><title>{websiteName}</title></Head>
|
||||
|
||||
<Navbar/>
|
||||
<HeroBanner/>
|
||||
|
||||
+8
-3
@@ -2,20 +2,25 @@ import {
|
||||
Box,
|
||||
Flex,
|
||||
} from '@chakra-ui/react';
|
||||
import Head from 'next/head';
|
||||
import LoginForm from '@/components/form/LoginForm';
|
||||
|
||||
import {websiteName} from '@/lib/constants';
|
||||
|
||||
export default function Login() {
|
||||
return (
|
||||
<>
|
||||
<Head><title>{websiteName} | Connexion</title></Head>
|
||||
|
||||
<Flex gap={5} h={'100vh'} justify={'center'} alignItems={'center'}>
|
||||
<Box flexBasis={'100%'}
|
||||
display={{base: "none", md: "block"}}
|
||||
h={"100%"}
|
||||
display={{base: 'none', md: 'block'}}
|
||||
h={'100%'}
|
||||
bgImage={'/couple_horizon.png'}
|
||||
bgSize={'cover'}
|
||||
bgPos={'center'}
|
||||
/>
|
||||
<LoginForm/>
|
||||
</Flex>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,9 +1,13 @@
|
||||
import { Box, Flex } from "@chakra-ui/react";
|
||||
import RegisterForm from "@/components/form/RegisterForm";
|
||||
import {websiteName} from '@/lib/constants';
|
||||
import Head from 'next/head';
|
||||
|
||||
export default function Register() {
|
||||
return (
|
||||
<Box>
|
||||
<>
|
||||
<Head><title>{websiteName} | Inscription</title></Head>
|
||||
|
||||
<Flex gap={10} h={"100vh"} alignItems={"center"}>
|
||||
<Box
|
||||
display={{ base: "none", md: "block" }}
|
||||
@@ -15,6 +19,6 @@ export default function Register() {
|
||||
/>
|
||||
<RegisterForm />
|
||||
</Flex>
|
||||
</Box>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,278 +0,0 @@
|
||||
.main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 6rem;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.description {
|
||||
display: inherit;
|
||||
justify-content: inherit;
|
||||
align-items: inherit;
|
||||
font-size: 0.85rem;
|
||||
max-width: var(--max-width);
|
||||
width: 100%;
|
||||
z-index: 2;
|
||||
font-family: var(--font-mono);
|
||||
}
|
||||
|
||||
.description a {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.description p {
|
||||
position: relative;
|
||||
margin: 0;
|
||||
padding: 1rem;
|
||||
background-color: rgba(var(--callout-rgb), 0.5);
|
||||
border: 1px solid rgba(var(--callout-border-rgb), 0.3);
|
||||
border-radius: var(--border-radius);
|
||||
}
|
||||
|
||||
.code {
|
||||
font-weight: 700;
|
||||
font-family: var(--font-mono);
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(25%, auto));
|
||||
width: var(--max-width);
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.card {
|
||||
padding: 1rem 1.2rem;
|
||||
border-radius: var(--border-radius);
|
||||
background: rgba(var(--card-rgb), 0);
|
||||
border: 1px solid rgba(var(--card-border-rgb), 0);
|
||||
transition: background 200ms, border 200ms;
|
||||
}
|
||||
|
||||
.card span {
|
||||
display: inline-block;
|
||||
transition: transform 200ms;
|
||||
}
|
||||
|
||||
.card h2 {
|
||||
font-weight: 600;
|
||||
margin-bottom: 0.7rem;
|
||||
}
|
||||
|
||||
.card p {
|
||||
margin: 0;
|
||||
opacity: 0.6;
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.5;
|
||||
max-width: 30ch;
|
||||
}
|
||||
|
||||
.center {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
padding: 4rem 0;
|
||||
}
|
||||
|
||||
.center::before {
|
||||
background: var(--secondary-glow);
|
||||
border-radius: 50%;
|
||||
width: 480px;
|
||||
height: 360px;
|
||||
margin-left: -400px;
|
||||
}
|
||||
|
||||
.center::after {
|
||||
background: var(--primary-glow);
|
||||
width: 240px;
|
||||
height: 180px;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.center::before,
|
||||
.center::after {
|
||||
content: '';
|
||||
left: 50%;
|
||||
position: absolute;
|
||||
filter: blur(45px);
|
||||
transform: translateZ(0);
|
||||
}
|
||||
|
||||
.logo,
|
||||
.thirteen {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.thirteen {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 75px;
|
||||
height: 75px;
|
||||
padding: 25px 10px;
|
||||
margin-left: 16px;
|
||||
transform: translateZ(0);
|
||||
border-radius: var(--border-radius);
|
||||
overflow: hidden;
|
||||
box-shadow: 0px 2px 8px -1px #0000001a;
|
||||
}
|
||||
|
||||
.thirteen::before,
|
||||
.thirteen::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
/* Conic Gradient Animation */
|
||||
.thirteen::before {
|
||||
animation: 6s rotate linear infinite;
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
background: var(--tile-border);
|
||||
}
|
||||
|
||||
/* Inner Square */
|
||||
.thirteen::after {
|
||||
inset: 0;
|
||||
padding: 1px;
|
||||
border-radius: var(--border-radius);
|
||||
background: linear-gradient(
|
||||
to bottom right,
|
||||
rgba(var(--tile-start-rgb), 1),
|
||||
rgba(var(--tile-end-rgb), 1)
|
||||
);
|
||||
background-clip: content-box;
|
||||
}
|
||||
|
||||
/* Enable hover only on non-touch devices */
|
||||
@media (hover: hover) and (pointer: fine) {
|
||||
.card:hover {
|
||||
background: rgba(var(--card-rgb), 0.1);
|
||||
border: 1px solid rgba(var(--card-border-rgb), 0.15);
|
||||
}
|
||||
|
||||
.card:hover span {
|
||||
transform: translateX(4px);
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion) {
|
||||
.thirteen::before {
|
||||
animation: none;
|
||||
}
|
||||
|
||||
.card:hover span {
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Mobile */
|
||||
@media (max-width: 700px) {
|
||||
.content {
|
||||
padding: 4rem;
|
||||
}
|
||||
|
||||
.grid {
|
||||
grid-template-columns: 1fr;
|
||||
margin-bottom: 120px;
|
||||
max-width: 320px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.card {
|
||||
padding: 1rem 2.5rem;
|
||||
}
|
||||
|
||||
.card h2 {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.center {
|
||||
padding: 8rem 0 6rem;
|
||||
}
|
||||
|
||||
.center::before {
|
||||
transform: none;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.description {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.description a {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.description p,
|
||||
.description div {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.description p {
|
||||
align-items: center;
|
||||
inset: 0 0 auto;
|
||||
padding: 2rem 1rem 1.4rem;
|
||||
border-radius: 0;
|
||||
border: none;
|
||||
border-bottom: 1px solid rgba(var(--callout-border-rgb), 0.25);
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
rgba(var(--background-start-rgb), 1),
|
||||
rgba(var(--callout-rgb), 0.5)
|
||||
);
|
||||
background-clip: padding-box;
|
||||
backdrop-filter: blur(24px);
|
||||
}
|
||||
|
||||
.description div {
|
||||
align-items: flex-end;
|
||||
pointer-events: none;
|
||||
inset: auto 0 0;
|
||||
padding: 2rem;
|
||||
height: 200px;
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
transparent 0%,
|
||||
rgb(var(--background-end-rgb)) 40%
|
||||
);
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* Tablet and Smaller Desktop */
|
||||
@media (min-width: 701px) and (max-width: 1120px) {
|
||||
.grid {
|
||||
grid-template-columns: repeat(2, 50%);
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.vercelLogo {
|
||||
filter: invert(1);
|
||||
}
|
||||
|
||||
.logo,
|
||||
.thirteen img {
|
||||
filter: invert(1) drop-shadow(0 0 0.3rem #ffffff70);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes rotate {
|
||||
from {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user