Avatar ✅

app/page.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Button, H1, H2, H3, H4, H5, H6, Input, Textarea, Accordion, BasicCard, ProductCard } from "@/components";
+import { Button, H1, H2, H3, H4, H5, H6, Input, Textarea, Accordion, BasicCard, ProductCard, Avatar } from "@/components";
 
 export default function page() {
   return (
@@ -17,6 +17,12 @@ export default function page() {
           <H5>This is H5</H5>
           <H6>This is H6</H6>
         </div>
+
+        <div>
+          <H3>Avatars</H3>
+          <Avatar />
+        </div>
+
         <div>
           <H3>Buttons</H3>
           <Button>Primary Button</Button>

components/Avatars/Avatar.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+
+export function Avatar() {
+  return (
+    <div className="inline-block w-14 h-14 border-2 border-black rounded-full overflow-hidden">
+      <img
+        className="w-full h-full"
+        src="https://pagedone.io/asset/uploads/1704275541.png"
+        alt="Rounded Avatar"
+      />
+    </div>
+  );
+}

components/Avatars/index.ts

@@ -0,0 +1 @@
+export * from "./Avatar"

components/index.ts

@@ -2,4 +2,5 @@ export * from "./Buttons"
 export * from "./Form"
 export * from "./Typography"
 export * from "./Accordions"
-export * from "./Cards"
+export * from "./Cards"
+export * from "./Avatars"