dashboard-home-page
Création de la page accueille du dashboard
This commit is contained in:
Nicolas VINCENT
parent
18d1d82659
commit
1d4a6f64f1
4 changed files with 251 additions and 7 deletions
4
.vscode/settings.json
vendored
4
.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
|
||||
}
|
||||
}
|
||||
|
|
@ -1,12 +1,42 @@
|
|||
import Card from '@/ui/Card';
|
||||
import CardTable from '@/ui/CardTable';
|
||||
|
||||
export default function Page() {
|
||||
return (
|
||||
<div className="flex h-screen w-full">
|
||||
<div className="m-auto">
|
||||
<h1 className="text-center text-4xl font-bold">
|
||||
Amuse toi avec <span className="rounded-md bg-white p-1 text-black ">Next.js</span> et{' '}
|
||||
<span className="text-blue-500">Tailwindcss</span> !
|
||||
</h1>
|
||||
<div className="">
|
||||
<h1 className="text-2xl font-bold tracking-tight">Statistique</h1>
|
||||
<div className="flex flex-col space-x-0 md:flex-row md:space-x-9 pt-5">
|
||||
<Card></Card>
|
||||
<Card></Card>
|
||||
<Card></Card>
|
||||
</div>
|
||||
<div className="flex flex-col space-x-0 md:flex-row md:space-x-[5%] pt-5 h-[60%]">
|
||||
<div className='w-6/12 mb-9'>
|
||||
<h1 className="text-2xl font-bold tracking-tight">Guide</h1>
|
||||
<div className="flex flex-col space-x-0 md:flex-row md:space-x-[10%] pt-5 h-full ">
|
||||
<div className="bg-dark rounded-lg shadow-md w-full h-full">
|
||||
<div className="flex 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>
|
||||
</div>
|
||||
</div>
|
||||
<div className='w-6/12 mb-9'>
|
||||
<h1 className="text-2xl font-bold tracking-tight">Dernières activités </h1>
|
||||
<div className="flex flex-col space-x-0 md:flex-row md:space-x-[10%] pt-5 h-full">
|
||||
<CardTable></CardTable>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
12
ui/Card.tsx
Normal file
12
ui/Card.tsx
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
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>
|
||||
);
|
||||
}
|
||||
202
ui/CardTable.tsx
Normal file
202
ui/CardTable.tsx
Normal file
|
|
@ -0,0 +1,202 @@
|
|||
export default function CardTable() {
|
||||
|
||||
return (
|
||||
<div className="relative overflow-x-auto shadow-md sm:rounded-lg bg-dark border border-black w-full">
|
||||
<table className="w-full text-sm text-left text-gray-500 dark:text-gray-400 ">
|
||||
<thead className="text-xs text-white uppercase bg-light-dark sticky sticky z-1 top-0">
|
||||
<tr>
|
||||
<th scope="col" className="px-6 py-3">
|
||||
Exercice
|
||||
</th>
|
||||
<th scope="col" className="px-6 py-3">
|
||||
Tentative
|
||||
</th>
|
||||
<th scope="col" className="px-6 py-3">
|
||||
Score
|
||||
</th>
|
||||
<th scope="col" className="px-6 py-3">
|
||||
Dernier essai
|
||||
</th>
|
||||
<th scope="col" className="px-6 py-3">
|
||||
<span className="sr-only">Reprendre</span>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr className=" border-b bg-dark dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
|
||||
<th scope="row" className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark: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 dark:text-blue-500 hover:underline">Reprendre</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr className="bg-dark border-b dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
|
||||
<th scope="row" className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
|
||||
Exercice 1
|
||||
</th>
|
||||
<td className="px-6 py-4">
|
||||
40
|
||||
</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 dark:text-blue-500 hover:underline">Reprendre</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr className="bg-dark hover:bg-gray-50 dark:hover:bg-gray-600">
|
||||
<th scope="row" className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
|
||||
Exercice 1
|
||||
</th>
|
||||
<td className="px-6 py-4">
|
||||
60
|
||||
</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 dark:text-blue-500 hover:underline">Reprendre</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr className="bg-dark hover:bg-gray-50 dark:hover:bg-gray-600">
|
||||
<th scope="row" className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
|
||||
Exercice 1
|
||||
</th>
|
||||
<td className="px-6 py-4">
|
||||
60
|
||||
</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 dark:text-blue-500 hover:underline">Reprendre</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr className="bg-dark hover:bg-gray-50 dark:hover:bg-gray-600">
|
||||
<th scope="row" className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
|
||||
Exercice 1
|
||||
</th>
|
||||
<td className="px-6 py-4">
|
||||
60
|
||||
</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 dark:text-blue-500 hover:underline">Reprendre</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr className="bg-dark hover:bg-gray-50 dark:hover:bg-gray-600">
|
||||
<th scope="row" className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
|
||||
Exercice 1
|
||||
</th>
|
||||
<td className="px-6 py-4">
|
||||
60
|
||||
</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 dark:text-blue-500 hover:underline">Reprendre</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr className="bg-dark hover:bg-gray-50 dark:hover:bg-gray-600">
|
||||
<th scope="row" className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
|
||||
Exercice 1
|
||||
</th>
|
||||
<td className="px-6 py-4">
|
||||
60
|
||||
</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 dark:text-blue-500 hover:underline">Reprendre</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr className="bg-dark hover:bg-gray-50 dark:hover:bg-gray-600">
|
||||
<th scope="row" className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
|
||||
Exercice 1
|
||||
</th>
|
||||
<td className="px-6 py-4">
|
||||
60
|
||||
</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 dark:text-blue-500 hover:underline">Reprendre</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr className="bg-dark hover:bg-gray-50 dark:hover:bg-gray-600">
|
||||
<th scope="row" className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
|
||||
Exercice 1
|
||||
</th>
|
||||
<td className="px-6 py-4">
|
||||
60
|
||||
</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 dark:text-blue-500 hover:underline">Reprendre</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr className="bg-dark hover:bg-gray-50 dark:hover:bg-gray-600">
|
||||
<th scope="row" className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
|
||||
Exercice 1
|
||||
</th>
|
||||
<td className="px-6 py-4">
|
||||
60
|
||||
</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 dark:text-blue-500 hover:underline">Reprendre</a>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
);
|
||||
|
||||
}
|
||||
|
||||
Loading…
Add table
Reference in a new issue