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

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 {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 {data: session, status} = useSession();
@@ -40,7 +44,7 @@ export default function Navbar() {
};
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}>
<Flex align={'center'}>
<Box flexBasis={'100%'}>
src/components/layout/dashboard/left_panel/LeftPanel.jsx
+1 -3
View File
@@ -4,8 +4,6 @@ import {
Box,
Image,
Text,
Button,
VStack,
Spacer,
} from '@chakra-ui/react';
import {useRouter} from 'next/router';
@@ -19,7 +17,7 @@ export default function LeftPanel(props) {
const {user} = props;
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%'}>
<Box>
<Image src={user.images[0]} borderRadius={'1rem'}/>
src/pages/dashboard.tsx
+30 -16
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 {useRouter} from 'next/router';
import {Flex} from '@chakra-ui/react';
import type {Session} from '@/models/data_models/Session';
import CardUser from "../components/layout/dashboard/card_user/CardUser";
import LeftPanel from "../components/layout/dashboard/left_panel/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';
import Navbar from '@/components/Navbar';
export default function Dashboard() {
const router = useRouter();
const {data: session, status} = useSession();
if (status === "loading") return <Text>Loading...</Text>
if (status === "unauthenticated") router.push("/login");
if (status === 'loading') return <Text>Loading...</Text>;
if (status === 'unauthenticated') router.push('/login');
if (status === "authenticated") {
if (status === 'authenticated') {
const {user} = session as unknown as Session;
const refinedUser = {...user,
const refinedUser = {
...user,
age: 21,
aPropos: "Je suis la personne fictive la plus fictive",
images: ["135538.webp"],
passions: ["Sport", "Voiture", "Cuisine"],
aPropos: 'Je suis la personne fictive la plus fictive',
images: ['135538.webp'],
passions: ['Sport', 'Voiture', 'Cuisine'],
};
return (
<>
<Head><title>{websiteName} | Dashboard</title></Head>
<Flex gap={10}>
<LeftPanel user={refinedUser} />
<Flex justify={'center'} alignItems={'center'} ><CardUser user={refinedUser} /></Flex>
</Flex>
<Grid templateColumns={'repeat(5, 1fr)'}
templateRows={'repeat(2, 1fr)'} gap={5} minH={'100vh'}>
<GridItem area={'1 / 1 / 3 / 2'}>
<LeftPanel user={refinedUser}/>
</GridItem>
<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>
</>
);
}