Component cleanup

app/components/asset/Avatar/Avatar.tsx

@@ -0,0 +1,34 @@
+import { memo } from "react";
+
+export type AvatarSizeValue = "small" | "medium" | "large" | "xlarge";
+
+interface AvatarProps extends React.ImgHTMLAttributes<HTMLImageElement> {
+  src: string;
+  alt: string;
+  size?: AvatarSizeValue;
+  className?: string;
+}
+
+const Avatar = memo<AvatarProps>(
+  ({ src, alt, size: sizeProp = "small", className = "", ...props }) => {
+    const size = sizeProp;
+    const sizeStyles: Record<string, string> = {
+      small:
+        "w-[var(--spacing-scale-016)] h-[var(--spacing-scale-016)] border-[1.5px] border-[#FFFFFF4D] border-solid",
+      medium: "w-[var(--spacing-scale-018)] h-[var(--spacing-scale-018)]",
+      large: "w-[var(--spacing-scale-024)] h-[var(--spacing-scale-024)]",
+      xlarge: "w-[var(--spacing-scale-032)] h-[var(--spacing-scale-032)]",
+    };
+
+    const baseStyles = `rounded-[var(--radius-measures-radius-full)] object-cover box-border ${sizeStyles[size]} ${className}`;
+
+    return (
+      /* eslint-disable-next-line @next/next/no-img-element -- avatar image from URL */
+      <img src={src} alt={alt} className={baseStyles} {...props} />
+    );
+  },
+);
+
+Avatar.displayName = "Avatar";
+
+export default Avatar;

app/components/asset/Avatar/index.tsx

@@ -0,0 +1,2 @@
+export { default } from "./Avatar";
+export type { AvatarSizeValue } from "./Avatar";

app/components/asset/AvatarContainer/AvatarContainer.tsx

@@ -0,0 +1,33 @@
+import { memo } from "react";
+
+export type AvatarContainerSizeValue = "small" | "medium" | "large" | "xlarge";
+
+interface AvatarContainerProps extends React.HTMLAttributes<HTMLDivElement> {
+  children?: React.ReactNode;
+  size?: AvatarContainerSizeValue;
+  className?: string;
+}
+
+const AvatarContainer = memo<AvatarContainerProps>(
+  ({ children, size: sizeProp = "small", className = "", ...props }) => {
+    const size = sizeProp;
+    const sizeStyles: Record<string, string> = {
+      small: "flex -space-x-[var(--spacing-scale-008)]",
+      medium: "flex -space-x-[9px]",
+      large: "flex -space-x-[var(--spacing-scale-010)]",
+      xlarge: "flex -space-x-[13px]",
+    };
+
+    const baseStyles = `items-center ${sizeStyles[size]} ${className}`;
+
+    return (
+      <div className={baseStyles} {...props}>
+        {children}
+      </div>
+    );
+  },
+);
+
+AvatarContainer.displayName = "AvatarContainer";
+
+export default AvatarContainer;

app/components/asset/AvatarContainer/index.tsx

@@ -0,0 +1,2 @@
+export { default } from "./AvatarContainer";
+export type { AvatarContainerSizeValue } from "./AvatarContainer";

app/components/asset/icon/Icon.tsx

@@ -1,14 +1,15 @@
 "use client";
 
+import Image from "next/image";
 import { memo } from "react";
-import ArrowBackIcon from "./icon/arrow_back.svg";
-import ContentCopyIcon from "./icon/content_copy.svg";
-import EditIcon from "./icon/edit.svg";
-import ExclamationIcon from "./icon/exclamation.svg";
-import ChevronRightIcon from "./icon/chevron_right.svg";
-import LogOutIcon from "./icon/log_out.svg";
-import MailIcon from "./icon/mail.svg";
-import WarningIcon from "./icon/warning.svg";
+import ArrowBackIcon from "./arrow_back.svg";
+import ContentCopyIcon from "./content_copy.svg";
+import EditIcon from "./edit.svg";
+import ExclamationIcon from "./exclamation.svg";
+import ChevronRightIcon from "./chevron_right.svg";
+import LogOutIcon from "./log_out.svg";
+import MailIcon from "./mail.svg";
+import WarningIcon from "./warning.svg";
 
 export const ICON_NAME_OPTIONS = [
   "arrow_back",
@@ -75,12 +76,13 @@ function IconComponent({
   // Turbopack/webpack mismatch: `.svg` may be a URL string instead of SVGR output.
   if (typeof resolved === "string") {
     return (
-      <img
+      <Image
         src={resolved}
         width={size}
         height={size}
         className={className}
         alt=""
+        unoptimized
         aria-hidden={ariaHidden}
       />
     );

app/components/asset/icon/index.tsx

@@ -0,0 +1,3 @@
+export { default } from "./Icon";
+export { ICON_NAME_OPTIONS } from "./Icon";
+export type { IconName, IconProps } from "./Icon";

app/components/asset/index.tsx

@@ -1,3 +0,0 @@
-export { default as Icon, ICON_NAME_OPTIONS } from "./Icon";
-export type { IconName, IconProps } from "./Icon";
-export { default as Logo } from "./logo";