lucasvbr/meeting-app
1
0
Fork 0
mirror of https://github.com/LucasVbr/meeting-app.git synced 2026-07-09 15:08:06 +00:00
Code Issues Packages Projects Releases Wiki Activity

Use Grid to dashboard

Browse Source 
Took 22 minutes
This commit is contained in:
Lucàs
2023-03-23 15:59:39 +01:00
parent ae9fd9ee16
commit b8a862357f
3 changed files with 37 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Navbar.tsx
+6 -2
View File
@@ -9,7 +9,11 @@ import {
import {useRouter} from 'next/router'; import {useRouter} from 'next/router';
import {signOut, useSession} from 'next-auth/react'; import {signOut, useSession} from 'next-auth/react';
export default function Navbar() { type Props = {
variant: "static" | "fixed"
}
export default function Navbar({variant = "fixed"}: Props) {
const router = useRouter(); const router = useRouter();
const {data: session, status} = useSession(); const {data: session, status} = useSession();
@@ -40,7 +44,7 @@ export default function Navbar() {
}; };
return ( return (
<Box position={'fixed'} zIndex={9999} top={0} width={'100vw'} <Box position={variant} zIndex={9999} top={0} width={'100vw'}
backdropFilter={'auto'} backdropBlur={'20px'} px={10} py={2}> backdropFilter={'auto'} backdropBlur={'20px'} px={10} py={2}>
<Flex align={'center'}> <Flex align={'center'}>
<Box flexBasis={'100%'}> <Box flexBasis={'100%'}>
src/components/layout/dashboard/left_panel/LeftPanel.jsx
+1 -3
View File
@@ -4,8 +4,6 @@ import {
Box, Box,
Image, Image,
Text, Text,
Button,
VStack,
Spacer, Spacer,
} from '@chakra-ui/react'; } from '@chakra-ui/react';
import {useRouter} from 'next/router'; import {useRouter} from 'next/router';
@@ -19,7 +17,7 @@ export default function LeftPanel(props) {
const {user} = props; const {user} = props;
return ( return (
<Card width={'20vw'} height={'100vh'} padding={'0px'}> <Card width={'20vw'} height={'100%'} borderRadius={0} padding={'0px'} bg={'#faf9ff'}>
<Flex direction={'column'} height={'100%'} margin={'10%'}> <Flex direction={'column'} height={'100%'} margin={'10%'}>
<Box> <Box>
<Image src={user.images[0]} borderRadius={'1rem'}/> <Image src={user.images[0]} borderRadius={'1rem'}/>
src/pages/dashboard.tsx
+29 -15
View File
@@ -1,40 +1,54 @@
import {Text} from '@chakra-ui/react'; import {Grid, GridItem, Text, Box} from '@chakra-ui/react';
import {useSession} from 'next-auth/react'; import {useSession} from 'next-auth/react';
import {useRouter} from 'next/router'; import {useRouter} from 'next/router';
import {Flex} from '@chakra-ui/react';
import type {Session} from '@/models/data_models/Session'; import type {Session} from '@/models/data_models/Session';
import CardUser from "../components/layout/dashboard/card_user/CardUser"; import CardUser from '../components/layout/dashboard/card_user/CardUser';
import LeftPanel from "../components/layout/dashboard/left_panel/LeftPanel"; import LeftPanel from '../components/layout/dashboard/left_panel/LeftPanel';
import Head from 'next/head'; import Head from 'next/head';
import {websiteName} from '@/lib/constants'; import {websiteName} from '@/lib/constants';
import Navbar from '@/components/Navbar';
export default function Dashboard() { export default function Dashboard() {
const router = useRouter(); const router = useRouter();
const {data: session, status} = useSession(); const {data: session, status} = useSession();
if (status === "loading") return <Text>Loading...</Text> if (status === 'loading') return <Text>Loading...</Text>;
if (status === "unauthenticated") router.push("/login"); if (status === 'unauthenticated') router.push('/login');
if (status === 'authenticated') {
if (status === "authenticated") {
const {user} = session as unknown as Session; const {user} = session as unknown as Session;
const refinedUser = {...user, const refinedUser = {
...user,
age: 21, age: 21,
aPropos: "Je suis la personne fictive la plus fictive", aPropos: 'Je suis la personne fictive la plus fictive',
images: ["135538.webp"], images: ['135538.webp'],
passions: ["Sport", "Voiture", "Cuisine"], passions: ['Sport', 'Voiture', 'Cuisine'],
}; };
return ( return (
<> <>
<Head><title>{websiteName} | Dashboard</title></Head> <Head><title>{websiteName} | Dashboard</title></Head>
<Flex gap={10}>
<Grid templateColumns={'repeat(5, 1fr)'}
templateRows={'repeat(2, 1fr)'} gap={5} minH={'100vh'}>
<GridItem area={'1 / 1 / 3 / 2'}>
<LeftPanel user={refinedUser}/> <LeftPanel user={refinedUser}/>
<Flex justify={'center'} alignItems={'center'} ><CardUser user={refinedUser} /></Flex> </GridItem>
</Flex> <GridItem area={'1 / 2 / 3 / 4'}>
<Box py={3}>
<CardUser user={refinedUser}/>
</Box>
</GridItem>
<GridItem area={'1 / 4 / 2 / 6'}>
{/*Right top*/}
</GridItem>
<GridItem area={'2 / 4 / 3 / 6'}>
{/*Right Bottom*/}
</GridItem>
</Grid>
</> </>
); );
} }