Updated ui

app/(auth)/layout.tsx

@@ -0,0 +1,11 @@
+import { type ReactNode } from 'react';
+
+export default function Layout({ children }: { children: ReactNode }) {
+  return (
+    <div className="flex h-screen w-full">
+      <div className="flex h-full w-full flex-col items-center justify-center space-y-4">
+        {children}
+      </div>
+    </div>
+  );
+}

app/(auth)/sign-in/page.tsx

@@ -1,15 +1,17 @@
 import AppLink from '@/ui/AppLink';
+import Icon from '@/ui/Icon';
+import UserAuthForm from '@/ui/UserAuthForm';
 
-export default function Home() {
+export default function Page() {
   return (
-    <div className="flex h-screen w-full">
+    <>
-      <div className="m-auto flex flex-col">
+      <div className="flex flex-col justify-start space-y-4">
-        <h1 className="text-center text-4xl font-bold">
+        <AppLink href="/">
-          Amuse toi avec <span className="rounded-md bg-white p-1 text-black ">Next.js</span> et{' '}
+          <Icon name="arrow-left-line" />
-          <span className="text-blue-500">Tailwindcss</span> !
+        </AppLink>
-        </h1>
+        <h2 className="mx-auto text-xl font-bold">Connexion</h2>
-        <AppLink href="/dashboard">Dashboard</AppLink>
+        <UserAuthForm />
       </div>
-    </div>
+    </>
   );
 }

app/(auth)/sign-up/page.tsx

@@ -1,15 +1,17 @@
 import AppLink from '@/ui/AppLink';
+import Icon from '@/ui/Icon';
+import UserAuthForm from '@/ui/UserAuthForm';
 
-export default function Home() {
+export default function Page() {
   return (
-    <div className="flex h-screen w-full">
+    <>
-      <div className="m-auto flex flex-col">
+      <div className="flex flex-col justify-start space-y-4">
-        <h1 className="text-center text-4xl font-bold">
+        <AppLink href="/">
-          Amuse toi avec <span className="rounded-md bg-white p-1 text-black ">Next.js</span> et{' '}
+          <Icon name="arrow-left-line" />
-          <span className="text-blue-500">Tailwindcss</span> !
+        </AppLink>
-        </h1>
+        <h2 className="mx-auto text-xl font-bold">Créer un compte</h2>
-        <AppLink href="/dashboard">Dashboard</AppLink>
+        <UserAuthForm />
       </div>
-    </div>
+    </>
   );
 }

app/dashboard/page.tsx

@@ -1,33 +1,64 @@
 import Card from '@/ui/Card';
-import CardTable from '@/ui/CardTable';
 
 export default function Page() {
   return (
-    <div className="flex h-full w-full flex-col justify-between space-y-4">
+    <div className="flex h-screen flex-col space-y-4">
-      <div className="flex flex-col space-y-6">
+      <section className="flex-col space-y-4">
-        <div className="flex flex-col space-y-2">
+        <header>
-          <h2 className="text-2xl">Bienvenue!</h2>
+          <h3 className="text-xl font-semibold">Tableau de bord</h3>
           <p className="text-muted">Ceci est la page d&apos;accueil du dashboard</p>
-        </div>
+        </header>
-        <section className="flex justify-between space-x-4">
+        <main className="flex-col justify-between space-x-0 space-y-4 md:flex md:flex-row md:space-x-4 md:space-y-0">
-          <Card />
+          <Card title={'Hey salut'} data={'Xavier il aime les pieds'} />
-          <Card />
+          <Card title="Nicolas le boss" data="Car il a fait ces cartes" />
-          <Card />
+          <Card title="Https" data="Une histoire d'amour avec Xav" />
-        </section>
+        </main>
-
+      </section>
-        <div className="flex">
+      {/* TODO fix ça c'est pas responsive */}
-          <section className="flex max-h-96 w-full space-y-4">
+      {/* <section className="flex-col space-y-4">
-            <div className="flex justify-between space-x-4">
+        <header>
-              <CardTable />
+          <h3 className="text-xl font-semibold">Statistiques</h3>
-            </div>
+          <p className="text-muted">Ceci est la page d&apos;accueil du dashboard</p>
-          </section>
+        </header>
-          <section className="flex max-h-96 w-full space-y-4">
+        <main className="flex-col justify-between space-x-0 space-y-4 sm:flex sm:flex-row sm:space-x-4 sm:space-y-0">
-            <div className="flex justify-between space-x-4">
+          <CardTable
-              <CardTable />
+            puzzles={[
-            </div>
+              { name: 'Jour 0 | Save Conway Gadgetski', id: '1', content: '' },
-          </section>
+              { name: 'Jour 1 | Next', id: '2', content: '' },
-        </div>
+              { name: 'Jour 2 | Previous', id: '3', content: '' },
-      </div>
+              { name: 'Jour 3 | Next 1 loop', id: '4', content: '' },
+              { name: 'Jour 4 |  Next no loop + recursion', id: '5', content: '' },
+              { name: 'Jour 5  | N first rows', id: '6', content: '' },
+              { name: 'Week-end | Game of Life', id: '7', content: '' },
+              { name: 'Jour 0 | Save Conway Gadgetski', id: '1', content: '' },
+              { name: 'Jour 1 | Next', id: '2', content: '' },
+              { name: 'Jour 2 | Previous', id: '3', content: '' },
+              { name: 'Jour 3 | Next 1 loop', id: '4', content: '' },
+              { name: 'Jour 4 |  Next no loop + recursion', id: '5', content: '' },
+              { name: 'Jour 5  | N first rows', id: '6', content: '' },
+              { name: 'Week-end | Game of Life', id: '7', content: '' },
+              { name: 'Jour 0 | Save Conway Gadgetski', id: '1', content: '' },
+              { name: 'Jour 1 | Next', id: '2', content: '' },
+              { name: 'Jour 2 | Previous', id: '3', content: '' },
+              { name: 'Jour 3 | Next 1 loop', id: '4', content: '' },
+              { name: 'Jour 4 |  Next no loop + recursion', id: '5', content: '' },
+              { name: 'Jour 5  | N first rows', id: '6', content: '' },
+              { name: 'Week-end | Game of Life', id: '7', content: '' }
+            ]}
+          />
+          <CardTable
+            puzzles={[
+              { name: 'Jour 0 | Save Conway Gadgetski', id: '1', content: '' },
+              { name: 'Jour 1 | Next', id: '2', content: '' },
+              { name: 'Jour 2 | Previous', id: '3', content: '' },
+              { name: 'Jour 3 | Next 1 loop', id: '4', content: '' },
+              { name: 'Jour 4 |  Next no loop + recursion', id: '5', content: '' },
+              { name: 'Jour 5  | N first rows', id: '6', content: '' },
+              { name: 'Week-end | Game of Life', id: '7', content: '' }
+            ]}
+          />
+        </main>
+      </section> */}
     </div>
   );
 }

app/dashboard/puzzles/[id]/not-found.tsx

@@ -0,0 +1,11 @@
+import Image from 'next/image';
+import error404 from '@/public/assets/404.png';
+
+export default function NotFound() {
+  return (
+    <div className="m-auto flex h-screen flex-col items-center justify-center space-y-6">
+      <h2 className="text-6xl">Oh non! Un François 404</h2>
+      <Image src={error404} alt="François 404" width={1000} height={1000} />
+    </div>
+  );
+}

app/dashboard/puzzles/[id]/page.tsx

@@ -1,6 +1,6 @@
 import Puzzle from '@/ui/Puzzle';
 
-export default async function Page({ params }: { params: { id: string } }) {
+export default async function Page({ params }: { params: { id: number } }) {
   const { id } = params;
 
   return (

app/dashboard/puzzles/page.tsx

@@ -4,14 +4,10 @@ export default async function Page() {
   // const puzzles = await getPuzzles();
 
   return (
-    <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-6">
+      {/* <SWRFallback fallback={{ ['puzzles']: puzzles }}> */}
-        <section className="flex flex-col space-y-6">
+      <Puzzles />
-          {/* <SWRFallback fallback={{ ['puzzles']: puzzles }}> */}
+      {/* </SWRFallback> */}
-          <Puzzles />
-          {/* </SWRFallback> */}
-        </section>
-      </div>
     </div>
   );
 }

app/layout.tsx

@@ -8,7 +8,7 @@ import { type ReactNode } from 'react';
 
 const sans = localFont({
   variable: '--font-sans',
-  src: './fonts/Karrik-Regular.woff2',
+  src: './fonts/Karrik.woff2',
   weight: 'variable'
 });
 

lib/hooks/use-puzzles.ts

@@ -9,6 +9,6 @@ export function usePuzzles() {
   return useSWR('puzzles', () => getPuzzles());
 }
 
-export function usePuzzle(id: string) {
+export function usePuzzle(id: number) {
   return useSWR(`puzzles/${id}`, () => getPuzzle(id));
 }

lib/puzzles.ts

@@ -1,7 +1,7 @@
 export const getChapters = async (): Promise<Chapter[]> => {
   const req = await fetch(`http://170.75.166.204/chapters`);
 
-  const chapters = await req.json();
+  let chapters = await req.json();
 
   if (!req.ok) {
     throw new Error('Failed to fetch puzzles');
@@ -11,23 +11,31 @@ export const getChapters = async (): Promise<Chapter[]> => {
     return [];
   }
 
+  chapters = chapters.filter((chapter: Chapter) => chapter.id !== 0);
+
+  console.log(chapters);
+
   return chapters as Chapter[];
 };
 
-export const getPuzzlesByChapter = async (chapitre: string): Promise<Puzzle[]> => {
+export const getPuzzlesByChapter = async (chapitre: number): Promise<Chapter | null> => {
   const req = await fetch(`http://170.75.166.204/chapter/${chapitre}`);
 
-  const { puzzles } = await req.json();
+  const { puzzles, name, id } = await req.json();
 
   if (!req.ok) {
     throw new Error('Failed to fetch puzzles');
   }
 
   if (!puzzles) {
-    return [];
+    return null;
   }
 
-  return puzzles as Puzzle[];
+  return {
+    name,
+    id,
+    puzzles
+  };
 };
 
 export const getPuzzles = async (): Promise<{ chapters: Chapter[]; puzzles: Puzzle[] }> => {
@@ -36,7 +44,7 @@ export const getPuzzles = async (): Promise<{ chapters: Chapter[]; puzzles: Puzz
 
   for (const chapter of chapters) {
     const puzzlesByChapter = await getPuzzlesByChapter(chapter.id);
-    puzzles = [...puzzles, ...puzzlesByChapter];
+    puzzles = [...puzzles, ...puzzlesByChapter!.puzzles];
   }
 
   return {
@@ -45,7 +53,7 @@ export const getPuzzles = async (): Promise<{ chapters: Chapter[]; puzzles: Puzz
   };
 };
 
-export const getPuzzle = async (id: string): Promise<Puzzle> => {
+export const getPuzzle = async (id: number): Promise<Puzzle> => {
   const req = await fetch(`http://170.75.166.204/puzzle/${id}`);
 
   const puzzle = await req.json();
@@ -62,13 +70,13 @@ export const getPuzzle = async (id: string): Promise<Puzzle> => {
 };
 
 export type Puzzle = {
-  chapter: string;
   name: string;
-  id: string;
+  id: number;
   content: string;
 };
 
 export type Chapter = {
   name: string;
-  id: string;
+  id: number;
+  puzzles: Puzzle[];
 };

package.json

@@ -27,6 +27,7 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-hook-form": "^7.43.1",
+    "react-markdown": "^8.0.5",
     "remixicon": "^2.5.0",
     "swr": "^2.0.3",
     "tailwind-merge": "^1.9.0",

pnpm-lock.yaml

@@ -21,6 +21,7 @@ specifiers:
   react: 18.2.0
   react-dom: 18.2.0
   react-hook-form: ^7.43.1
+  react-markdown: ^8.0.5
   remixicon: ^2.5.0
   swr: ^2.0.3
   tailwind-merge: ^1.9.0
@@ -35,6 +36,7 @@ dependencies:
   react: 18.2.0
   react-dom: 18.2.0_react@18.2.0
   react-hook-form: 7.43.1_react@18.2.0
+  react-markdown: 8.0.5_3stiutgnnbnfnf3uowm5cip22i
   remixicon: 2.5.0
   swr: 2.0.3_react@18.2.0
   tailwind-merge: 1.9.0
@@ -287,6 +289,18 @@ packages:
       tailwindcss: 3.2.4_postcss@8.4.21
     dev: true
 
+  /@types/debug/4.1.7:
+    resolution: {integrity: sha512-9AonUzyTjXXhEOa0DnqpzZi6VHlqKMswga9EXjpXnnqxwLtdvPPtlO8evrI5D9S6asFRCQ6v+wpiUKbw+vKqyg==}
+    dependencies:
+      '@types/ms': 0.7.31
+    dev: false
+
+  /@types/hast/2.3.4:
+    resolution: {integrity: sha512-wLEm0QvaoawEDoTRwzTXp4b4jpwiJDvR5KMnFnVodm3scufTlBOWRD6N1OBf9TZMhjlNsSfcO5V+7AF4+Vy+9g==}
+    dependencies:
+      '@types/unist': 2.0.6
+    dev: false
+
   /@types/json-schema/7.0.11:
     resolution: {integrity: sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ==}
     dev: true
@@ -295,13 +309,22 @@ packages:
     resolution: {integrity: sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==}
     dev: true
 
+  /@types/mdast/3.0.10:
+    resolution: {integrity: sha512-W864tg/Osz1+9f4lrGTZpCSO5/z4608eUp19tbozkq2HJK6i3z1kT0H9tlADXuYIb1YYOBByU4Jsqkk75q48qA==}
+    dependencies:
+      '@types/unist': 2.0.6
+    dev: false
+
+  /@types/ms/0.7.31:
+    resolution: {integrity: sha512-iiUgKzV9AuaEkZqkOLDIvlQiL6ltuZd9tGcW3gwpnX8JbuiuhFlEGmmFXEXkN50Cvq7Os88IY2v0dkDqXYWVgA==}
+    dev: false
+
   /@types/node/18.11.18:
     resolution: {integrity: sha512-DHQpWGjyQKSHj3ebjFI/wRKcqQcdR+MoFBygntYOZytCqNfkd2ZC4ARDJ2DQqhjH5p85Nnd3jhUJIXrszFX/JA==}
     dev: true
 
   /@types/prop-types/15.7.5:
     resolution: {integrity: sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==}
-    dev: true
 
   /@types/react-dom/18.0.10:
     resolution: {integrity: sha512-E42GW/JA4Qv15wQdqJq8DL4JhNpB3prJgjgapN3qJT9K2zO5IIAQh4VXvCEDupoqAwnz0cY4RlXeC/ajX5SFHg==}
@@ -315,16 +338,18 @@ packages:
       '@types/prop-types': 15.7.5
       '@types/scheduler': 0.16.2
       csstype: 3.1.1
-    dev: true
 
   /@types/scheduler/0.16.2:
     resolution: {integrity: sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==}
-    dev: true
 
   /@types/semver/7.3.13:
     resolution: {integrity: sha512-21cFJr9z3g5dW8B0CVI9g2O9beqaThGQ6ZFBqHfwhzLDKUxaqTIy3vnfah/UPkfOiF2pLq+tGz+W8RyCskuslw==}
     dev: true
 
+  /@types/unist/2.0.6:
+    resolution: {integrity: sha512-PBjIUxZHOuj0R15/xuwJYjFi+KZdNFrehocChv4g5hu6aFroHue8m0lBP0POdK2nKzbw0cgV1mws8+V/JAcEkQ==}
+    dev: false
+
   /@typescript-eslint/eslint-plugin/5.50.0_go4drrxstycfikanvu45pi4vgq:
     resolution: {integrity: sha512-vwksQWSFZiUhgq3Kv7o1Jcj0DUNylwnIlGvKvLLYsq8pAWha6/WCnXUeaSoNNha/K7QSf2+jvmkxggC1u3pIwQ==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
@@ -613,6 +638,10 @@ packages:
       deep-equal: 2.2.0
     dev: true
 
+  /bail/2.0.2:
+    resolution: {integrity: sha512-0xO6mYd7JB2YesxDKplafRpsiOzPt9V02ddPCLbY1xYGPOX24NTyN50qnUxgCPcSoYMhKpAuBTjQoRZCAkUDRw==}
+    dev: false
+
   /balanced-match/1.0.2:
     resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
     dev: true
@@ -675,6 +704,10 @@ packages:
       supports-color: 7.2.0
     dev: true
 
+  /character-entities/2.0.2:
+    resolution: {integrity: sha512-shx7oQ0Awen/BRIdkjkvz54PnEEI/EjwXDSIZp86/KKdbafHh1Df/RYGBhn4hbe2+uKC9FnT5UCEdyPz3ai9hQ==}
+    dev: false
+
   /chokidar/3.5.3:
     resolution: {integrity: sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==}
     engines: {node: '>= 8.10.0'}
@@ -710,6 +743,10 @@ packages:
     resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==}
     dev: true
 
+  /comma-separated-tokens/2.0.3:
+    resolution: {integrity: sha512-Fu4hJdvzeylCfQPp9SGWidpzrMs7tTrlu6Vb8XGaRGck8QSNZJJp538Wrb60Lax4fPwR64ViY468OIUTbRlGZg==}
+    dev: false
+
   /concat-map/0.0.1:
     resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==}
     dev: true
@@ -731,7 +768,6 @@ packages:
 
   /csstype/3.1.1:
     resolution: {integrity: sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw==}
-    dev: true
 
   /damerau-levenshtein/1.0.8:
     resolution: {integrity: sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA==}
@@ -758,7 +794,12 @@ packages:
         optional: true
     dependencies:
       ms: 2.1.2
-    dev: true
+
+  /decode-named-character-reference/1.0.2:
+    resolution: {integrity: sha512-O8x12RzrUF8xyVcY0KJowWsmaJxQbmy0/EtnNtHRpsOcT7dFk5W598coHqBVpmWo1oQQfsCqfCmkZN5DJrZVdg==}
+    dependencies:
+      character-entities: 2.0.2
+    dev: false
 
   /deep-equal/2.2.0:
     resolution: {integrity: sha512-RdpzE0Hv4lhowpIUKKMJfeH6C1pXdtT1/it80ubgWqwI3qpuxUBpC1S4hnHg+zjnuOoDkzUtUCEEkG+XG5l3Mw==}
@@ -803,6 +844,11 @@ packages:
     resolution: {integrity: sha512-hsBd2qSVCRE+5PmNdHt1uzyrFu5d3RwmFDKzyNZMFq/EwDNJF7Ee5+D5oEKF0hU6LhtoUF1macFvOe4AskQC1Q==}
     dev: true
 
+  /dequal/2.0.3:
+    resolution: {integrity: sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==}
+    engines: {node: '>=6'}
+    dev: false
+
   /detective/5.2.1:
     resolution: {integrity: sha512-v9XE1zRnz1wRtgurGu0Bs8uHKFSTdteYZNbIPFVhUZ39L/S79ppMpdmVOZAnoz1jfEFodc48n6MX483Xo3t1yw==}
     engines: {node: '>=0.8.0'}
@@ -817,6 +863,11 @@ packages:
     resolution: {integrity: sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==}
     dev: true
 
+  /diff/5.1.0:
+    resolution: {integrity: sha512-D+mk+qE8VC/PAUrlAU34N+VfXev0ghe5ywmpqrawphmVZc1bEfn56uo9qpyGp1p4xpzOHkSW4ztBd6L7Xx4ACw==}
+    engines: {node: '>=0.3.1'}
+    dev: false
+
   /dir-glob/3.0.1:
     resolution: {integrity: sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==}
     engines: {node: '>=8'}
@@ -1269,6 +1320,10 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: true
 
+  /extend/3.0.2:
+    resolution: {integrity: sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==}
+    dev: false
+
   /fast-deep-equal/3.1.3:
     resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==}
     dev: true
@@ -1530,6 +1585,10 @@ packages:
       function-bind: 1.1.1
     dev: true
 
+  /hast-util-whitespace/2.0.1:
+    resolution: {integrity: sha512-nAxA0v8+vXSBDt3AnRUNjyRIQ0rD+ntpbAp4LnPkumc5M9yUbSMa4XDU9Q6etY4f1Wp4bNgvc1yjiZtsTTrSng==}
+    dev: false
+
   /ignore/5.2.4:
     resolution: {integrity: sha512-MAb38BcSbH0eHNBxn7ql2NH/kX33OkB3lZ1BNdh7ENeRChHTYsTvWrMubiIAMNS2llXEEgZ1MUOBtXChP3kaFQ==}
     engines: {node: '>= 4'}
@@ -1559,6 +1618,10 @@ packages:
     resolution: {integrity: sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==}
     dev: true
 
+  /inline-style-parser/0.1.1:
+    resolution: {integrity: sha512-7NXolsK4CAS5+xvdj5OMMbI962hU/wvwoxk+LWR9Ek9bVtyuuYScDN6eS0rUm6TxApFpw7CX1o4uJzcd4AyD3Q==}
+    dev: false
+
   /internal-slot/1.0.4:
     resolution: {integrity: sha512-tA8URYccNzMo94s5MQZgH8NB/XTa6HsOo0MLfXTKKEnHVVdegzaQoFZ7Jp44bdvLvY2waT5dc+j5ICEswhi7UQ==}
     engines: {node: '>= 0.4'}
@@ -1605,6 +1668,11 @@ packages:
       has-tostringtag: 1.0.0
     dev: true
 
+  /is-buffer/2.0.5:
+    resolution: {integrity: sha512-i2R6zNFDwgEHJyQUtJEk0XFi1i0dPFn/oqjK3/vPCcDeJvW5NQ83V8QbicfF1SupOaB0h8ntgBC2YiE7dfyctQ==}
+    engines: {node: '>=4'}
+    dev: false
+
   /is-callable/1.2.7:
     resolution: {integrity: sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==}
     engines: {node: '>= 0.4'}
@@ -1667,6 +1735,11 @@ packages:
     engines: {node: '>=8'}
     dev: true
 
+  /is-plain-obj/4.1.0:
+    resolution: {integrity: sha512-+Pgi+vMuUNkJyExiMBt5IlFoMyKnr5zhJ4Uspz58WOhBF5QoIZkFyNHIbBAtHwzVAgk5RtndVNsDRN61/mmDqg==}
+    engines: {node: '>=12'}
+    dev: false
+
   /is-regex/1.1.4:
     resolution: {integrity: sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==}
     engines: {node: '>= 0.4'}
@@ -1779,6 +1852,11 @@ packages:
       object.assign: 4.1.4
     dev: true
 
+  /kleur/4.1.5:
+    resolution: {integrity: sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ==}
+    engines: {node: '>=6'}
+    dev: false
+
   /language-subtag-registry/0.3.22:
     resolution: {integrity: sha512-tN0MCzyWnoz/4nHS6uxdlFWoUZT7ABptwKPQ52Ea7URk6vll88bWBVhodtnlfEuCcKWNGoc+uGbw1cwa9IKh/w==}
     dev: true
@@ -1826,11 +1904,233 @@ packages:
       yallist: 4.0.0
     dev: true
 
+  /mdast-util-definitions/5.1.2:
+    resolution: {integrity: sha512-8SVPMuHqlPME/z3gqVwWY4zVXn8lqKv/pAhC57FuJ40ImXyBpmO5ukh98zB2v7Blql2FiHjHv9LVztSIqjY+MA==}
+    dependencies:
+      '@types/mdast': 3.0.10
+      '@types/unist': 2.0.6
+      unist-util-visit: 4.1.2
+    dev: false
+
+  /mdast-util-from-markdown/1.3.0:
+    resolution: {integrity: sha512-HN3W1gRIuN/ZW295c7zi7g9lVBllMgZE40RxCX37wrTPWXCWtpvOZdfnuK+1WNpvZje6XuJeI3Wnb4TJEUem+g==}
+    dependencies:
+      '@types/mdast': 3.0.10
+      '@types/unist': 2.0.6
+      decode-named-character-reference: 1.0.2
+      mdast-util-to-string: 3.1.1
+      micromark: 3.1.0
+      micromark-util-decode-numeric-character-reference: 1.0.0
+      micromark-util-decode-string: 1.0.2
+      micromark-util-normalize-identifier: 1.0.0
+      micromark-util-symbol: 1.0.1
+      micromark-util-types: 1.0.2
+      unist-util-stringify-position: 3.0.3
+      uvu: 0.5.6
+    transitivePeerDependencies:
+      - supports-color
+    dev: false
+
+  /mdast-util-to-hast/12.3.0:
+    resolution: {integrity: sha512-pits93r8PhnIoU4Vy9bjW39M2jJ6/tdHyja9rrot9uujkN7UTU9SDnE6WNJz/IGyQk3XHX6yNNtrBH6cQzm8Hw==}
+    dependencies:
+      '@types/hast': 2.3.4
+      '@types/mdast': 3.0.10
+      mdast-util-definitions: 5.1.2
+      micromark-util-sanitize-uri: 1.1.0
+      trim-lines: 3.0.1
+      unist-util-generated: 2.0.1
+      unist-util-position: 4.0.4
+      unist-util-visit: 4.1.2
+    dev: false
+
+  /mdast-util-to-string/3.1.1:
+    resolution: {integrity: sha512-tGvhT94e+cVnQt8JWE9/b3cUQZWS732TJxXHktvP+BYo62PpYD53Ls/6cC60rW21dW+txxiM4zMdc6abASvZKA==}
+    dependencies:
+      '@types/mdast': 3.0.10
+    dev: false
+
   /merge2/1.4.1:
     resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==}
     engines: {node: '>= 8'}
     dev: true
 
+  /micromark-core-commonmark/1.0.6:
+    resolution: {integrity: sha512-K+PkJTxqjFfSNkfAhp4GB+cZPfQd6dxtTXnf+RjZOV7T4EEXnvgzOcnp+eSTmpGk9d1S9sL6/lqrgSNn/s0HZA==}
+    dependencies:
+      decode-named-character-reference: 1.0.2
+      micromark-factory-destination: 1.0.0
+      micromark-factory-label: 1.0.2
+      micromark-factory-space: 1.0.0
+      micromark-factory-title: 1.0.2
+      micromark-factory-whitespace: 1.0.0
+      micromark-util-character: 1.1.0
+      micromark-util-chunked: 1.0.0
+      micromark-util-classify-character: 1.0.0
+      micromark-util-html-tag-name: 1.1.0
+      micromark-util-normalize-identifier: 1.0.0
+      micromark-util-resolve-all: 1.0.0
+      micromark-util-subtokenize: 1.0.2
+      micromark-util-symbol: 1.0.1
+      micromark-util-types: 1.0.2
+      uvu: 0.5.6
+    dev: false
+
+  /micromark-factory-destination/1.0.0:
+    resolution: {integrity: sha512-eUBA7Rs1/xtTVun9TmV3gjfPz2wEwgK5R5xcbIM5ZYAtvGF6JkyaDsj0agx8urXnO31tEO6Ug83iVH3tdedLnw==}
+    dependencies:
+      micromark-util-character: 1.1.0
+      micromark-util-symbol: 1.0.1
+      micromark-util-types: 1.0.2
+    dev: false
+
+  /micromark-factory-label/1.0.2:
+    resolution: {integrity: sha512-CTIwxlOnU7dEshXDQ+dsr2n+yxpP0+fn271pu0bwDIS8uqfFcumXpj5mLn3hSC8iw2MUr6Gx8EcKng1dD7i6hg==}
+    dependencies:
+      micromark-util-character: 1.1.0
+      micromark-util-symbol: 1.0.1
+      micromark-util-types: 1.0.2
+      uvu: 0.5.6
+    dev: false
+
+  /micromark-factory-space/1.0.0:
+    resolution: {integrity: sha512-qUmqs4kj9a5yBnk3JMLyjtWYN6Mzfcx8uJfi5XAveBniDevmZasdGBba5b4QsvRcAkmvGo5ACmSUmyGiKTLZew==}
+    dependencies:
+      micromark-util-character: 1.1.0
+      micromark-util-types: 1.0.2
+    dev: false
+
+  /micromark-factory-title/1.0.2:
+    resolution: {integrity: sha512-zily+Nr4yFqgMGRKLpTVsNl5L4PMu485fGFDOQJQBl2NFpjGte1e86zC0da93wf97jrc4+2G2GQudFMHn3IX+A==}
+    dependencies:
+      micromark-factory-space: 1.0.0
+      micromark-util-character: 1.1.0
+      micromark-util-symbol: 1.0.1
+      micromark-util-types: 1.0.2
+      uvu: 0.5.6
+    dev: false
+
+  /micromark-factory-whitespace/1.0.0:
+    resolution: {integrity: sha512-Qx7uEyahU1lt1RnsECBiuEbfr9INjQTGa6Err+gF3g0Tx4YEviPbqqGKNv/NrBaE7dVHdn1bVZKM/n5I/Bak7A==}
+    dependencies:
+      micromark-factory-space: 1.0.0
+      micromark-util-character: 1.1.0
+      micromark-util-symbol: 1.0.1
+      micromark-util-types: 1.0.2
+    dev: false
+
+  /micromark-util-character/1.1.0:
+    resolution: {integrity: sha512-agJ5B3unGNJ9rJvADMJ5ZiYjBRyDpzKAOk01Kpi1TKhlT1APx3XZk6eN7RtSz1erbWHC2L8T3xLZ81wdtGRZzg==}
+    dependencies:
+      micromark-util-symbol: 1.0.1
+      micromark-util-types: 1.0.2
+    dev: false
+
+  /micromark-util-chunked/1.0.0:
+    resolution: {integrity: sha512-5e8xTis5tEZKgesfbQMKRCyzvffRRUX+lK/y+DvsMFdabAicPkkZV6gO+FEWi9RfuKKoxxPwNL+dFF0SMImc1g==}
+    dependencies:
+      micromark-util-symbol: 1.0.1
+    dev: false
+
+  /micromark-util-classify-character/1.0.0:
+    resolution: {integrity: sha512-F8oW2KKrQRb3vS5ud5HIqBVkCqQi224Nm55o5wYLzY/9PwHGXC01tr3d7+TqHHz6zrKQ72Okwtvm/xQm6OVNZA==}
+    dependencies:
+      micromark-util-character: 1.1.0
+      micromark-util-symbol: 1.0.1
+      micromark-util-types: 1.0.2
+    dev: false
+
+  /micromark-util-combine-extensions/1.0.0:
+    resolution: {integrity: sha512-J8H058vFBdo/6+AsjHp2NF7AJ02SZtWaVUjsayNFeAiydTxUwViQPxN0Hf8dp4FmCQi0UUFovFsEyRSUmFH3MA==}
+    dependencies:
+      micromark-util-chunked: 1.0.0
+      micromark-util-types: 1.0.2
+    dev: false
+
+  /micromark-util-decode-numeric-character-reference/1.0.0:
+    resolution: {integrity: sha512-OzO9AI5VUtrTD7KSdagf4MWgHMtET17Ua1fIpXTpuhclCqD8egFWo85GxSGvxgkGS74bEahvtM0WP0HjvV0e4w==}
+    dependencies:
+      micromark-util-symbol: 1.0.1
+    dev: false
+
+  /micromark-util-decode-string/1.0.2:
+    resolution: {integrity: sha512-DLT5Ho02qr6QWVNYbRZ3RYOSSWWFuH3tJexd3dgN1odEuPNxCngTCXJum7+ViRAd9BbdxCvMToPOD/IvVhzG6Q==}
+    dependencies:
+      decode-named-character-reference: 1.0.2
+      micromark-util-character: 1.1.0
+      micromark-util-decode-numeric-character-reference: 1.0.0
+      micromark-util-symbol: 1.0.1
+    dev: false
+
+  /micromark-util-encode/1.0.1:
+    resolution: {integrity: sha512-U2s5YdnAYexjKDel31SVMPbfi+eF8y1U4pfiRW/Y8EFVCy/vgxk/2wWTxzcqE71LHtCuCzlBDRU2a5CQ5j+mQA==}
+    dev: false
+
+  /micromark-util-html-tag-name/1.1.0:
+    resolution: {integrity: sha512-BKlClMmYROy9UiV03SwNmckkjn8QHVaWkqoAqzivabvdGcwNGMMMH/5szAnywmsTBUzDsU57/mFi0sp4BQO6dA==}
+    dev: false
+
+  /micromark-util-normalize-identifier/1.0.0:
+    resolution: {integrity: sha512-yg+zrL14bBTFrQ7n35CmByWUTFsgst5JhA4gJYoty4Dqzj4Z4Fr/DHekSS5aLfH9bdlfnSvKAWsAgJhIbogyBg==}
+    dependencies:
+      micromark-util-symbol: 1.0.1
+    dev: false
+
+  /micromark-util-resolve-all/1.0.0:
+    resolution: {integrity: sha512-CB/AGk98u50k42kvgaMM94wzBqozSzDDaonKU7P7jwQIuH2RU0TeBqGYJz2WY1UdihhjweivStrJ2JdkdEmcfw==}
+    dependencies:
+      micromark-util-types: 1.0.2
+    dev: false
+
+  /micromark-util-sanitize-uri/1.1.0:
+    resolution: {integrity: sha512-RoxtuSCX6sUNtxhbmsEFQfWzs8VN7cTctmBPvYivo98xb/kDEoTCtJQX5wyzIYEmk/lvNFTat4hL8oW0KndFpg==}
+    dependencies:
+      micromark-util-character: 1.1.0
+      micromark-util-encode: 1.0.1
+      micromark-util-symbol: 1.0.1
+    dev: false
+
+  /micromark-util-subtokenize/1.0.2:
+    resolution: {integrity: sha512-d90uqCnXp/cy4G881Ub4psE57Sf8YD0pim9QdjCRNjfas2M1u6Lbt+XZK9gnHL2XFhnozZiEdCa9CNfXSfQ6xA==}
+    dependencies:
+      micromark-util-chunked: 1.0.0
+      micromark-util-symbol: 1.0.1
+      micromark-util-types: 1.0.2
+      uvu: 0.5.6
+    dev: false
+
+  /micromark-util-symbol/1.0.1:
+    resolution: {integrity: sha512-oKDEMK2u5qqAptasDAwWDXq0tG9AssVwAx3E9bBF3t/shRIGsWIRG+cGafs2p/SnDSOecnt6hZPCE2o6lHfFmQ==}
+    dev: false
+
+  /micromark-util-types/1.0.2:
+    resolution: {integrity: sha512-DCfg/T8fcrhrRKTPjRrw/5LLvdGV7BHySf/1LOZx7TzWZdYRjogNtyNq885z3nNallwr3QUKARjqvHqX1/7t+w==}
+    dev: false
+
+  /micromark/3.1.0:
+    resolution: {integrity: sha512-6Mj0yHLdUZjHnOPgr5xfWIMqMWS12zDN6iws9SLuSz76W8jTtAv24MN4/CL7gJrl5vtxGInkkqDv/JIoRsQOvA==}
+    dependencies:
+      '@types/debug': 4.1.7
+      debug: 4.3.4
+      decode-named-character-reference: 1.0.2
+      micromark-core-commonmark: 1.0.6
+      micromark-factory-space: 1.0.0
+      micromark-util-character: 1.1.0
+      micromark-util-chunked: 1.0.0
+      micromark-util-combine-extensions: 1.0.0
+      micromark-util-decode-numeric-character-reference: 1.0.0
+      micromark-util-encode: 1.0.1
+      micromark-util-normalize-identifier: 1.0.0
+      micromark-util-resolve-all: 1.0.0
+      micromark-util-sanitize-uri: 1.1.0
+      micromark-util-subtokenize: 1.0.2
+      micromark-util-symbol: 1.0.1
+      micromark-util-types: 1.0.2
+      uvu: 0.5.6
+    transitivePeerDependencies:
+      - supports-color
+    dev: false
+
   /micromatch/4.0.5:
     resolution: {integrity: sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==}
     engines: {node: '>=8.6'}
@@ -1854,9 +2154,13 @@ packages:
     resolution: {integrity: sha512-bzfL1YUZsP41gmu/qjrEk0Q6i2ix/cVeAhbCbqH9u3zYutS1cLg00qhrD0M2MVdCcx4Sc0UpP2eBWo9rotpq6g==}
     dev: true
 
+  /mri/1.2.0:
+    resolution: {integrity: sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA==}
+    engines: {node: '>=4'}
+    dev: false
+
   /ms/2.1.2:
     resolution: {integrity: sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==}
-    dev: true
 
   /ms/2.1.3:
     resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
@@ -1936,7 +2240,6 @@ packages:
   /object-assign/4.1.1:
     resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==}
     engines: {node: '>=0.10.0'}
-    dev: true
 
   /object-hash/3.0.0:
     resolution: {integrity: sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==}
@@ -2244,7 +2547,10 @@ packages:
       loose-envify: 1.4.0
       object-assign: 4.1.1
       react-is: 16.13.1
-    dev: true
+
+  /property-information/6.2.0:
+    resolution: {integrity: sha512-kma4U7AFCTwpqq5twzC1YVIDXSqg6qQK6JN0smOw8fgRy1OkMi0CYSzFmsy6dnqSenamAtj0CyXMUJ1Mf6oROg==}
+    dev: false
 
   /punycode/2.3.0:
     resolution: {integrity: sha512-rRV+zQD8tVFys26lAGR9WUuS4iUAngJScM+ZRSKtvl5tKeZ2t5bvdNFdNHBW9FWR4guGHlgmsZ1G7BSm2wTbuA==}
@@ -2281,7 +2587,37 @@ packages:
 
   /react-is/16.13.1:
     resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
-    dev: true
+
+  /react-is/18.2.0:
+    resolution: {integrity: sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==}
+    dev: false
+
+  /react-markdown/8.0.5_3stiutgnnbnfnf3uowm5cip22i:
+    resolution: {integrity: sha512-jGJolWWmOWAvzf+xMdB9zwStViODyyFQhNB/bwCerbBKmrTmgmA599CGiOlP58OId1IMoIRsA8UdI1Lod4zb5A==}
+    peerDependencies:
+      '@types/react': '>=16'
+      react: '>=16'
+    dependencies:
+      '@types/hast': 2.3.4
+      '@types/prop-types': 15.7.5
+      '@types/react': 18.0.27
+      '@types/unist': 2.0.6
+      comma-separated-tokens: 2.0.3
+      hast-util-whitespace: 2.0.1
+      prop-types: 15.8.1
+      property-information: 6.2.0
+      react: 18.2.0
+      react-is: 18.2.0
+      remark-parse: 10.0.1
+      remark-rehype: 10.1.0
+      space-separated-tokens: 2.0.2
+      style-to-object: 0.4.1
+      unified: 10.1.2
+      unist-util-visit: 4.1.2
+      vfile: 5.3.7
+    transitivePeerDependencies:
+      - supports-color
+    dev: false
 
   /react/18.2.0:
     resolution: {integrity: sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==}
@@ -2321,6 +2657,25 @@ packages:
     engines: {node: '>=8'}
     dev: true
 
+  /remark-parse/10.0.1:
+    resolution: {integrity: sha512-1fUyHr2jLsVOkhbvPRBJ5zTKZZyD6yZzYaWCS6BPBdQ8vEMBCH+9zNCDA6tET/zHCi/jLqjCWtlJZUPk+DbnFw==}
+    dependencies:
+      '@types/mdast': 3.0.10
+      mdast-util-from-markdown: 1.3.0
+      unified: 10.1.2
+    transitivePeerDependencies:
+      - supports-color
+    dev: false
+
+  /remark-rehype/10.1.0:
+    resolution: {integrity: sha512-EFmR5zppdBp0WQeDVZ/b66CWJipB2q2VLNFMabzDSGR66Z2fQii83G5gTBbgGEnEEA0QRussvrFHxk1HWGJskw==}
+    dependencies:
+      '@types/hast': 2.3.4
+      '@types/mdast': 3.0.10
+      mdast-util-to-hast: 12.3.0
+      unified: 10.1.2
+    dev: false
+
   /remixicon/2.5.0:
     resolution: {integrity: sha512-q54ra2QutYDZpuSnFjmeagmEiN9IMo56/zz5dDNitzKD23oFRw77cWo4TsrAdmdkPiEn8mxlrTqxnkujDbEGww==}
     dev: false
@@ -2366,6 +2721,13 @@ packages:
       queue-microtask: 1.2.3
     dev: true
 
+  /sade/1.8.1:
+    resolution: {integrity: sha512-xal3CZX1Xlo/k4ApwCFrHVACi9fBqJ7V+mwhBsuf/1IOKbBy098Fex+Wa/5QMubw09pSZ/u8EY8PWgevJsXp1A==}
+    engines: {node: '>=6'}
+    dependencies:
+      mri: 1.2.0
+    dev: false
+
   /safe-regex-test/1.0.0:
     resolution: {integrity: sha512-JBUUzyOgEwXQY1NuPtvcj/qcBDbDmEvWufhlnXZIm75DEHp+afM1r1ujJpJsV/gSM4t59tpDyPi1sd6ZaPFfsA==}
     dependencies:
@@ -2427,6 +2789,10 @@ packages:
     resolution: {integrity: sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==}
     engines: {node: '>=0.10.0'}
 
+  /space-separated-tokens/2.0.2:
+    resolution: {integrity: sha512-PEGlAwrG8yXGXRjW32fGbg66JAlOAwbObuqVoJpv/mRgoWDQfgH1wDPvtzWyUSNAXBGSk8h755YDbbcEy3SH2Q==}
+    dev: false
+
   /stop-iteration-iterator/1.0.0:
     resolution: {integrity: sha512-iCGQj+0l0HOdZ2AEeBADlsRC+vsnDsZsbdSiH1yNSjcfKM7fdpCMfqAL/dwF5BLiw/XhRft/Wax6zQbhq2BcjQ==}
     engines: {node: '>= 0.4'}
@@ -2480,6 +2846,12 @@ packages:
     engines: {node: '>=8'}
     dev: true
 
+  /style-to-object/0.4.1:
+    resolution: {integrity: sha512-HFpbb5gr2ypci7Qw+IOhnP2zOU7e77b+rzM+wTzXzfi1PrtBCX0E7Pk4wL4iTLnhzZ+JgEGAhX81ebTg/aYjQw==}
+    dependencies:
+      inline-style-parser: 0.1.1
+    dev: false
+
   /styled-jsx/5.1.1_react@18.2.0:
     resolution: {integrity: sha512-pW7uC1l4mBZ8ugbiZrcIsiIvVx1UmTfw7UkC3Um2tmfUq9Bhk8IiyEIPl6F8agHgjzku6j0xQEZbfA5uSgSaCw==}
     engines: {node: '>= 12.0.0'}
@@ -2588,6 +2960,14 @@ packages:
       is-number: 7.0.0
     dev: true
 
+  /trim-lines/3.0.1:
+    resolution: {integrity: sha512-kRj8B+YHZCc9kQYdWfJB2/oUl9rA99qbowYYBtr4ui4mZyAQ2JpvVBd/6U2YloATfqBhBTSMhTpgBHtU0Mf3Rg==}
+    dev: false
+
+  /trough/2.1.0:
+    resolution: {integrity: sha512-AqTiAOLcj85xS7vQ8QkAV41hPDIJ71XJB4RCUrzo/1GM2CQwhkJGaf9Hgr7BOugMRpgGUrqRg/DrBDl4H40+8g==}
+    dev: false
+
   /tsconfig-paths/3.14.1:
     resolution: {integrity: sha512-fxDhWnFSLt3VuTwtvJt5fpwxBHg5AdKWMsgcPOOIilyjymcYVZoCQF8fvFRezCNfblEXmi+PcM1eYHeOAgXCOQ==}
     dependencies:
@@ -2649,6 +3029,53 @@ packages:
       which-boxed-primitive: 1.0.2
     dev: true
 
+  /unified/10.1.2:
+    resolution: {integrity: sha512-pUSWAi/RAnVy1Pif2kAoeWNBa3JVrx0MId2LASj8G+7AiHWoKZNTomq6LG326T68U7/e263X6fTdcXIy7XnF7Q==}
+    dependencies:
+      '@types/unist': 2.0.6
+      bail: 2.0.2
+      extend: 3.0.2
+      is-buffer: 2.0.5
+      is-plain-obj: 4.1.0
+      trough: 2.1.0
+      vfile: 5.3.7
+    dev: false
+
+  /unist-util-generated/2.0.1:
+    resolution: {integrity: sha512-qF72kLmPxAw0oN2fwpWIqbXAVyEqUzDHMsbtPvOudIlUzXYFIeQIuxXQCRCFh22B7cixvU0MG7m3MW8FTq/S+A==}
+    dev: false
+
+  /unist-util-is/5.2.0:
+    resolution: {integrity: sha512-Glt17jWwZeyqrFqOK0pF1Ded5U3yzJnFr8CG1GMjCWTp9zDo2p+cmD6pWbZU8AgM5WU3IzRv6+rBwhzsGh6hBQ==}
+    dev: false
+
+  /unist-util-position/4.0.4:
+    resolution: {integrity: sha512-kUBE91efOWfIVBo8xzh/uZQ7p9ffYRtUbMRZBNFYwf0RK8koUMx6dGUfwylLOKmaT2cs4wSW96QoYUSXAyEtpg==}
+    dependencies:
+      '@types/unist': 2.0.6
+    dev: false
+
+  /unist-util-stringify-position/3.0.3:
+    resolution: {integrity: sha512-k5GzIBZ/QatR8N5X2y+drfpWG8IDBzdnVj6OInRNWm1oXrzydiaAT2OQiA8DPRRZyAKb9b6I2a6PxYklZD0gKg==}
+    dependencies:
+      '@types/unist': 2.0.6
+    dev: false
+
+  /unist-util-visit-parents/5.1.3:
+    resolution: {integrity: sha512-x6+y8g7wWMyQhL1iZfhIPhDAs7Xwbn9nRosDXl7qoPTSCy0yNxnKc+hWokFifWQIDGi154rdUqKvbCa4+1kLhg==}
+    dependencies:
+      '@types/unist': 2.0.6
+      unist-util-is: 5.2.0
+    dev: false
+
+  /unist-util-visit/4.1.2:
+    resolution: {integrity: sha512-MSd8OUGISqHdVvfY9TPhyK2VdUrPgxkUtWSuMHF6XAAFuL4LokseigBnZtPnJMu+FbynTkFNnFlyjxpVKujMRg==}
+    dependencies:
+      '@types/unist': 2.0.6
+      unist-util-is: 5.2.0
+      unist-util-visit-parents: 5.1.3
+    dev: false
+
   /update-browserslist-db/1.0.10_browserslist@4.21.5:
     resolution: {integrity: sha512-OztqDenkfFkbSG+tRxBeAnCVPckDBcvibKd35yDONx6OU8N7sqgwc7rCbkJ/WcYtVRZ4ba68d6byhC21GFh7sQ==}
     hasBin: true
@@ -2678,6 +3105,33 @@ packages:
     resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
     dev: true
 
+  /uvu/0.5.6:
+    resolution: {integrity: sha512-+g8ENReyr8YsOc6fv/NVJs2vFdHBnBNdfE49rshrTzDWOlUx4Gq7KOS2GD8eqhy2j+Ejq29+SbKH8yjkAqXqoA==}
+    engines: {node: '>=8'}
+    hasBin: true
+    dependencies:
+      dequal: 2.0.3
+      diff: 5.1.0
+      kleur: 4.1.5
+      sade: 1.8.1
+    dev: false
+
+  /vfile-message/3.1.4:
+    resolution: {integrity: sha512-fa0Z6P8HUrQN4BZaX05SIVXic+7kE3b05PWAtPuYP9QLHsLKYR7/AlLW3NtOrpXRLeawpDLMsVkmk5DG0NXgWw==}
+    dependencies:
+      '@types/unist': 2.0.6
+      unist-util-stringify-position: 3.0.3
+    dev: false
+
+  /vfile/5.3.7:
+    resolution: {integrity: sha512-r7qlzkgErKjobAmyNIkkSpizsFPYiUPuJb5pNW1RB4JcYVZhs4lIbVqk8XPk033CV/1z8ss5pkax8SuhGpcG8g==}
+    dependencies:
+      '@types/unist': 2.0.6
+      is-buffer: 2.0.5
+      unist-util-stringify-position: 3.0.3
+      vfile-message: 3.1.4
+    dev: false
+
   /which-boxed-primitive/1.0.2:
     resolution: {integrity: sha512-bwZdv0AKLpplFY2KZRX6TvyuN7ojjr7lwkg6ml0roIy9YeuSr7JS372qlNW18UQYzgYK9ziGcerWqZOmEn9VNg==}
     dependencies:

public/next.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>

public/thirteen.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="40" height="31" fill="none"><g opacity=".9"><path fill="url(#a)" d="M13 .4v29.3H7V6.3h-.2L0 10.5V5L7.2.4H13Z"/><path fill="url(#b)" d="M28.8 30.1c-2.2 0-4-.3-5.7-1-1.7-.8-3-1.8-4-3.1a7.7 7.7 0 0 1-1.4-4.6h6.2c0 .8.3 1.4.7 2 .4.5 1 .9 1.7 1.2.7.3 1.6.4 2.5.4 1 0 1.7-.2 2.5-.5.7-.3 1.3-.8 1.7-1.4.4-.6.6-1.2.6-2s-.2-1.5-.7-2.1c-.4-.6-1-1-1.8-1.4-.8-.4-1.8-.5-2.9-.5h-2.7v-4.6h2.7a6 6 0 0 0 2.5-.5 4 4 0 0 0 1.7-1.3c.4-.6.6-1.3.6-2a3.5 3.5 0 0 0-2-3.3 5.6 5.6 0 0 0-4.5 0 4 4 0 0 0-1.7 1.2c-.4.6-.6 1.2-.6 2h-6c0-1.7.6-3.2 1.5-4.5 1-1.3 2.2-2.3 3.8-3C25 .4 26.8 0 28.8 0s3.8.4 5.3 1.1c1.5.7 2.7 1.7 3.6 3a7.2 7.2 0 0 1 1.2 4.2c0 1.6-.5 3-1.5 4a7 7 0 0 1-4 2.2v.2c2.2.3 3.8 1 5 2.2a6.4 6.4 0 0 1 1.6 4.6c0 1.7-.5 3.1-1.4 4.4a9.7 9.7 0 0 1-4 3.1c-1.7.8-3.7 1.1-5.8 1.1Z"/></g><defs><linearGradient id="a" x1="20" x2="20" y1="0" y2="30.1" gradientUnits="userSpaceOnUse"><stop/><stop offset="1" stop-color="#3D3D3D"/></linearGradient><linearGradient id="b" x1="20" x2="20" y1="0" y2="30.1" gradientUnits="userSpaceOnUse"><stop/><stop offset="1" stop-color="#3D3D3D"/></linearGradient></defs></svg>

public/vercel.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 283 64"><path fill="black" d="M141 16c-11 0-19 7-19 18s9 18 20 18c7 0 13-3 16-7l-7-5c-2 3-6 4-9 4-5 0-9-3-10-7h28v-3c0-11-8-18-19-18zm-9 15c1-4 4-7 9-7s8 3 9 7h-18zm117-15c-11 0-19 7-19 18s9 18 20 18c6 0 12-3 16-7l-8-5c-2 3-5 4-8 4-5 0-9-3-11-7h28l1-3c0-11-8-18-19-18zm-10 15c2-4 5-7 10-7s8 3 9 7h-19zm-39 3c0 6 4 10 10 10 4 0 7-2 9-5l8 5c-3 5-9 8-17 8-11 0-19-7-19-18s8-18 19-18c8 0 14 3 17 8l-8 5c-2-3-5-5-9-5-6 0-10 4-10 10zm83-29v46h-9V5h9zM37 0l37 64H0L37 0zm92 5-27 48L74 5h10l18 30 17-30h10zm59 12v10l-3-1c-6 0-10 4-10 10v15h-9V17h9v9c0-5 6-9 13-9z"/></svg>

ui/Card.tsx

@@ -1,8 +1,8 @@
-export default function Card({ title = 'Title', data = 'Data' }) {
+export default function Card({ title, data }: { title: string; data: string }) {
   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>
+      <h3 className="text-xl font-semibold">{title}</h3>
-      <p className="text-lg">{data}</p>
+      <p className="text-muted">{data}</p>
     </div>
   );
 }

ui/CardTable.tsx

@@ -1,237 +1,42 @@
+import { type Puzzle } from '@/lib/puzzles';
+
 import AppLink from './AppLink';
 
-export default function CardTable() {
+export default function CardTable({ puzzles }: { puzzles: Puzzle[] }) {
   return (
-    <div className="relative w-full overflow-x-auto border-2 border-highlight-primary bg-primary-700 shadow-md sm:rounded-lg">
+    <div className="relative h-96 w-full overflow-scroll">
-      <table className="w-full text-left text-sm text-muted ">
+      <table className="min-w-full table-auto rounded-lg border-2 border-highlight-primary bg-primary-700 text-left text-sm text-muted shadow-md">
-        <thead className="z-1 sticky top-0 bg-primary-600 text-xs uppercase text-white">
+        <thead className="z-1 sticky -top-1 bg-primary-600 text-xs uppercase text-white ">
           <tr>
-            <th scope="col" className="px-6 py-3">
+            <th className="px-6 py-3">Exercice</th>
-              Exercice
+            <th className="px-6 py-3">Tentative</th>
-            </th>
+            <th className="px-6 py-3">Score</th>
-            <th scope="col" className="px-6 py-3">
+            <th className="px-6 py-3">Dernier essai</th>
-              Tentative
+            <th className="px-6 py-3">
-            </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>
+        <tbody className="overflow-y-scroll">
-          <tr className="bg-primary-700 hover:bg-primary-800 ">
+          {puzzles.length &&
-            <th scope="row" className="whitespace-nowrap px-6 py-4 font-medium text-white">
+            puzzles.map((puzzle) => (
-              Exercice 1
+              <tr key={puzzle.id} className="bg-primary-700 hover:bg-primary-800 ">
-            </th>
+                <th scope="row" className="whitespace-nowrap px-6 py-4 font-medium text-white">
-            <td className="px-6 py-4">30</td>
+                  {puzzle.name}
-            <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">30</td>
-            <td className="px-6 py-4 text-right">
+                <td className="px-6 py-4">300</td>
-              <AppLink
+                <td className="px-6 py-4">10/10/2010</td>
-                href="dashboard/puzzles/1"
+                <td className="px-6 py-4 text-right">
-                className="font-medium text-brand hover:underline"
+                  <AppLink
-              >
+                    href={`dashboard/puzzles/${puzzle.id}`}
-                Reprendre
+                    className="font-medium text-brand hover:underline"
-              </AppLink>
+                  >
-            </td>
+                    Reprendre
-          </tr>
+                  </AppLink>
-          <tr className="bg-primary-700 hover:bg-primary-800 ">
+                </td>
-            <th scope="row" className="whitespace-nowrap px-6 py-4 font-medium text-white">
+              </tr>
-              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>
-          <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>
-          <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>
-          <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>
       </table>
     </div>

ui/Input.tsx

@@ -14,7 +14,7 @@ const Input = forwardRef<
     <Label label={label} description={description} required={props.required} className={className}>
       <input
         ref={ref}
-        className="w-full rounded-md border-0 bg-highlight-primary px-5 py-2.5 text-sm font-medium ring-offset-0 focus:ring-brand disabled:opacity-50"
+        className="w-full rounded-md border border-primary-600 bg-highlight-primary px-5 py-2.5 text-sm font-medium outline-none focus:border-brand focus:bg-primary-800 disabled:opacity-50"
         {...props}
       />
     </Label>

ui/Label.tsx

@@ -17,9 +17,9 @@ export default function Label({
     <label className={cn('flex flex-col gap-1 text-left', className)}>
       <span className="text-sm">
         {label}
-        {required && <span className="ml-1 text-orange-600">*</span>}
+        {required && <span className="ml-1 text-error">*</span>}
       </span>
-      {description && <span className="text-xs text-gray-500">{description}</span>}
+      {description && <span className="text-xs text-muted">{description}</span>}
       {children}
     </label>
   );

ui/Puzzle.tsx

@@ -2,11 +2,12 @@
 
 import { usePuzzle } from '@/lib/hooks/use-puzzles';
 import { notFound } from 'next/navigation';
+
 import Button from './Button';
 import Input from './Input';
 import ToHTML from './ToHTML';
 
-export default function Puzzle({ id }: { id: string }) {
+export default function Puzzle({ id }: { id: number }) {
   const { data: puzzle, isLoading } = usePuzzle(id);
 
   if (isLoading) {
@@ -21,10 +22,10 @@ export default function Puzzle({ id }: { id: string }) {
     <div className="flex h-full w-full flex-col justify-between space-y-4">
       <div className="flex flex-col space-y-2">
         <h2 className="text-4xl font-bold">{puzzle.name}</h2>
-        <p className="text-sm text-muted">Chapitre {puzzle.chapter}</p>
+        <p className="text-sm text-muted">Chapitre</p>
       </div>
       <div className="flex h-screen overflow-y-auto">
-        <ToHTML className="font-code" html={puzzle.content} />
+        <ToHTML className="font-code" data={puzzle.content} />
       </div>
       <form className="flex w-full flex-col justify-between sm:flex-row">
         <div className="flex flex-col space-x-0 sm:flex-row sm:space-x-6">

ui/Puzzles.tsx

@@ -23,10 +23,7 @@ export default function Puzzles() {
               {data?.puzzles.map((puzzle) => (
                 <AppLink key={puzzle.id} href={`/dashboard/puzzles/${puzzle.id}`}>
                   <li className="group flex justify-between rounded-md bg-primary-700 p-4 font-code hover:bg-primary-600">
-                    <div className="flex space-x-4">
+                    <span className="font-semibold">{puzzle.name}</span>
-                      <span className="">{puzzle.id}</span>
-                      <span className="font-semibold">{puzzle.name}</span>
-                    </div>
                     <Icon
                       className="-translate-x-2 transform-gpu duration-300 group-hover:translate-x-0"
                       name="arrow-right-line"

ui/ToHTML.tsx

@@ -1,12 +1,12 @@
+'use client';
+
 import { cn } from '@/lib/utils';
+import Mardown from 'react-markdown';
 
-interface ToHTMLProps {
+export default function ToHTML({ data, className }: { data: string; className?: string }) {
-  html: string;
-  className?: string;
-}
-
-export default function ToHTML({ html, className }: ToHTMLProps) {
   return (
-    <div className={cn('select-none', className)} dangerouslySetInnerHTML={{ __html: html }} />
+    <div className={cn('select-none', className)}>
+      <Mardown>{data}</Mardown>
+    </div>
   );
 }

ui/UserAuthForm.tsx

@@ -55,10 +55,7 @@ function AuthForm() {
   }
 
   return (
-    <form
+    <form className="flex flex-col justify-center space-y-4" onSubmit={handleSubmit(onSubmit)}>
-      className="bg-dark flex flex-col space-y-4 rounded-md p-6"
-      onSubmit={handleSubmit(onSubmit)}
-    >
       {!isSignIn && (
         <Input
           label="Adresse e-mail"
@@ -97,7 +94,7 @@ function AuthForm() {
         {...register('password', { required: true })}
       />
       <Button type="submit" kind="brand">
-        Se connecter
+        {isSignIn ? 'Se connecter' : "S'inscrire"}
       </Button>
       {/* {!isSignIn && (
         <p className="items-center text-sm text-gray-400">
@@ -108,9 +105,9 @@ function AuthForm() {
           .
         </p>
       )} */}
-      <p className="flex flex-col items-center text-sm text-gray-400">
+      <p className="flex flex-col items-center text-sm text-muted">
         {isSignIn ? "Vous n'avez pas de compte?" : 'Vous possédez un compte?'}{' '}
-        <AppLink className="text-white underline" href={isSignIn ? '/sign-up' : '/sign-in'}>
+        <AppLink className="text-brand underline" href={isSignIn ? '/sign-up' : '/sign-in'}>
           {isSignIn ? "S'inscrire maintenant" : 'Se connecter'}
         </AppLink>
       </p>

ui/dashboard/Sidenav.tsx

@@ -44,9 +44,9 @@ export default function Sidenav({ isOpen, toggle }: { isOpen: boolean; toggle: (
               <NavItem
                 item={{
                   name: 'Tutoriels',
-                  slug: '/dashboard/tutorials',
+                  slug: 'tutorials',
                   icon: 'question-line',
-                  disabled: false
+                  disabled: true
                 }}
                 isOpen={isOpen}
                 onClick={toggle}
@@ -74,7 +74,7 @@ function NavItem({
     <AppLink
       href={item.disabled ? '/dashboard' : `/dashboard/${item.slug}`}
       className={cn('flex justify-center rounded-md px-3 py-3 text-sm md:justify-start', {
-        'text-muted hover:text-white': !isActive,
+        'text-muted hover:text-secondary': !isActive,
         'bg-highlight-primary text-secondary': isActive,
         'text-gray-600 hover:text-gray-600': item.disabled,
         'justify-center md:justify-start': isOpen,