Format
This commit is contained in:
Théo
parent
5811cafb2b
commit
85ac0a6b19
2 changed files with 195 additions and 212 deletions
|
|
@ -6,17 +6,17 @@ export default function Page() {
|
||||||
<div className="flex h-screen w-full">
|
<div className="flex h-screen w-full">
|
||||||
<div className="">
|
<div className="">
|
||||||
<h1 className="text-2xl font-bold tracking-tight">Statistique</h1>
|
<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">
|
<div className="flex flex-col space-x-0 pt-5 md:flex-row md:space-x-9">
|
||||||
<Card />
|
<Card />
|
||||||
<Card />
|
<Card />
|
||||||
<Card />
|
<Card />
|
||||||
</div>
|
</div>
|
||||||
<div className="flex flex-col space-x-0 md:flex-row md:space-x-[5%] pt-5 h-[60%]">
|
<div className="flex h-[60%] flex-col space-x-0 pt-5 md:flex-row md:space-x-[5%]">
|
||||||
<div className='w-6/12 mb-9'>
|
<div className="mb-9 w-6/12">
|
||||||
<h1 className="text-2xl font-bold tracking-tight">Guide</h1>
|
<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="flex h-full flex-col space-x-0 pt-5 md:flex-row md:space-x-[10%] ">
|
||||||
<div className="bg-dark rounded-lg shadow-md w-full h-full">
|
<div className="h-full w-full rounded-lg bg-dark shadow-md">
|
||||||
<div className="flex py-2 px-4 rounded-lg justify-between">
|
<div className="flex justify-between rounded-lg py-2 px-4">
|
||||||
<div className="my-auto">
|
<div className="my-auto">
|
||||||
<p className="font-bold">Bold data</p>
|
<p className="font-bold">Bold data</p>
|
||||||
<p className="text-lg">Simple data</p>
|
<p className="text-lg">Simple data</p>
|
||||||
|
|
@ -25,9 +25,9 @@ export default function Page() {
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className='w-6/12 mb-9'>
|
<div className="mb-9 w-6/12">
|
||||||
<h1 className="text-2xl font-bold tracking-tight">Dernières activités </h1>
|
<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">
|
<div className="flex h-full flex-col space-x-0 pt-5 md:flex-row md:space-x-[10%]">
|
||||||
<CardTable />
|
<CardTable />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -36,7 +36,3 @@ export default function Page() {
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
387
ui/CardTable.tsx
387
ui/CardTable.tsx
|
|
@ -1,202 +1,189 @@
|
||||||
export default function CardTable() {
|
export default function CardTable() {
|
||||||
|
return (
|
||||||
return (
|
<div className="relative w-full overflow-x-auto border-2 border-dark/60 bg-dark shadow-md sm:rounded-lg">
|
||||||
<div className="relative overflow-x-auto shadow-md sm:rounded-lg bg-dark border border-black w-full">
|
<table className="w-full text-left text-sm text-gray-500 dark:text-gray-400 ">
|
||||||
<table className="w-full text-sm text-left text-gray-500 dark:text-gray-400 ">
|
<thead className="z-1 sticky top-0 bg-light-dark text-xs uppercase text-white">
|
||||||
<thead className="text-xs text-white uppercase bg-light-dark sticky sticky z-1 top-0">
|
<tr>
|
||||||
<tr>
|
<th scope="col" className="px-6 py-3">
|
||||||
<th scope="col" className="px-6 py-3">
|
Exercice
|
||||||
Exercice
|
</th>
|
||||||
</th>
|
<th scope="col" className="px-6 py-3">
|
||||||
<th scope="col" className="px-6 py-3">
|
Tentative
|
||||||
Tentative
|
</th>
|
||||||
</th>
|
<th scope="col" className="px-6 py-3">
|
||||||
<th scope="col" className="px-6 py-3">
|
Score
|
||||||
Score
|
</th>
|
||||||
</th>
|
<th scope="col" className="px-6 py-3">
|
||||||
<th scope="col" className="px-6 py-3">
|
Dernier essai
|
||||||
Dernier essai
|
</th>
|
||||||
</th>
|
<th scope="col" className="px-6 py-3">
|
||||||
<th scope="col" className="px-6 py-3">
|
<span className="sr-only">Reprendre</span>
|
||||||
<span className="sr-only">Reprendre</span>
|
</th>
|
||||||
</th>
|
</tr>
|
||||||
</tr>
|
</thead>
|
||||||
</thead>
|
<tbody>
|
||||||
<tbody>
|
<tr className=" border-b bg-dark hover:bg-gray-50 dark:border-gray-700 dark:hover:bg-gray-600">
|
||||||
<tr className=" border-b bg-dark dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
|
<th
|
||||||
<th scope="row" className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
|
scope="row"
|
||||||
Exercice 1
|
className="whitespace-nowrap px-6 py-4 font-medium text-gray-900 dark:text-white"
|
||||||
</th>
|
>
|
||||||
<td className="px-6 py-4">
|
Exercice 1
|
||||||
30
|
</th>
|
||||||
</td>
|
<td className="px-6 py-4">30</td>
|
||||||
<td className="px-6 py-4">
|
<td className="px-6 py-4">300</td>
|
||||||
300
|
<td className="px-6 py-4">10/10/2010</td>
|
||||||
</td>
|
<td className="px-6 py-4 text-right">
|
||||||
<td className="px-6 py-4">
|
<a href="#" className="font-medium text-blue-600 hover:underline dark:text-blue-500">
|
||||||
10/10/2010
|
Reprendre
|
||||||
</td>
|
</a>
|
||||||
<td className="px-6 py-4 text-right">
|
</td>
|
||||||
<a href="#" className="font-medium text-blue-600 dark:text-blue-500 hover:underline">Reprendre</a>
|
</tr>
|
||||||
</td>
|
<tr className="border-b bg-dark hover:bg-gray-50 dark:border-gray-700 dark:hover:bg-gray-600">
|
||||||
</tr>
|
<th
|
||||||
<tr className="bg-dark border-b dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
|
scope="row"
|
||||||
<th scope="row" className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
|
className="whitespace-nowrap px-6 py-4 font-medium text-gray-900 dark:text-white"
|
||||||
Exercice 1
|
>
|
||||||
</th>
|
Exercice 1
|
||||||
<td className="px-6 py-4">
|
</th>
|
||||||
40
|
<td className="px-6 py-4">40</td>
|
||||||
</td>
|
<td className="px-6 py-4">300</td>
|
||||||
<td className="px-6 py-4">
|
<td className="px-6 py-4">10/10/2010</td>
|
||||||
300
|
<td className="px-6 py-4 text-right">
|
||||||
</td>
|
<a href="#" className="font-medium text-blue-600 hover:underline dark:text-blue-500">
|
||||||
<td className="px-6 py-4">
|
Reprendre
|
||||||
10/10/2010
|
</a>
|
||||||
</td>
|
</td>
|
||||||
<td className="px-6 py-4 text-right">
|
</tr>
|
||||||
<a href="#" className="font-medium text-blue-600 dark:text-blue-500 hover:underline">Reprendre</a>
|
<tr className="bg-dark hover:bg-gray-50 dark:hover:bg-gray-600">
|
||||||
</td>
|
<th
|
||||||
</tr>
|
scope="row"
|
||||||
<tr className="bg-dark hover:bg-gray-50 dark:hover:bg-gray-600">
|
className="whitespace-nowrap px-6 py-4 font-medium text-gray-900 dark:text-white"
|
||||||
<th scope="row" className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
|
>
|
||||||
Exercice 1
|
Exercice 1
|
||||||
</th>
|
</th>
|
||||||
<td className="px-6 py-4">
|
<td className="px-6 py-4">60</td>
|
||||||
60
|
<td className="px-6 py-4">300</td>
|
||||||
</td>
|
<td className="px-6 py-4">10/10/2010</td>
|
||||||
<td className="px-6 py-4">
|
<td className="px-6 py-4 text-right">
|
||||||
300
|
<a href="#" className="font-medium text-blue-600 hover:underline dark:text-blue-500">
|
||||||
</td>
|
Reprendre
|
||||||
<td className="px-6 py-4">
|
</a>
|
||||||
10/10/2010
|
</td>
|
||||||
</td>
|
</tr>
|
||||||
<td className="px-6 py-4 text-right">
|
<tr className="bg-dark hover:bg-gray-50 dark:hover:bg-gray-600">
|
||||||
<a href="#" className="font-medium text-blue-600 dark:text-blue-500 hover:underline">Reprendre</a>
|
<th
|
||||||
</td>
|
scope="row"
|
||||||
</tr>
|
className="whitespace-nowrap px-6 py-4 font-medium text-gray-900 dark:text-white"
|
||||||
<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
|
||||||
Exercice 1
|
</th>
|
||||||
</th>
|
<td className="px-6 py-4">60</td>
|
||||||
<td className="px-6 py-4">
|
<td className="px-6 py-4">300</td>
|
||||||
60
|
<td className="px-6 py-4">10/10/2010</td>
|
||||||
</td>
|
<td className="px-6 py-4 text-right">
|
||||||
<td className="px-6 py-4">
|
<a href="#" className="font-medium text-blue-600 hover:underline dark:text-blue-500">
|
||||||
300
|
Reprendre
|
||||||
</td>
|
</a>
|
||||||
<td className="px-6 py-4">
|
</td>
|
||||||
10/10/2010
|
</tr>
|
||||||
</td>
|
<tr className="bg-dark hover:bg-gray-50 dark:hover:bg-gray-600">
|
||||||
<td className="px-6 py-4 text-right">
|
<th
|
||||||
<a href="#" className="font-medium text-blue-600 dark:text-blue-500 hover:underline">Reprendre</a>
|
scope="row"
|
||||||
</td>
|
className="whitespace-nowrap px-6 py-4 font-medium text-gray-900 dark:text-white"
|
||||||
</tr>
|
>
|
||||||
<tr className="bg-dark hover:bg-gray-50 dark:hover:bg-gray-600">
|
Exercice 1
|
||||||
<th scope="row" className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
|
</th>
|
||||||
Exercice 1
|
<td className="px-6 py-4">60</td>
|
||||||
</th>
|
<td className="px-6 py-4">300</td>
|
||||||
<td className="px-6 py-4">
|
<td className="px-6 py-4">10/10/2010</td>
|
||||||
60
|
<td className="px-6 py-4 text-right">
|
||||||
</td>
|
<a href="#" className="font-medium text-blue-600 hover:underline dark:text-blue-500">
|
||||||
<td className="px-6 py-4">
|
Reprendre
|
||||||
300
|
</a>
|
||||||
</td>
|
</td>
|
||||||
<td className="px-6 py-4">
|
</tr>
|
||||||
10/10/2010
|
<tr className="bg-dark hover:bg-gray-50 dark:hover:bg-gray-600">
|
||||||
</td>
|
<th
|
||||||
<td className="px-6 py-4 text-right">
|
scope="row"
|
||||||
<a href="#" className="font-medium text-blue-600 dark:text-blue-500 hover:underline">Reprendre</a>
|
className="whitespace-nowrap px-6 py-4 font-medium text-gray-900 dark:text-white"
|
||||||
</td>
|
>
|
||||||
</tr>
|
Exercice 1
|
||||||
<tr className="bg-dark hover:bg-gray-50 dark:hover:bg-gray-600">
|
</th>
|
||||||
<th scope="row" className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
|
<td className="px-6 py-4">60</td>
|
||||||
Exercice 1
|
<td className="px-6 py-4">300</td>
|
||||||
</th>
|
<td className="px-6 py-4">10/10/2010</td>
|
||||||
<td className="px-6 py-4">
|
<td className="px-6 py-4 text-right">
|
||||||
60
|
<a href="#" className="font-medium text-blue-600 hover:underline dark:text-blue-500">
|
||||||
</td>
|
Reprendre
|
||||||
<td className="px-6 py-4">
|
</a>
|
||||||
300
|
</td>
|
||||||
</td>
|
</tr>
|
||||||
<td className="px-6 py-4">
|
<tr className="bg-dark hover:bg-gray-50 dark:hover:bg-gray-600">
|
||||||
10/10/2010
|
<th
|
||||||
</td>
|
scope="row"
|
||||||
<td className="px-6 py-4 text-right">
|
className="whitespace-nowrap px-6 py-4 font-medium text-gray-900 dark:text-white"
|
||||||
<a href="#" className="font-medium text-blue-600 dark:text-blue-500 hover:underline">Reprendre</a>
|
>
|
||||||
</td>
|
Exercice 1
|
||||||
</tr>
|
</th>
|
||||||
<tr className="bg-dark hover:bg-gray-50 dark:hover:bg-gray-600">
|
<td className="px-6 py-4">60</td>
|
||||||
<th scope="row" className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
|
<td className="px-6 py-4">300</td>
|
||||||
Exercice 1
|
<td className="px-6 py-4">10/10/2010</td>
|
||||||
</th>
|
<td className="px-6 py-4 text-right">
|
||||||
<td className="px-6 py-4">
|
<a href="#" className="font-medium text-blue-600 hover:underline dark:text-blue-500">
|
||||||
60
|
Reprendre
|
||||||
</td>
|
</a>
|
||||||
<td className="px-6 py-4">
|
</td>
|
||||||
300
|
</tr>
|
||||||
</td>
|
<tr className="bg-dark hover:bg-gray-50 dark:hover:bg-gray-600">
|
||||||
<td className="px-6 py-4">
|
<th
|
||||||
10/10/2010
|
scope="row"
|
||||||
</td>
|
className="whitespace-nowrap px-6 py-4 font-medium text-gray-900 dark:text-white"
|
||||||
<td className="px-6 py-4 text-right">
|
>
|
||||||
<a href="#" className="font-medium text-blue-600 dark:text-blue-500 hover:underline">Reprendre</a>
|
Exercice 1
|
||||||
</td>
|
</th>
|
||||||
</tr>
|
<td className="px-6 py-4">60</td>
|
||||||
<tr className="bg-dark hover:bg-gray-50 dark:hover:bg-gray-600">
|
<td className="px-6 py-4">300</td>
|
||||||
<th scope="row" className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
|
<td className="px-6 py-4">10/10/2010</td>
|
||||||
Exercice 1
|
<td className="px-6 py-4 text-right">
|
||||||
</th>
|
<a href="#" className="font-medium text-blue-600 hover:underline dark:text-blue-500">
|
||||||
<td className="px-6 py-4">
|
Reprendre
|
||||||
60
|
</a>
|
||||||
</td>
|
</td>
|
||||||
<td className="px-6 py-4">
|
</tr>
|
||||||
300
|
<tr className="bg-dark hover:bg-gray-50 dark:hover:bg-gray-600">
|
||||||
</td>
|
<th
|
||||||
<td className="px-6 py-4">
|
scope="row"
|
||||||
10/10/2010
|
className="whitespace-nowrap px-6 py-4 font-medium text-gray-900 dark:text-white"
|
||||||
</td>
|
>
|
||||||
<td className="px-6 py-4 text-right">
|
Exercice 1
|
||||||
<a href="#" className="font-medium text-blue-600 dark:text-blue-500 hover:underline">Reprendre</a>
|
</th>
|
||||||
</td>
|
<td className="px-6 py-4">60</td>
|
||||||
</tr>
|
<td className="px-6 py-4">300</td>
|
||||||
<tr className="bg-dark hover:bg-gray-50 dark:hover:bg-gray-600">
|
<td className="px-6 py-4">10/10/2010</td>
|
||||||
<th scope="row" className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
|
<td className="px-6 py-4 text-right">
|
||||||
Exercice 1
|
<a href="#" className="font-medium text-blue-600 hover:underline dark:text-blue-500">
|
||||||
</th>
|
Reprendre
|
||||||
<td className="px-6 py-4">
|
</a>
|
||||||
60
|
</td>
|
||||||
</td>
|
</tr>
|
||||||
<td className="px-6 py-4">
|
<tr className="bg-dark hover:bg-gray-50 dark:hover:bg-gray-600">
|
||||||
300
|
<th
|
||||||
</td>
|
scope="row"
|
||||||
<td className="px-6 py-4">
|
className="whitespace-nowrap px-6 py-4 font-medium text-gray-900 dark:text-white"
|
||||||
10/10/2010
|
>
|
||||||
</td>
|
Exercice 1
|
||||||
<td className="px-6 py-4 text-right">
|
</th>
|
||||||
<a href="#" className="font-medium text-blue-600 dark:text-blue-500 hover:underline">Reprendre</a>
|
<td className="px-6 py-4">60</td>
|
||||||
</td>
|
<td className="px-6 py-4">300</td>
|
||||||
</tr>
|
<td className="px-6 py-4">10/10/2010</td>
|
||||||
<tr className="bg-dark hover:bg-gray-50 dark:hover:bg-gray-600">
|
<td className="px-6 py-4 text-right">
|
||||||
<th scope="row" className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
|
<a href="#" className="font-medium text-blue-600 hover:underline dark:text-blue-500">
|
||||||
Exercice 1
|
Reprendre
|
||||||
</th>
|
</a>
|
||||||
<td className="px-6 py-4">
|
</td>
|
||||||
60
|
</tr>
|
||||||
</td>
|
</tbody>
|
||||||
<td className="px-6 py-4">
|
</table>
|
||||||
300
|
</div>
|
||||||
</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