chore: code refactor

components/profile/profile-sidebar.tsx

@@ -14,9 +14,9 @@
 
 import { useState } from "react";
 import Link from "next/link";
-import Image from "next/image";
 import { usePathname, useRouter } from "next/navigation";
 import { User as UserIcon, FolderOpen, Bookmark, LogOut, Menu } from "lucide-react";
+import { UserAvatar } from "@/components/ui/user-avatar";
 import {
   Drawer,
   DrawerContent,
@@ -98,7 +98,7 @@ function MobileSidebar({ user }: { user: User }) {
 function SidebarHeader({ user }: { user: User }) {
   return (
     <div className="flex items-center gap-3 px-3 py-3 rounded-lg bg-card ring-1 ring-foreground/10">
-      <Avatar src={user.avatar_url} name={user.name} />
+      <UserAvatar src={user.avatar_url} name={user.name} />
       <div className="min-w-0">
         <p className="text-sm font-semibold text-foreground truncate">
           {user.name}
@@ -161,29 +161,3 @@ function SidebarFooter() {
   );
 }
 
-function Avatar({ src, name }: { src: string | null; name: string }) {
-  if (src) {
-    return (
-      <Image
-        src={src}
-        alt={name}
-        width={40}
-        height={40}
-        className="size-10 rounded-full object-cover ring-1 ring-foreground/10 shrink-0"
-        unoptimized
-      />
-    );
-  }
-  const initials =
-    name
-      .split(/\s+/)
-      .map((p) => p[0])
-      .slice(0, 2)
-      .join("")
-      .toUpperCase() || "?";
-  return (
-    <div className="size-10 rounded-full bg-primary/15 text-primary flex items-center justify-center text-sm font-semibold ring-1 ring-foreground/10 shrink-0">
-      {initials}
-    </div>
-  );
-}