Refactor Dashboard

Took 1 hour 32 minutes

src/components/layout/Dashboard/CardUser.jsx

@@ -0,0 +1,29 @@
+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>
+  );
+}

src/components/layout/Dashboard/LeftPanel/LeftPanel.jsx

@@ -0,0 +1,51 @@
+import {
+  Card,
+  Flex,
+  Box,
+  Image,
+  Text,
+  Button,
+  VStack,
+  Spacer,
+} from '@chakra-ui/react';
+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';
+
+export default function LeftPanel(props) {
+  const router = useRouter();
+  const {user} = props;
+
+  return (
+    <Card width={'20vw'} height={'100vh'} padding={'0px'}>
+      <Flex direction={'column'} height={'100%'} margin={'10%'}>
+        <Box>
+          <Image src={user.images[0]} borderRadius={'1rem'}/>
+          <Box mt={'1vh'}>
+            <Text fontSize={'1.5rem'} fontWeight={'bold'}>
+              {user.firstName} {user.lastName}
+            </Text>
+            <Text as="i" fontWeight={'bold'}>
+              &quot;{user.aPropos}&quot;
+            </Text>
+          </Box>
+        </Box>
+        <Spacer/>
+        <Flex gap={2} direction={'column'} mt={'1vh'} spacing={3.5}
+              alignContent={'bottom'}>
+
+          <LeftPanelButton leftIcon={<AiFillMessage/>}
+                           onClickHandler={() => router.push('/dashboard')}>
+            Messages
+          </LeftPanelButton>
+          <LeftPanelButton leftIcon={<BsFillPersonFill/>}
+                           onClickHandler={() => router.push('/dashboard')}>
+            Profile
+          </LeftPanelButton>
+        </Flex>
+      </Flex>
+    </Card>
+  );
+}

src/components/layout/Dashboard/LeftPanel/LeftPanelButton.tsx

@@ -0,0 +1,25 @@
+import {Button} from '@chakra-ui/react';
+import {ReactJSXElement} from '@emotion/react/types/jsx-namespace';
+
+type Props = {
+  children?: ReactJSXElement
+  onClickHandler: () => void
+  leftIcon ?: ReactJSXElement
+}
+
+export default function LeftPanelButton(props: Props) {
+  const {children, onClickHandler, leftIcon: icon} = props;
+
+  return (
+      <Button
+          colorScheme={'purple'}
+          variant={'ghost'}
+          width={'100%'}
+          justifyContent={'left'}
+          onClick={onClickHandler}
+          leftIcon={icon}
+          fontWeight={'bold'}
+          fontSize={'1.2rem'}
+      >{children}</Button>
+  );
+}