refactor(ui): add shared character avatar

src/app/_components/character-avatar.module.css

@@ -0,0 +1,15 @@
+.avatar {
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  border-radius: 9999px;
+  background: var(--color-avatar-border, #fbf3f5);
+}
+
+.avatar img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}

src/app/_components/character-avatar.tsx

@@ -0,0 +1,46 @@
+"use client";
+
+import Image from "next/image";
+import type { CSSProperties } from "react";
+
+import styles from "./character-avatar.module.css";
+
+export interface CharacterAvatarProps {
+  src?: string;
+  alt?: string;
+  className?: string;
+  size?: number | string;
+  imageSize?: number;
+  priority?: boolean;
+}
+
+export function CharacterAvatar({
+  src = "/images/chat/pic-chat-elio.png",
+  alt = "Elio Silvestri",
+  className,
+  size = 43,
+  imageSize,
+  priority = false,
+}: CharacterAvatarProps) {
+  const resolvedImageSize =
+    imageSize ?? (typeof size === "number" ? size : 96);
+  const style: CSSProperties = {
+    width: size,
+    height: size,
+  };
+
+  return (
+    <span
+      className={[styles.avatar, className].filter(Boolean).join(" ")}
+      style={style}
+    >
+      <Image
+        src={src}
+        alt={alt}
+        width={resolvedImageSize}
+        height={resolvedImageSize}
+        priority={priority}
+      />
+    </span>
+  );
+}

src/app/_components/index.ts

@@ -3,4 +3,5 @@
  */
 
 export * from "./back-button";
+export * from "./character-avatar";
 export * from "./user-message-avatar";