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,21 +1,24 @@
-export default function AvatarContainer({
-  children,
-  size = "small",
-  className = "",
-  ...props
-}) {
-  const sizeStyles = {
-    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]",
-  };
+import React, { memo } from "react";

-  const baseStyles = `items-center ${sizeStyles[size]} ${className}`;
+const AvatarContainer = memo(
+  ({ children, size = "small", className = "", ...props }) => {
+    const sizeStyles = {
+      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]",
+    };

-  return (
-    <div className={baseStyles} {...props}>
-      {children}
-    </div>
-  );
-}
+    const baseStyles = `items-center ${sizeStyles[size]} ${className}`;
+
+    return (
+      <div className={baseStyles} {...props}>
+        {children}
+      </div>
+    );
+  }
+);
+
+AvatarContainer.displayName = "AvatarContainer";
+
+export default AvatarContainer;