From da139e88e7fe9f75b7223112a084de47044ac9c6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Th=C3=A9o?= <43091603+glazk0@users.noreply.github.com>
Date: Sun, 12 Feb 2023 19:09:03 +0100
Subject: [PATCH] Update card & dashboard

---
 .vscode/settings.json          |   2 +-
 app/dashboard/layout.tsx       |   2 +-
 app/dashboard/page.tsx         |  45 +++----
 app/dashboard/puzzles/page.tsx |   1 -
 ui/Card.tsx                    |  20 ++-
 ui/CardTable.tsx               | 214 ++++++++++++++++++++-------------
 ui/dashboard/Usernav.tsx       |   2 +-
 7 files changed, 163 insertions(+), 123 deletions(-)

diff --git a/.vscode/settings.json b/.vscode/settings.json
index 58ff454..0e16096 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -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
 }
\ No newline at end of file
diff --git a/app/dashboard/layout.tsx b/app/dashboard/layout.tsx
index d132f03..7dd6000 100644
--- a/app/dashboard/layout.tsx
+++ b/app/dashboard/layout.tsx
@@ -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>
   );
diff --git a/app/dashboard/page.tsx b/app/dashboard/page.tsx
index 24c87de..1a82c6f 100644
--- a/app/dashboard/page.tsx
+++ b/app/dashboard/page.tsx
@@ -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&apos;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>
diff --git a/app/dashboard/puzzles/page.tsx b/app/dashboard/puzzles/page.tsx
index ac633e1..c27bfda 100644
--- a/app/dashboard/puzzles/page.tsx
+++ b/app/dashboard/puzzles/page.tsx
@@ -1,5 +1,4 @@
 import Puzzles from '@/ui/Puzzles';
-import SWRFallback from '@/ui/SWRFallback';
 
 export default async function Page() {
   // const puzzles = await getPuzzles();
diff --git a/ui/Card.tsx b/ui/Card.tsx
index 9be6e5c..6a95ad7 100644
--- a/ui/Card.tsx
+++ b/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>
-    );
-  }
\ No newline at end of file
+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>
+  );
+}
diff --git a/ui/CardTable.tsx b/ui/CardTable.tsx
index 81194cf..9de85b7 100644
--- a/ui/CardTable.tsx
+++ b/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>
diff --git a/ui/dashboard/Usernav.tsx b/ui/dashboard/Usernav.tsx
index 6a245ea..b38ae02 100644
--- a/ui/dashboard/Usernav.tsx
+++ b/ui/dashboard/Usernav.tsx
@@ -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">