feat: add badges section to Dashboard with total count and display of icons

Author: yashksaini-coder

app/dashboard/page.tsx

@@ -34,12 +34,13 @@ import {
   Code,
   Target,
   Award,
-  Hash,
+  Badge,
   Calendar,
   CheckCircle,
   Star,
   Timer
 } from "lucide-react";
+import { count } from "console";
 
 ChartJS.register(
   CategoryScale,
@@ -155,7 +156,7 @@ export default function Dashboard() {
             <div className="flex items-center justify-between">
               <div className="flex items-center gap-2">
                 <Calendar className="w-5 h-5 text-green-600" />
-                <h3 className="font-semibold">Contribution Calendar</h3>
+                <h3 className="font-semibold">Calendar</h3>
               </div>
               <span className="text-sm text-gray-500">
                 {userDetails.submitStats.totalSubmissionNum[0].count} total submissions
@@ -175,6 +176,26 @@ export default function Dashboard() {
               }}
             />
             </CardContent>
+            <div className="p-4 border-t justify-between">
+              <div className="flex items-center justify-between">
+                <div className="flex items-center gap-2">
+                  <Badge className="w-5 h-5 text-sky-600" />
+                  <h3 className="font-semibold">Badges</h3>
+                </div>
+                <span className="text-sm text-gray-500">
+                  {(userDetails.badges).length} total badges
+                </span>
+              </div>
+                <CardContent className="p-0">
+                <div className="flex justify-center items-center gap-4 px-4 py-2">
+                  {userDetails.badges.slice(0, 5).map((badge, idx) => (
+                  <div key={idx} className="flex flex-col items-center bg-gray-500 dark:bg-gray-800 rounded-lg p-3 min-w-[60px] max-w-[100px]">
+                    <img src={badge.icon} alt={`Badge ${idx + 1}`} className="w-full h-auto object-contain" />
+                  </div>
+                  ))}
+                </div>
+                </CardContent>
+            </div>
         </Card>
 
         {/* Recent Submissions Card */}