Add NewFileModal component and implement resizable panels

Introduce a new NewFileModal component for adding files with a dialog box. Adjust page layout to use resizable panels to improve flexibility and user experience. Modify CSS variables for better dark mode color scheme.
This commit is contained in:
Mathis H (Avnyr) 2024-10-17 10:26:51 +02:00
parent 3c31223293
commit ed1defb1da
Signed by: Mathis
GPG Key ID: DD9E0666A747D126
3 changed files with 78 additions and 14 deletions

View File

@ -31,9 +31,9 @@
}
.dark {
--background: 20 12.91% 14%;
--background: 20 14.3% 4.1%;
--foreground: 0 0% 92.55%;
--muted: 12 6.83% 26.64%;
--muted: 12 6.5% 15.1%;
--muted-foreground: 24 5.4% 63.9%;
--popover: 20 14.3% 4.1%;
--popover-foreground: 60 9.1% 97.8%;
@ -41,13 +41,13 @@
--card-foreground: 0 0% 92.55%;
--border: 12 6.19% 17.63%;
--input: 12 6.5% 15.1%;
--primary: 60 96.56% 44.61%;
--primary: 60 96.08% 41.3%;
--primary-foreground: 26 90.03% 12.55%;
--secondary: 12 26.8% 16.18%;
--secondary-foreground: 0 0% 92.55%;
--accent: 12 5.7% 26.68%;
--accent-foreground: 0 0% 92.55%;
--destructive: 0 60.83% 54.18%;
--destructive: 0 76.12% 38%;
--destructive-foreground: 0 0% 92.55%;
--ring: 47.95 95.82% 53.14%;
}

View File

@ -1,9 +1,13 @@
"use client"
import { useState } from 'react';
import { Dispatch, SetStateAction, useState } from 'react';
import { Button } from '../components/ui/button';
import { Home, NotepadTextDashed } from 'lucide-react';
import { NewFileModal } from 'apps/frontend/src/components/new-file-modal';
import {
ResizableHandle,
ResizablePanel,
ResizablePanelGroup
} from 'apps/frontend/src/components/ui/resizable';
export enum ESubPage {
Home,
@ -14,22 +18,47 @@ export default function HomePage() {
const [currentSubPage, setCurrentSubPage] = useState<ESubPage>(0)
return (
<main className="w-full h-full bg-background border border-muted p-2 rounded-md flex flex-row justify-stretch items-stretch">
<div className={"w-1/5 h-full p-1 flex flex-col items-center"}>
<SubPageSelector/>
</div>
<SubPage currentSubPage={currentSubPage}/>
<ResizablePanelGroup
direction="horizontal">
<ResizablePanel
defaultSize={20}
minSize={15}
maxSize={25}
className={"w-1/5 h-full p-1 flex flex-col items-center"}>
<SubPageSelector
currentSubPage={currentSubPage}
setCurrentSubPage={setCurrentSubPage}
/>
</ResizablePanel>
<ResizableHandle withHandle />
<ResizablePanel
className={"w-full flex justify-center items-center"}>
<SubPage currentSubPage={currentSubPage}/>
</ResizablePanel>
</ResizablePanelGroup>
</main>
);
}
function SubPageSelector() {
interface SubPageSelectorProps {
currentSubPage: ESubPage
setCurrentSubPage: Dispatch<SetStateAction<ESubPage>>
}
function SubPageSelector(props: SubPageSelectorProps) {
return (
<div className={"w-full flex flex-col justify-center items-stretch pt-4 p-4 gap-2"}>
<Button className={"gap-1 font-bold"}>
<Button
onClick={()=>props.setCurrentSubPage(ESubPage.Home)}
disabled={props.currentSubPage === ESubPage.Home}
className={"gap-1 font-bold"}>
<Home/>
Accueil
</Button>
<Button>
<NewFileModal/>
<Button
onClick={()=>props.setCurrentSubPage(ESubPage.Documentation)}
disabled={props.currentSubPage === ESubPage.Documentation}>
<NotepadTextDashed />
Documentation
</Button>

View File

@ -0,0 +1,35 @@
import { Button } from './ui/button';
import {
Dialog,
DialogContent, DialogDescription,
DialogHeader, DialogTitle,
DialogTrigger
} from './ui/dialog';
import { FileInput } from 'lucide-react';
export interface NewFileModalProps {
classname?: string;
}
export function NewFileModal(props: NewFileModalProps) {
return (
<Dialog>
<DialogTrigger asChild>
<Button className={"flex gap-2 items-center bg-secondary text-secondary-foreground"}>
<FileInput />
Ajouter un fichier
</Button>
</DialogTrigger>
<DialogContent>
<DialogHeader>
<DialogTitle>Are you absolutely sure?</DialogTitle>
<DialogDescription>
This action cannot be undone. This will permanently delete your account
and remove your data from our servers.
</DialogDescription>
</DialogHeader>
</DialogContent>
</Dialog>
)
}