Merge pull request #6 from Peer-at-Code/feat/badge-home-page

badge-home-page

.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
 }

app/dashboard/badges/page.tsx

@@ -1,11 +1,25 @@
+import Badge from '@/ui/Badge';
+
 export default function Page() {
   return (
-    <div className="flex h-screen w-full">
-      <div className="m-auto">
-        <h1 className="text-center text-4xl font-bold">
-          Amuse toi avec <span className="rounded-md bg-white p-1 text-black ">Next.js</span> et{' '}
-          <span className="text-blue-500">Tailwindcss</span> !
-        </h1>
+    <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 ">
+              <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"
+                path="/assets/badges/java.png"
+                type="hard"
+                alt="je suis un alt"
+                earned
+              />
+            </div>
+          </div>
+        </div>
       </div>
     </div>
   );

app/dashboard/layout.tsx

@@ -8,4 +8,4 @@ export default function Layout({ children }: { children: ReactNode }) {
       <Wrapper>{children}</Wrapper>
     </div>
   );
-}
+}

ui/Badge.tsx

@@ -0,0 +1,37 @@
+import Image from 'next/image';
+
+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="flex w-24 flex-col space-y-2 text-center">
+      <Image
+        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>
+  );
+}