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

Ajoute des composants UI et des packages Radix

Browse Source 
Ajout des nouveaux composants UI : Alert, Badge, Form, Sheet, Tabs et Input dans le répertoire frontend. Mise à jour du fichier package.json avec des nouvelles dépendances Radix UI et des autres bibliothèques nécessaires. Ajout d'une configuration pour TailwindCSS dans components.json.
This commit is contained in:
Mathis H (Avnyr)
2024-08-23 13:23:57 +02:00
parent 25fc0127b2
commit 46f8a61c9e
11 changed files with 146 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files

97
apps/frontend/src/app/global.css
View File

@@ -2,71 +2,54 @@
@tailwind components;
@tailwind utilities;
.police-ubuntu {
font-family: 'Ubuntu', sans-serif;
}
@layer base {
:root {
--background: 0 0% 100%;
--foreground: 222.2 47.4% 11.2%;
--muted: 210 40% 96.1%;
--muted-foreground: 215.4 16.3% 46.9%;
--background: 0 0% 87.18%;
--foreground: 0 0% 12.94%;
--muted: 60 4.8% 95.9%;
--muted-foreground: 26 83.33% 14.12%;
--popover: 0 0% 100%;
--popover-foreground: 222.2 47.4% 11.2%;
--border: 214.3 31.8% 91.4%;
--input: 214.3 31.8% 91.4%;
--popover-foreground: 0 0% 12.94%;
--card: 0 0% 100%;
--card-foreground: 222.2 47.4% 11.2%;
--primary: 222.2 47.4% 11.2%;
--primary-foreground: 210 40% 98%;
--secondary: 210 40% 96.1%;
--secondary-foreground: 222.2 47.4% 11.2%;
--accent: 210 40% 96.1%;
--accent-foreground: 222.2 47.4% 11.2%;
--destructive: 0 100% 50%;
--destructive-foreground: 210 40% 98%;
--ring: 215 20.2% 65.1%;
--card-foreground: 0 0% 12.94%;
--border: 20 0% 52.31%;
--input: 20 21.42% 41.39%;
--primary: 47.9 100% 48.08%;
--primary-foreground: 26 83.3% 14.1%;
--secondary: 26 49.13% 43.5%;
--secondary-foreground: 0 0% 92.55%;
--accent: 60 0% 93.08%;
--accent-foreground: 24 9.8% 10%;
--destructive: 0 84.2% 60.2%;
--destructive-foreground: 60 9.1% 97.8%;
--ring: 20 14.3% 4.1%;
--radius: 0.5rem;
}
.dark {
--background: 224 71% 4%;
--foreground: 213 31% 91%;
--muted: 223 47% 11%;
--muted-foreground: 215.4 16.3% 56.9%;
--accent: 216 34% 17%;
--accent-foreground: 210 40% 98%;
--popover: 224 71% 4%;
--popover-foreground: 215 20.2% 65.1%;
--border: 216 34% 17%;
--input: 216 34% 17%;
--card: 224 71% 4%;
--card-foreground: 213 31% 91%;
--primary: 210 40% 98%;
--primary-foreground: 222.2 47.4% 1.2%;
--secondary: 222.2 47.4% 11.2%;
--secondary-foreground: 210 40% 98%;
--destructive: 0 63% 31%;
--destructive-foreground: 210 40% 98%;
--ring: 216 34% 17%;
--radius: 0.5rem;
--background: 20 12.91% 14%;
--foreground: 0 0% 92.55%;
--muted: 12 6.83% 26.64%;
--muted-foreground: 24 5.4% 63.9%;
--popover: 20 14.3% 4.1%;
--popover-foreground: 60 9.1% 97.8%;
--card: 20 14.3% 4.1%;
--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-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-foreground: 0 0% 92.55%;
--ring: 47.95 95.82% 53.14%;
}
}

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

@@ -1,4 +1,7 @@
import { Header } from '../components/Header';
import '@fontsource/ubuntu';
import './global.css';
import { Footer } from '../components/Footer';
export const metadata = {
title: 'Welcome to frontend',
@@ -12,7 +15,11 @@ export default function RootLayout({
}) {
return (
<html lang="en">
<body>{children}</body>
<body className={"h-screen w-screen bg-card flex flex-col justify-between items-center police-ubuntu dark"}>
<Header/>
{children}
<Footer/>
</body>
</html>
);
}

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

@@ -1,12 +1,36 @@
import {
Tabs,
TabsContent,
TabsList,
TabsTrigger,
} from '../components/ui/tabs';
import { Cog, FilePlus2, FolderClosed, Info } from 'lucide-react';
export default function HomePage() {
/*
* Replace the elements below with your own.
*
* Note: The corresponding styles are in the ./index.tailwind file.
*/
return (
<main className="bg-slate-600 h-screen w-full flex items-center justify-center ">
<h1 className="text-white text-6xl">Hello world</h1>
<main className="container w-full h-5/6 bg-background border border-muted p-2 rounded-md flex flex-col justify-stretch items-stretch">
<Tabs defaultValue="list" className="w-full h-full">
<TabsList className={"w-full text-xl text-secondary dark:text-primary bg-card"}>
<TabsTrigger className={"gap-2 m-2"} value="list"><FolderClosed className={"w-5"}/> <p>Liste des fichiers</p></TabsTrigger>
<TabsTrigger className={"gap-2 m-2"} value="new"><FilePlus2 className={"w-5"} /> <p>Ajouter un fichier</p></TabsTrigger>
<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>
);
}

3
apps/frontend/src/components/Footer.tsx Normal file
View File

@@ -0,0 +1,3 @@
export function Footer() {
return (<footer></footer>)
}

9
apps/frontend/src/components/Header.tsx Normal file
View File

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