Adapted badges page

.gitignore

@@ -35,3 +35,6 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+# vscode
+.vscode

app/dashboard/badges/page.tsx

@@ -1,25 +1,31 @@
 import Badge from '@/ui/Badge';
 
 export default function Page() {
+  // TODO: Fetch badges from API and display them
   return (
-    <div className="h-full w-full">
-      <h1 className="text-2xl font-bold tracking-tight ">Mes badges</h1>
-      <div className="flex flex-col pt-5">
-        <div className="max-h-5/6 max-w-11/12 mb-9 rounded-lg  bg-dark shadow-md">
-          <div className="flex justify-between rounded-lg py-2 px-4">
-            <div className="flex flex-wrap  space-x-2 pt-3 pb-3 ">
+    <div className="flex h-full w-full flex-col space-y-4">
+      <div className="w-full">
+        <section className="flex flex-col space-y-4">
+          <header className="flex flex-col">
+            <h3 className="text-xl font-semibold">Mes badges</h3>
+            <p className="hidden text-muted sm:block">
+              Vos badges sont affichés ici, vous pouvez les partager avec vos amis
+            </p>
+          </header>
+          <main className="flex flex-col justify-between space-x-0 space-y-4">
+            <div className="flex space-x-2">
               <Badge title="Je suis un teste" path="/assets/badges/java.png" alt="je suis un alt" />
               <Badge title="Je suis un teste" path="/assets/badges/java.png" alt="je suis un alt" />
               <Badge
-                title="Salut j'ai été obtenu"
+                title="Peer-at What ?"
                 path="/assets/badges/java.png"
                 type="hard"
                 alt="je suis un alt"
                 earned
               />
             </div>
-          </div>
-        </div>
+          </main>
+        </section>
       </div>
     </div>
   );

app/dashboard/leaderboard/page.tsx

@@ -29,7 +29,7 @@ export default async function Page() {
   return (
     <div className="flex h-full w-full flex-col space-y-4">
       <div className="w-full">
-        <section className="flex flex-col space-y-8">
+        <section className="flex flex-col space-y-4">
           <header className="flex items-center justify-between">
             <div>
               <h3 className="text-xl font-semibold">Tableau des scores</h3>