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:
parent
3c31223293
commit
ed1defb1da
@ -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%;
|
||||
}
|
||||
|
@ -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>
|
||||
|
35
apps/frontend/src/components/new-file-modal.tsx
Normal file
35
apps/frontend/src/components/new-file-modal.tsx
Normal 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>
|
||||
)
|
||||
}
|
Loading…
x
Reference in New Issue
Block a user