Add memo optimization

2025-10-07 16:50:33 -06:00
parent e3861f6857
commit 2ed878af81
37 changed files with 1852 additions and 1480 deletions
@@ -1,18 +1,20 @@
-export default function Avatar({
-  src,
-  alt,
-  size = "small",
-  className = "",
-  ...props
-}) {
-  const sizeStyles = {
-    small: "w-[var(--spacing-scale-016)] h-[var(--spacing-scale-016)]",
-    medium: "w-[18px] h-[18px]",
-    large: "w-[var(--spacing-scale-024)] h-[var(--spacing-scale-024)]",
-    xlarge: "w-[var(--spacing-scale-032)] h-[var(--spacing-scale-032)]",
-  };
+import React, { memo } from "react";

-  const baseStyles = `rounded-[var(--radius-measures-radius-full)] object-cover ${sizeStyles[size]} ${className}`;
+const Avatar = memo(
+  ({ src, alt, size = "small", className = "", ...props }) => {
+    const sizeStyles = {
+      small: "w-[var(--spacing-scale-016)] h-[var(--spacing-scale-016)]",
+      medium: "w-[18px] h-[18px]",
+      large: "w-[var(--spacing-scale-024)] h-[var(--spacing-scale-024)]",
+      xlarge: "w-[var(--spacing-scale-032)] h-[var(--spacing-scale-032)]",
+    };

-  return <img src={src} alt={alt} className={baseStyles} {...props} />;
-}
+    const baseStyles = `rounded-[var(--radius-measures-radius-full)] object-cover ${sizeStyles[size]} ${className}`;
+
+    return <img src={src} alt={alt} className={baseStyles} {...props} />;
+  }
+);
+
+Avatar.displayName = "Avatar";
+
+export default Avatar;