From d46b82ffa6691debdb322c0c2a0cea38c3778fee Mon Sep 17 00:00:00 2001
From: Oliver Bryan <04oliverbryan@gmail.com>
Date: Tue, 23 Dec 2025 17:07:23 +0000
Subject: [PATCH] Avatar component

---
 packages/frontend/src/components/avatar.tsx            | 10 ++++++++++
 .../frontend/src/components/small-user-display.tsx     |  7 ++-----
 2 files changed, 12 insertions(+), 5 deletions(-)
 create mode 100644 packages/frontend/src/components/avatar.tsx

diff --git a/packages/frontend/src/components/avatar.tsx b/packages/frontend/src/components/avatar.tsx
new file mode 100644
index 0000000..2204534
--- /dev/null
+++ b/packages/frontend/src/components/avatar.tsx
@@ -0,0 +1,10 @@
+import type { UserRecord } from "@issue/shared";
+import { UserRound } from "lucide-react";
+
+export default function Avatar({ user, size }: { user: UserRecord; size?: number }) {
+    return (
+        <div className={`flex items-center justify-center rounded-full border w-${size || 7} h-${size || 7}`}>
+            <UserRound size={size ? size * 2 + 2 : 16} />
+        </div>
+    );
+}
diff --git a/packages/frontend/src/components/small-user-display.tsx b/packages/frontend/src/components/small-user-display.tsx
index de7a75a..5630fe4 100644
--- a/packages/frontend/src/components/small-user-display.tsx
+++ b/packages/frontend/src/components/small-user-display.tsx
@@ -1,13 +1,10 @@
 import type { UserRecord } from "@issue/shared";
-import { UserRound } from "lucide-react";
+import Avatar from "@/components/avatar";
 
 export default function SmallUserDisplay({ user }: { user: UserRecord }) {
     return (
         <div className="flex gap-2 items-center">
-            {user.name}{" "}
-            <div className="flex items-center justify-center rounded-full border w-7 h-7">
-                <UserRound size={15} />
-            </div>
+            {user.name} <Avatar user={user} />
         </div>
     );
 }