peer-at-code-web/ui/CardTable.tsx
2023-02-10 17:26:05 +01:00

189 lines
7.3 KiB
TypeScript

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">
<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 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"
>
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">
Reprendre
</a>
</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"
>
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 hover:underline dark:text-blue-500">
Reprendre
</a>
</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"
>
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 hover:underline dark:text-blue-500">
Reprendre
</a>
</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"
>
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 hover:underline dark:text-blue-500">
Reprendre
</a>
</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"
>
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 hover:underline dark:text-blue-500">
Reprendre
</a>
</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"
>
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 hover:underline dark:text-blue-500">
Reprendre
</a>
</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"
>
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 hover:underline dark:text-blue-500">
Reprendre
</a>
</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"
>
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 hover:underline dark:text-blue-500">
Reprendre
</a>
</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"
>
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 hover:underline dark:text-blue-500">
Reprendre
</a>
</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"
>
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 hover:underline dark:text-blue-500">
Reprendre
</a>
</td>
</tr>
</tbody>
</table>
</div>
);
}