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,248 @@
+"use client";
+
+import React, { memo } from "react";
+import { usePathname } from "next/navigation";
+import Logo from "./Logo";
+import MenuBar from "./MenuBar";
+import MenuBarItem from "./MenuBarItem";
+import Button from "./Button";
+import AvatarContainer from "./AvatarContainer";
+import Avatar from "./Avatar";
+import { getAssetPath, ASSETS } from "../../lib/assetUtils";
+
+// Configuration data for testing
+export const navigationItems = [
+  { href: "#", text: "Use cases", extraPadding: true },
+  { href: "/learn", text: "Learn" },
+  { href: "#", text: "About" },
+];
+
+export const avatarImages = [
+  { src: getAssetPath(ASSETS.AVATAR_1), alt: "Avatar 1" },
+  { src: getAssetPath(ASSETS.AVATAR_2), alt: "Avatar 2" },
+  { src: getAssetPath(ASSETS.AVATAR_3), alt: "Avatar 3" },
+];
+
+export const logoConfig = [
+  { breakpoint: "block sm:hidden", size: "header" as const, showText: false },
+  {
+    breakpoint: "hidden sm:block md:hidden",
+    size: "header" as const,
+    showText: true,
+  },
+  {
+    breakpoint: "hidden md:block lg:hidden",
+    size: "headerMd" as const,
+    showText: true,
+  },
+  {
+    breakpoint: "hidden lg:block xl:hidden",
+    size: "headerLg" as const,
+    showText: true,
+  },
+  { breakpoint: "hidden xl:block", size: "headerXl" as const, showText: true },
+];
+
+const Header = memo(() => {
+  const pathname = usePathname();
+
+  // Schema markup for site navigation
+  const schemaData = {
+    "@context": "https://schema.org",
+    "@type": "WebSite",
+    name: "CommunityRule",
+    url: "https://communityrule.com",
+    potentialAction: {
+      "@type": "SearchAction",
+      target: "https://communityrule.com/search?q={search_term_string}",
+      "query-input": "required name=search_term_string",
+    },
+  };
+
+  const renderNavigationItems = (size: string) => {
+    return navigationItems.map((item, index) => (
+      <MenuBarItem
+        key={index}
+        href={item.href}
+        size={item.extraPadding && size === "xsmall" ? "xsmallUseCases" : size}
+        isActive={pathname === item.href}
+        ariaLabel={`Navigate to ${item.text} page`}
+      >
+        {item.text}
+      </MenuBarItem>
+    ));
+  };
+
+  const renderAvatarGroup = (
+    containerSize: "small" | "medium" | "large" | "xlarge",
+    avatarSize: "small" | "medium" | "large" | "xlarge"
+  ) => {
+    return (
+      <AvatarContainer size={containerSize}>
+        {avatarImages.map((avatar, index) => (
+          <Avatar
+            key={index}
+            src={avatar.src}
+            alt={avatar.alt}
+            size={avatarSize}
+          />
+        ))}
+      </AvatarContainer>
+    );
+  };
+
+  const renderLoginButton = (size: string) => {
+    return (
+      <MenuBarItem href="#" size={size} ariaLabel="Log in to your account">
+        Log in
+      </MenuBarItem>
+    );
+  };
+
+  const renderCreateRuleButton = (
+    buttonSize: string,
+    containerSize: "small" | "medium" | "large" | "xlarge",
+    avatarSize: "small" | "medium" | "large" | "xlarge"
+  ) => {
+    return (
+      <Button
+        size={buttonSize}
+        ariaLabel="Create a new rule with avatar decoration"
+      >
+        {renderAvatarGroup(containerSize, avatarSize)}
+        <span>Create rule</span>
+      </Button>
+    );
+  };
+
+  const renderLogo = (
+    size:
+      | "default"
+      | "homeHeaderXsmall"
+      | "homeHeaderSm"
+      | "homeHeaderMd"
+      | "homeHeaderLg"
+      | "homeHeaderXl"
+      | "header"
+      | "headerMd"
+      | "headerLg"
+      | "headerXl"
+      | "footer"
+      | "footerLg",
+    showText: boolean
+  ) => {
+    return <Logo size={size} showText={showText} />;
+  };
+
+  return (
+    <>
+      <script
+        type="application/ld+json"
+        dangerouslySetInnerHTML={{ __html: JSON.stringify(schemaData) }}
+      />
+      <header
+        className="sticky top-0 z-50 bg-[var(--color-surface-default-primary)] w-full border-b border-[var(--border-color-default-tertiary)]"
+        role="banner"
+        aria-label="Main navigation header"
+      >
+        <nav
+          className="flex items-center justify-between mx-auto h-[40px] lg:h-[84px] xl:h-[88px] px-[var(--spacing-measures-spacing-016)] py-[var(--spacing-measures-spacing-008)] lg:px-[var(--spacing-measures-spacing-64,64px)] lg:py-[var(--spacing-measures-spacing-016,16px)]"
+          role="navigation"
+          aria-label="Main navigation"
+        >
+          {/* Logo - Consistent left positioning across all breakpoints */}
+          <div className="flex items-center">
+            {logoConfig.map((config, index) => (
+              <div
+                key={index}
+                className={config.breakpoint}
+                data-testid="logo-wrapper"
+              >
+                {renderLogo(config.size, config.showText)}
+              </div>
+            ))}
+          </div>
+
+          {/* Navigation Links - Consistent center positioning */}
+          <div className="flex items-center">
+            {/* XSmall breakpoint - Navigation items moved to right section */}
+            <div className="block sm:hidden" data-testid="nav-xs">
+              {/* Empty for XSmall - navigation moved to right */}
+            </div>
+
+            {/* Small breakpoint - All items grouped together, centered */}
+            <div className="hidden sm:block md:hidden" data-testid="nav-sm">
+              <MenuBar size="default">
+                {renderNavigationItems("xsmall")}
+                {renderLoginButton("xsmall")}
+              </MenuBar>
+            </div>
+
+            <div className="hidden md:block lg:hidden" data-testid="nav-md">
+              <MenuBar size="default">
+                {renderNavigationItems("xsmall")}
+              </MenuBar>
+            </div>
+
+            <div className="hidden lg:block xl:hidden" data-testid="nav-lg">
+              <MenuBar size="large">{renderNavigationItems("large")}</MenuBar>
+            </div>
+
+            <div className="hidden xl:block" data-testid="nav-xl">
+              <MenuBar size="large">{renderNavigationItems("xlarge")}</MenuBar>
+            </div>
+          </div>
+
+          {/* Authentication Elements - Consistent right alignment across all breakpoints */}
+          <div className="flex items-center">
+            {/* XSmall breakpoint - All navigation items + Create Rule button */}
+            <div className="block sm:hidden" data-testid="auth-xs">
+              <div className="flex items-center gap-[var(--spacing-scale-001)]">
+                <MenuBar size="default">
+                  {renderNavigationItems("xsmall")}
+                  {renderLoginButton("xsmall")}
+                </MenuBar>
+                {renderCreateRuleButton("xsmall", "small", "small")}
+              </div>
+            </div>
+
+            {/* Small breakpoint - Only Create Rule button */}
+            <div className="hidden sm:block md:hidden" data-testid="auth-sm">
+              <div className="flex items-center gap-[var(--spacing-scale-004)]">
+                {renderCreateRuleButton("xsmall", "small", "small")}
+              </div>
+            </div>
+
+            {/* Medium breakpoint */}
+            <div className="hidden md:block lg:hidden" data-testid="auth-md">
+              <div className="flex items-center gap-[var(--spacing-measures-spacing-010)]">
+                <MenuBar size="default">{renderLoginButton("xsmall")}</MenuBar>
+                {renderCreateRuleButton("xsmall", "medium", "medium")}
+              </div>
+            </div>
+
+            {/* Large breakpoint */}
+            <div className="hidden lg:block xl:hidden" data-testid="auth-lg">
+              <div className="flex items-center gap-[var(--spacing-measures-spacing-004)]">
+                <MenuBar size="large">{renderLoginButton("large")}</MenuBar>
+                {renderCreateRuleButton("large", "xlarge", "xlarge")}
+              </div>
+            </div>
+
+            {/* XLarge breakpoint */}
+            <div className="hidden xl:block" data-testid="auth-xl">
+              <div className="flex items-center gap-[var(--spacing-measures-spacing-004)]">
+                <MenuBar size="large">{renderLoginButton("xlarge")}</MenuBar>
+                {renderCreateRuleButton("xlarge", "xlarge", "xlarge")}
+              </div>
+            </div>
+          </div>
+        </nav>
+      </header>
+    </>
+  );
+});
+
+Header.displayName = "Header";
+
+export default Header;