feat(ui): add avatar and badge components

components/Header.tsx

@@ -5,6 +5,7 @@ import { ChevronLeft, Layers } from "lucide-react";
 import { useTimer } from "@/context/TimerContext";
 import styles from "@/css/Header.module.css";
 import { useExam } from "@/context/ExamContext";
+import { Avatar, AvatarFallback } from "@/components/ui/avatar";
 
 const API_URL = "https://examjam-api.pptx704.com";
 
@@ -101,15 +102,11 @@ const Header = ({
     <header className={styles.header}>
       {displayUser && (
         <div className={styles.profile}>
-          {image && (
-            <Image
-              src={image}
-              alt="Profile"
-              width={40}
-              height={40}
-              className={styles.profileImg}
-            />
-          )}
+          <Avatar className="bg-gray-200 w-10 h-10">
+            <AvatarFallback className=" text-lg">
+              {userData?.name ? userData.name.charAt(0).toUpperCase() : ""}
+            </AvatarFallback>
+          </Avatar>
           <span className={styles.text}>
             Hello {userData?.name ? userData.name.split(" ")[0] : ""}
           </span>