chore: code refactor

components/profile/profile-view-header.tsx

@@ -6,8 +6,8 @@
  * thing visitors do, plus an action slot for an "Edit profile" button.
  */
 
-import Image from "next/image";
 import type { User } from "@/lib/auth";
+import { UserAvatar } from "@/components/ui/user-avatar";
 
 export function ProfileViewHeader({
   user,
@@ -20,7 +20,12 @@ export function ProfileViewHeader({
 }) {
   return (
     <header className="flex flex-col sm:flex-row sm:items-center gap-5 sm:gap-6">
-      <Avatar src={user.avatar_url} name={user.name} />
+      <UserAvatar
+        src={user.avatar_url}
+        name={user.name}
+        className="size-20 sm:size-22"
+        textClassName="text-2xl"
+      />
       <div className="flex-1 min-w-0">
         <div className="flex items-start justify-between gap-3">
           <div className="min-w-0">
@@ -43,29 +48,3 @@ export function ProfileViewHeader({
   );
 }
 
-function Avatar({ src, name }: { src: string | null; name: string }) {
-  if (src) {
-    return (
-      <Image
-        src={src}
-        alt={name}
-        width={88}
-        height={88}
-        className="size-20 sm:size-22 rounded-full object-cover ring-1 ring-foreground/10"
-        unoptimized
-      />
-    );
-  }
-  const initials =
-    name
-      .split(/\s+/)
-      .map((p) => p[0])
-      .slice(0, 2)
-      .join("")
-      .toUpperCase() || "?";
-  return (
-    <div className="size-20 sm:size-22 rounded-full bg-primary/15 text-primary flex items-center justify-center text-2xl font-semibold ring-1 ring-foreground/10">
-      {initials}
-    </div>
-  );
-}