Convert from JSX to TSX

2025-12-10 22:14:17 -07:00
parent 1ad6bc85b4
commit f6a0673082
68 changed files with 1527 additions and 635 deletions
@@ -0,0 +1,39 @@
+import React, { memo } from "react";
+
+interface MenuBarProps extends React.HTMLAttributes<HTMLElement> {
+  children?: React.ReactNode;
+  className?: string;
+  size?: "xsmall" | "default" | "medium" | "large";
+}
+
+const MenuBar = memo<MenuBarProps>(
+  ({ children, className = "", size = "default", ...props }) => {
+    const sizeStyles: Record<string, string> = {
+      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)]",
+    };
+
+    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;