FabLab/app
1
0
Fork 0
Code Pull Requests Actions Packages Releases Activity

Refactor layout and navigation on HomePage

Browse Source 
Updated tsconfig.json to include paths for better imports. Modified layout.tsx and Header.tsx for improved styles. Refactored HomePage to use new state management and simplified components for better readability and navigation.
This commit is contained in:
Mathis H (Avnyr) 2024-09-23 16:17:31 +02:00
parent 3e49047f0e
commit bdadf51e54
Signed by: Mathis
GPG Key ID: DD9E0666A747D126
4 changed files with 48 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/frontend/src/app/layout.tsx
View File

@ -15,7 +15,7 @@ export default function RootLayout({
}) { }) {
return ( return (
<html lang="en"> <html lang="en">
<body className={"h-screen w-screen bg-card flex flex-col justify-between items-center police-ubuntu dark"}> <body className={"h-screen w-screen bg-card flex flex-col justify-between items-center police-ubuntu"}>
<Header/> <Header/>
{children} {children}
<Footer/> <Footer/>

72
apps/frontend/src/app/page.tsx
View File

@ -1,36 +1,50 @@
import { "use client"
Tabs, import { useState } from 'react';
TabsContent, import { Button } from '../components/ui/button';
TabsList, import { Home } from 'lucide-react';
TabsTrigger,
} from '../components/ui/tabs';
import { Cog, FilePlus2, FolderClosed, Info } from 'lucide-react';
export enum ESubPage {
Home,
Documentation,
}
export default function HomePage() { export default function HomePage() {
const [currentSubPage, setCurrentSubPage] = useState<ESubPage>(0)
return ( return (
<main className="container w-full h-5/6 bg-background border border-muted p-2 rounded-md flex flex-col justify-stretch items-stretch"> <main className="w-full h-full bg-background border border-muted p-2 rounded-md flex flex-row justify-stretch items-stretch">
<Tabs defaultValue="list" className="w-full h-full"> <div className={"w-1/5 h-full p-1 flex flex-col items-center"}>
<TabsList className={"w-full text-xl text-secondary dark:text-primary bg-card"}> <SubPageSelector/>
<TabsTrigger className={"gap-2 m-2"} value="list"><FolderClosed className={"w-5"}/> <p>Liste des fichiers</p></TabsTrigger> </div>
<TabsTrigger className={"gap-2 m-2"} value="new"><FilePlus2 className={"w-5"} /> <p>Ajouter un fichier</p></TabsTrigger> <SubPage currentSubPage={currentSubPage}/>
<TabsTrigger className={"gap-2 m-2"} value="admin" disabled><Cog className={"w-5"} /> <p>Administration</p></TabsTrigger>
<TabsTrigger className={"gap-2 m-2"} value="info"><Info className={"w-5"} /> <p>Informations</p></TabsTrigger>
</TabsList>
<TabsContent className={"overflow-auto"} value="list">
Liste des fichiers
</TabsContent>
<TabsContent className={"overflow-auto"} value="new">
Ajouter un nouveau fichier
</TabsContent>
<TabsContent className={"overflow-auto"} value="admin">
Administration
</TabsContent>
<TabsContent className={"overflow-auto"} value="info">
Information
</TabsContent>
</Tabs>
</main> </main>
); );
} }
function SubPageSelector() {
return (
<div className={"w-full flex flex-col justify-center items-stretch pt-4 p-4 gap-2"}>
<Button className={"gap-1 font-bold"}>
<Home/>
Accueil
</Button>
<Button>Documentation</Button>
</div>
)
}
export interface ISubPageProps {
currentSubPage: ESubPage
}
function SubPage(props: ISubPageProps) {
switch (props.currentSubPage) {
case ESubPage.Home:
return (<>Home</>)
case ESubPage.Documentation:
return (<>Doc</>)
default:
return (<>Default</>)
}
}

3
apps/frontend/src/components/Header.tsx
View File

@ -1,8 +1,7 @@
export function Header() { export function Header() {
return ( return (
<header className={"container flex justify-evenly items-center p-2 mb-4 rounded bg-background"}> <header className={"w-full flex justify-evenly items-center rounded bg-background"}>
<div> <div>
<h1 className={"text-2xl"}>Gestionnaire des fichiers</h1>
</div> </div>
</header> </header>
) )

3
apps/frontend/tsconfig.json
View File

@ -16,6 +16,9 @@
"name": "next" "name": "next"
} }
], ],
"paths": {
"@/*": ["./src/*"]
},
"types": [ "types": [
"jest", "jest",
"node" "node"