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,30 +1,33 @@
-export default function MenuBar({
-  children,
-  className = "",
-  size = "default",
-  ...props
-}) {
-  const sizeStyles = {
-    xsmall:
-      "px-[var(--spacing-scale-004)] py-[var(--spacing-scale-004)] gap-[var(--spacing-scale-001)] rounded-[4px]",
-    default:
-      "px-[var(--spacing-scale-004)] py-[var(--spacing-scale-004)] gap-[var(--spacing-scale-001)]",
-    medium:
-      "px-[var(--spacing-scale-004)] py-[var(--spacing-scale-004)] gap-[var(--spacing-scale-004)]",
-    large:
-      "px-[var(--spacing-scale-004)] py-[var(--spacing-scale-004)] gap-[var(--spacing-scale-012)]",
-  };
+import React, { memo } from "react";

-  const baseStyles = `flex items-center ${sizeStyles[size]} ${className}`;
+const MenuBar = memo(
+  ({ children, className = "", size = "default", ...props }) => {
+    const sizeStyles = {
+      xsmall:
+        "px-[var(--spacing-scale-004)] py-[var(--spacing-scale-004)] gap-[var(--spacing-scale-001)] rounded-[4px]",
+      default:
+        "px-[var(--spacing-scale-004)] py-[var(--spacing-scale-004)] gap-[var(--spacing-scale-001)]",
+      medium:
+        "px-[var(--spacing-scale-004)] py-[var(--spacing-scale-004)] gap-[var(--spacing-scale-004)]",
+      large:
+        "px-[var(--spacing-scale-004)] py-[var(--spacing-scale-004)] gap-[var(--spacing-scale-012)]",
+    };

-  return (
-    <nav
-      className={baseStyles}
-      role="menubar"
-      aria-label="Main navigation menu"
-      {...props}
-    >
-      {children}
-    </nav>
-  );
-}
+    const baseStyles = `flex items-center ${sizeStyles[size]} ${className}`;
+
+    return (
+      <nav
+        className={baseStyles}
+        role="menubar"
+        aria-label="Main navigation menu"
+        {...props}
+      >
+        {children}
+      </nav>
+    );
+  }
+);
+
+MenuBar.displayName = "MenuBar";
+
+export default MenuBar;