Update card & dashboard
This commit is contained in:
Théo
parent
79dc7eef07
commit
da139e88e7
7 changed files with 163 additions and 123 deletions
2
.vscode/settings.json
vendored
2
.vscode/settings.json
vendored
|
|
@ -1,4 +1,4 @@
|
|||
{
|
||||
"typescript.tsdk": "node_modules\\.pnpm\\typescript@4.9.5\\node_modules\\typescript\\lib",
|
||||
"typescript.tsdk": "node_modules/.pnpm/typescript@4.9.5/node_modules/typescript/lib",
|
||||
"typescript.enablePromptUseWorkspaceTsdk": true
|
||||
}
|
||||
|
|
@ -4,7 +4,7 @@ import Wrapper from '@/ui/dashboard/Wrapper';
|
|||
|
||||
export default function Layout({ children }: { children: ReactNode }) {
|
||||
return (
|
||||
<div className="flex h-screen flex-col">
|
||||
<div className="flex h-screen w-full flex-col">
|
||||
<Wrapper>{children}</Wrapper>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -3,34 +3,29 @@ import CardTable from '@/ui/CardTable';
|
|||
|
||||
export default function Page() {
|
||||
return (
|
||||
<div className="flex h-screen w-full">
|
||||
<div className="">
|
||||
<h1 className="text-2xl font-bold tracking-tight">Statistique</h1>
|
||||
<div className="flex flex-col space-x-0 pt-5 md:flex-row md:space-x-9">
|
||||
<Card />
|
||||
<Card />
|
||||
<Card />
|
||||
<div className="flex h-full w-full flex-col justify-between space-y-4">
|
||||
<div className="flex flex-col space-y-6">
|
||||
<div className="flex flex-col space-y-2">
|
||||
<h2 className="text-2xl">Bienvenue!</h2>
|
||||
<p className="text-muted">Ceci est la page d'accueil du dashboard</p>
|
||||
</div>
|
||||
<div className="flex h-[60%] flex-col space-x-0 pt-5 md:flex-row md:space-x-[5%]">
|
||||
<div className="mb-9 w-6/12">
|
||||
<h1 className="text-2xl font-bold tracking-tight">Guide</h1>
|
||||
<div className="flex h-full flex-col space-x-0 pt-5 md:flex-row md:space-x-[10%] ">
|
||||
<div className="h-full w-full rounded-lg bg-dark shadow-md">
|
||||
<div className="flex justify-between rounded-lg py-2 px-4">
|
||||
<div className="my-auto">
|
||||
<p className="font-bold">Bold data</p>
|
||||
<p className="text-lg">Simple data</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mb-9 w-6/12">
|
||||
<h1 className="text-2xl font-bold tracking-tight">Dernières activités </h1>
|
||||
<div className="flex h-full flex-col space-x-0 pt-5 md:flex-row md:space-x-[10%]">
|
||||
<section className="flex justify-between space-x-4">
|
||||
<Card />
|
||||
<Card />
|
||||
<Card />
|
||||
</section>
|
||||
|
||||
<div className="flex">
|
||||
<section className="flex max-h-96 w-full space-y-4">
|
||||
<div className="flex justify-between space-x-4">
|
||||
<CardTable />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section className="flex max-h-96 w-full space-y-4">
|
||||
<div className="flex justify-between space-x-4">
|
||||
<CardTable />
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
import Puzzles from '@/ui/Puzzles';
|
||||
import SWRFallback from '@/ui/SWRFallback';
|
||||
|
||||
export default async function Page() {
|
||||
// const puzzles = await getPuzzles();
|
||||
|
|
|
|||
20
ui/Card.tsx
20
ui/Card.tsx
|
|
@ -1,12 +1,8 @@
|
|||
export default function Card() {
|
||||
return (
|
||||
<div className="w-96 h-20 bg-dark rounded-lg shadow-md mb-9">
|
||||
<div className="flex w-full h-full py-2 px-4 rounded-lg justify-between">
|
||||
<div className="my-auto">
|
||||
<p className="font-bold">Bold data</p>
|
||||
<p className="text-lg">Simple data</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
export default function Card({ title = 'Title', data = 'Data' }) {
|
||||
return (
|
||||
<div className="flex w-full flex-col rounded-lg border-2 border-highlight-primary bg-primary-700 p-4 shadow-md">
|
||||
<p className="font-bold">{title}</p>
|
||||
<p className="text-lg">{data}</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
214
ui/CardTable.tsx
214
ui/CardTable.tsx
|
|
@ -1,8 +1,10 @@
|
|||
import AppLink from './AppLink';
|
||||
|
||||
export default function CardTable() {
|
||||
return (
|
||||
<div className="relative w-full overflow-x-auto border-2 border-dark/60 bg-dark shadow-md sm:rounded-lg">
|
||||
<table className="w-full text-left text-sm text-gray-500 dark:text-gray-400 ">
|
||||
<thead className="z-1 sticky top-0 bg-light-dark text-xs uppercase text-white">
|
||||
<div className="relative w-full overflow-x-auto border-2 border-highlight-primary bg-primary-700 shadow-md sm:rounded-lg">
|
||||
<table className="w-full text-left text-sm text-muted ">
|
||||
<thead className="z-1 sticky top-0 bg-primary-600 text-xs uppercase text-white">
|
||||
<tr>
|
||||
<th scope="col" className="px-6 py-3">
|
||||
Exercice
|
||||
|
|
@ -22,164 +24,212 @@ export default function CardTable() {
|
|||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr className=" border-b bg-dark hover:bg-gray-50 dark:border-gray-700 dark:hover:bg-gray-600">
|
||||
<th
|
||||
scope="row"
|
||||
className="whitespace-nowrap px-6 py-4 font-medium text-gray-900 dark:text-white"
|
||||
>
|
||||
<tr className="bg-primary-700 hover:bg-primary-800 ">
|
||||
<th scope="row" className="whitespace-nowrap px-6 py-4 font-medium text-white">
|
||||
Exercice 1
|
||||
</th>
|
||||
<td className="px-6 py-4">30</td>
|
||||
<td className="px-6 py-4">300</td>
|
||||
<td className="px-6 py-4">10/10/2010</td>
|
||||
<td className="px-6 py-4 text-right">
|
||||
<a href="#" className="font-medium text-blue-600 hover:underline dark:text-blue-500">
|
||||
<AppLink
|
||||
href="dashboard/puzzles/1"
|
||||
className="font-medium text-brand hover:underline"
|
||||
>
|
||||
Reprendre
|
||||
</a>
|
||||
</AppLink>
|
||||
</td>
|
||||
</tr>
|
||||
<tr className="border-b bg-dark hover:bg-gray-50 dark:border-gray-700 dark:hover:bg-gray-600">
|
||||
<th
|
||||
scope="row"
|
||||
className="whitespace-nowrap px-6 py-4 font-medium text-gray-900 dark:text-white"
|
||||
>
|
||||
<tr className="bg-primary-700 hover:bg-primary-800 ">
|
||||
<th scope="row" className="whitespace-nowrap px-6 py-4 font-medium text-white">
|
||||
Exercice 1
|
||||
</th>
|
||||
<td className="px-6 py-4">40</td>
|
||||
<td className="px-6 py-4">30</td>
|
||||
<td className="px-6 py-4">300</td>
|
||||
<td className="px-6 py-4">10/10/2010</td>
|
||||
<td className="px-6 py-4 text-right">
|
||||
<a href="#" className="font-medium text-blue-600 hover:underline dark:text-blue-500">
|
||||
<AppLink
|
||||
href="dashboard/puzzles/1"
|
||||
className="font-medium text-brand hover:underline"
|
||||
>
|
||||
Reprendre
|
||||
</a>
|
||||
</AppLink>
|
||||
</td>
|
||||
</tr>
|
||||
<tr className="bg-dark hover:bg-gray-50 dark:hover:bg-gray-600">
|
||||
<th
|
||||
scope="row"
|
||||
className="whitespace-nowrap px-6 py-4 font-medium text-gray-900 dark:text-white"
|
||||
>
|
||||
<tr className="bg-primary-700 hover:bg-primary-800 ">
|
||||
<th scope="row" className="whitespace-nowrap px-6 py-4 font-medium text-white">
|
||||
Exercice 1
|
||||
</th>
|
||||
<td className="px-6 py-4">60</td>
|
||||
<td className="px-6 py-4">30</td>
|
||||
<td className="px-6 py-4">300</td>
|
||||
<td className="px-6 py-4">10/10/2010</td>
|
||||
<td className="px-6 py-4 text-right">
|
||||
<a href="#" className="font-medium text-blue-600 hover:underline dark:text-blue-500">
|
||||
<AppLink
|
||||
href="dashboard/puzzles/1"
|
||||
className="font-medium text-brand hover:underline"
|
||||
>
|
||||
Reprendre
|
||||
</a>
|
||||
</AppLink>
|
||||
</td>
|
||||
</tr>
|
||||
<tr className="bg-dark hover:bg-gray-50 dark:hover:bg-gray-600">
|
||||
<th
|
||||
scope="row"
|
||||
className="whitespace-nowrap px-6 py-4 font-medium text-gray-900 dark:text-white"
|
||||
>
|
||||
<tr className="bg-primary-700 hover:bg-primary-800 ">
|
||||
<th scope="row" className="whitespace-nowrap px-6 py-4 font-medium text-white">
|
||||
Exercice 1
|
||||
</th>
|
||||
<td className="px-6 py-4">60</td>
|
||||
<td className="px-6 py-4">30</td>
|
||||
<td className="px-6 py-4">300</td>
|
||||
<td className="px-6 py-4">10/10/2010</td>
|
||||
<td className="px-6 py-4 text-right">
|
||||
<a href="#" className="font-medium text-blue-600 hover:underline dark:text-blue-500">
|
||||
<AppLink
|
||||
href="dashboard/puzzles/1"
|
||||
className="font-medium text-brand hover:underline"
|
||||
>
|
||||
Reprendre
|
||||
</a>
|
||||
</AppLink>
|
||||
</td>
|
||||
</tr>
|
||||
<tr className="bg-dark hover:bg-gray-50 dark:hover:bg-gray-600">
|
||||
<th
|
||||
scope="row"
|
||||
className="whitespace-nowrap px-6 py-4 font-medium text-gray-900 dark:text-white"
|
||||
>
|
||||
<tr className="bg-primary-700 hover:bg-primary-800 ">
|
||||
<th scope="row" className="whitespace-nowrap px-6 py-4 font-medium text-white">
|
||||
Exercice 1
|
||||
</th>
|
||||
<td className="px-6 py-4">60</td>
|
||||
<td className="px-6 py-4">30</td>
|
||||
<td className="px-6 py-4">300</td>
|
||||
<td className="px-6 py-4">10/10/2010</td>
|
||||
<td className="px-6 py-4 text-right">
|
||||
<a href="#" className="font-medium text-blue-600 hover:underline dark:text-blue-500">
|
||||
<AppLink
|
||||
href="dashboard/puzzles/1"
|
||||
className="font-medium text-brand hover:underline"
|
||||
>
|
||||
Reprendre
|
||||
</a>
|
||||
</AppLink>
|
||||
</td>
|
||||
</tr>
|
||||
<tr className="bg-dark hover:bg-gray-50 dark:hover:bg-gray-600">
|
||||
<th
|
||||
scope="row"
|
||||
className="whitespace-nowrap px-6 py-4 font-medium text-gray-900 dark:text-white"
|
||||
>
|
||||
<tr className="bg-primary-700 hover:bg-primary-800 ">
|
||||
<th scope="row" className="whitespace-nowrap px-6 py-4 font-medium text-white">
|
||||
Exercice 1
|
||||
</th>
|
||||
<td className="px-6 py-4">60</td>
|
||||
<td className="px-6 py-4">30</td>
|
||||
<td className="px-6 py-4">300</td>
|
||||
<td className="px-6 py-4">10/10/2010</td>
|
||||
<td className="px-6 py-4 text-right">
|
||||
<a href="#" className="font-medium text-blue-600 hover:underline dark:text-blue-500">
|
||||
<AppLink
|
||||
href="dashboard/puzzles/1"
|
||||
className="font-medium text-brand hover:underline"
|
||||
>
|
||||
Reprendre
|
||||
</a>
|
||||
</AppLink>
|
||||
</td>
|
||||
</tr>
|
||||
<tr className="bg-dark hover:bg-gray-50 dark:hover:bg-gray-600">
|
||||
<th
|
||||
scope="row"
|
||||
className="whitespace-nowrap px-6 py-4 font-medium text-gray-900 dark:text-white"
|
||||
>
|
||||
<tr className="bg-primary-700 hover:bg-primary-800 ">
|
||||
<th scope="row" className="whitespace-nowrap px-6 py-4 font-medium text-white">
|
||||
Exercice 1
|
||||
</th>
|
||||
<td className="px-6 py-4">60</td>
|
||||
<td className="px-6 py-4">30</td>
|
||||
<td className="px-6 py-4">300</td>
|
||||
<td className="px-6 py-4">10/10/2010</td>
|
||||
<td className="px-6 py-4 text-right">
|
||||
<a href="#" className="font-medium text-blue-600 hover:underline dark:text-blue-500">
|
||||
<AppLink
|
||||
href="dashboard/puzzles/1"
|
||||
className="font-medium text-brand hover:underline"
|
||||
>
|
||||
Reprendre
|
||||
</a>
|
||||
</AppLink>
|
||||
</td>
|
||||
</tr>
|
||||
<tr className="bg-dark hover:bg-gray-50 dark:hover:bg-gray-600">
|
||||
<th
|
||||
scope="row"
|
||||
className="whitespace-nowrap px-6 py-4 font-medium text-gray-900 dark:text-white"
|
||||
>
|
||||
<tr className="bg-primary-700 hover:bg-primary-800 ">
|
||||
<th scope="row" className="whitespace-nowrap px-6 py-4 font-medium text-white">
|
||||
Exercice 1
|
||||
</th>
|
||||
<td className="px-6 py-4">60</td>
|
||||
<td className="px-6 py-4">30</td>
|
||||
<td className="px-6 py-4">300</td>
|
||||
<td className="px-6 py-4">10/10/2010</td>
|
||||
<td className="px-6 py-4 text-right">
|
||||
<a href="#" className="font-medium text-blue-600 hover:underline dark:text-blue-500">
|
||||
<AppLink
|
||||
href="dashboard/puzzles/1"
|
||||
className="font-medium text-brand hover:underline"
|
||||
>
|
||||
Reprendre
|
||||
</a>
|
||||
</AppLink>
|
||||
</td>
|
||||
</tr>
|
||||
<tr className="bg-dark hover:bg-gray-50 dark:hover:bg-gray-600">
|
||||
<th
|
||||
scope="row"
|
||||
className="whitespace-nowrap px-6 py-4 font-medium text-gray-900 dark:text-white"
|
||||
>
|
||||
<tr className="bg-primary-700 hover:bg-primary-800 ">
|
||||
<th scope="row" className="whitespace-nowrap px-6 py-4 font-medium text-white">
|
||||
Exercice 1
|
||||
</th>
|
||||
<td className="px-6 py-4">60</td>
|
||||
<td className="px-6 py-4">30</td>
|
||||
<td className="px-6 py-4">300</td>
|
||||
<td className="px-6 py-4">10/10/2010</td>
|
||||
<td className="px-6 py-4 text-right">
|
||||
<a href="#" className="font-medium text-blue-600 hover:underline dark:text-blue-500">
|
||||
<AppLink
|
||||
href="dashboard/puzzles/1"
|
||||
className="font-medium text-brand hover:underline"
|
||||
>
|
||||
Reprendre
|
||||
</a>
|
||||
</AppLink>
|
||||
</td>
|
||||
</tr>
|
||||
<tr className="bg-dark hover:bg-gray-50 dark:hover:bg-gray-600">
|
||||
<th
|
||||
scope="row"
|
||||
className="whitespace-nowrap px-6 py-4 font-medium text-gray-900 dark:text-white"
|
||||
>
|
||||
<tr className="bg-primary-700 hover:bg-primary-800 ">
|
||||
<th scope="row" className="whitespace-nowrap px-6 py-4 font-medium text-white">
|
||||
Exercice 1
|
||||
</th>
|
||||
<td className="px-6 py-4">60</td>
|
||||
<td className="px-6 py-4">30</td>
|
||||
<td className="px-6 py-4">300</td>
|
||||
<td className="px-6 py-4">10/10/2010</td>
|
||||
<td className="px-6 py-4 text-right">
|
||||
<a href="#" className="font-medium text-blue-600 hover:underline dark:text-blue-500">
|
||||
<AppLink
|
||||
href="dashboard/puzzles/1"
|
||||
className="font-medium text-brand hover:underline"
|
||||
>
|
||||
Reprendre
|
||||
</a>
|
||||
</AppLink>
|
||||
</td>
|
||||
</tr>
|
||||
<tr className="bg-primary-700 hover:bg-primary-800 ">
|
||||
<th scope="row" className="whitespace-nowrap px-6 py-4 font-medium text-white">
|
||||
Exercice 1
|
||||
</th>
|
||||
<td className="px-6 py-4">30</td>
|
||||
<td className="px-6 py-4">300</td>
|
||||
<td className="px-6 py-4">10/10/2010</td>
|
||||
<td className="px-6 py-4 text-right">
|
||||
<AppLink
|
||||
href="dashboard/puzzles/1"
|
||||
className="font-medium text-brand hover:underline"
|
||||
>
|
||||
Reprendre
|
||||
</AppLink>
|
||||
</td>
|
||||
</tr>
|
||||
<tr className="bg-primary-700 hover:bg-primary-800 ">
|
||||
<th scope="row" className="whitespace-nowrap px-6 py-4 font-medium text-white">
|
||||
Exercice 1
|
||||
</th>
|
||||
<td className="px-6 py-4">30</td>
|
||||
<td className="px-6 py-4">300</td>
|
||||
<td className="px-6 py-4">10/10/2010</td>
|
||||
<td className="px-6 py-4 text-right">
|
||||
<AppLink
|
||||
href="dashboard/puzzles/1"
|
||||
className="font-medium text-brand hover:underline"
|
||||
>
|
||||
Reprendre
|
||||
</AppLink>
|
||||
</td>
|
||||
</tr>
|
||||
<tr className="bg-primary-700 hover:bg-primary-800 ">
|
||||
<th scope="row" className="whitespace-nowrap px-6 py-4 font-medium text-white">
|
||||
Exercice 1
|
||||
</th>
|
||||
<td className="px-6 py-4">30</td>
|
||||
<td className="px-6 py-4">300</td>
|
||||
<td className="px-6 py-4">10/10/2010</td>
|
||||
<td className="px-6 py-4 text-right">
|
||||
<AppLink
|
||||
href="dashboard/puzzles/1"
|
||||
className="font-medium text-brand hover:underline"
|
||||
>
|
||||
Reprendre
|
||||
</AppLink>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@ export default function Usernav({ isOpen, toggle }: { isOpen: boolean; toggle: (
|
|||
};
|
||||
|
||||
return (
|
||||
<div className="z-50 flex flex-row items-center justify-between border-b border-solid border-highlight-primary bg-secondary py-4 px-8">
|
||||
<div className="z-50 flex w-full flex-row items-center justify-between border-b border-solid border-highlight-primary bg-secondary py-4 px-8">
|
||||
<div className="flex flex-row items-center space-x-2 sm:space-x-0">
|
||||
<div className="flex items-center">
|
||||
<button onClick={toggle} className="block sm:hidden">
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue