Fix badge

app/dashboard/badges/page.tsx

@@ -1,18 +1,22 @@
 import Badge from '@/ui/Badge';
-import Image from 'next/image';
+
 export default function Page() {
   return (
-    <div className="h-full w-f">
+    <div className="h-full w-full">
-      <div className="">
       <h1 className="text-2xl font-bold tracking-tight ">Mes badges</h1>
       <div className="flex flex-col pt-5">
-          <div className="bg-dark rounded-lg shadow-md mb-9  max-h-5/6 max-w-11/12">
+        <div className="max-h-5/6 max-w-11/12 mb-9 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="flex flex-wrap   md:space-x-0 pt-3 pb-3 ">
+            <div className="flex flex-wrap  space-x-2 pt-3 pb-3 ">
-                <Badge title={"Je suis un teste"} path={"https://cdn-icons-png.flaticon.com/512/226/226777.png"} type={""} alt={"je suis un alt"} />
+              <Badge title="Je suis un teste" path="/assets/badges/java.png" alt="je suis un alt" />
-                <Badge title={"Je suis un teste"} path={"https://cdn-icons-png.flaticon.com/512/226/226777.png"} type={"esay"} alt={"je suis un alt"} />
+              <Badge title="Je suis un teste" path="/assets/badges/java.png" alt="je suis un alt" />
-                <Badge title={"Je suis un teste"} path={"https://cdn-icons-png.flaticon.com/512/226/226777.png"} type={"hard"} alt={"je suis un alt"} />
+              <Badge
-              </div>
+                title="Salut j'ai été obtenu"
+                path="/assets/badges/java.png"
+                type="hard"
+                alt="je suis un alt"
+                earned
+              />
             </div>
           </div>
         </div>

ui/Badge.tsx

@@ -1,10 +1,37 @@
+import Image from 'next/image';
 
-export default function Badge({ title, path, alt, type }: { title: string; path: string; alt: string; type: string }) {
+import { cn } from '@/lib/utils';
+
+export type Difficulty = 'easy' | 'medium' | 'hard';
+
+export default function Badge({
+  title,
+  path,
+  alt,
+  type = 'easy',
+  earned = false
+}: {
+  title: string;
+  path: string;
+  alt: string;
+  type?: Difficulty;
+  earned?: boolean;
+}) {
   return (
-        <div className='text-center  md:w-[9%] sm:w-[15%] w-[20%] pr-3 mt-3'>
+    <div className="flex w-24 flex-col space-y-2 text-center">
-            <img src={path} alt={alt} className={`f-full w-full rounded-full border-2 lg:border-4 ${type === "hard" ? 'border-red-600' : type === 'easy' ? 'border-green-600' : 'border-yellow-600'}  `} />
+      <Image
-            <h2 className='pt-2'>{title}</h2>
+        src={path}
+        alt={alt}
+        className={cn(`rounded-full border-2 lg:border-4`, {
+          'border-green-600': type === 'easy',
+          'border-yellow-600': type === 'medium',
+          'border-red-600': type === 'hard',
+          'border-gray-600 opacity-40': !earned
+        })}
+        width={500}
+        height={500}
+      />
+      <span className="text-sm font-semibold">{earned ? title : '****'}</span>
     </div>
   );
-
 }