Finish migrating components

2026-01-29 17:59:11 -07:00
parent b5735bb2ad
commit 539f6c62e3
79 changed files with 2449 additions and 1730 deletions
@@ -0,0 +1,83 @@
+"use client";
+
+import { memo, useMemo } from "react";
+import { usePathname } from "next/navigation";
+import { useSchemaData } from "../../hooks";
+import HomeHeaderView from "./HomeHeader.view";
+import type { HomeHeaderProps } from "./HomeHeader.types";
+
+const HomeHeaderContainer = memo<HomeHeaderProps>(() => {
+  const pathname = usePathname();
+  const { schemaData } = useSchemaData();
+
+  // Navigation items configuration
+  const navigationItems = useMemo(
+    () => [
+      {
+        label: "Home",
+        href: "/",
+        isActive: pathname === "/",
+      },
+      {
+        label: "Learn",
+        href: "/learn",
+        isActive: pathname === "/learn",
+      },
+      {
+        label: "Monitor",
+        href: "/monitor",
+        isActive: pathname === "/monitor",
+      },
+      {
+        label: "Blog",
+        href: "/blog",
+        isActive: pathname?.startsWith("/blog") ?? false,
+      },
+    ],
+    [pathname],
+  );
+
+  // Avatar images configuration
+  const avatarImages = useMemo(
+    () => [
+      {
+        src: "/assets/avatar-1.svg",
+        alt: "User avatar 1",
+      },
+      {
+        src: "/assets/avatar-2.svg",
+        alt: "User avatar 2",
+      },
+      {
+        src: "/assets/avatar-3.svg",
+        alt: "User avatar 3",
+      },
+    ],
+    [],
+  );
+
+  // Logo configuration
+  const logoConfig = useMemo(
+    () => ({
+      src: "/assets/logo.svg",
+      alt: "Community Rule Logo",
+      width: 120,
+      height: 32,
+    }),
+    [],
+  );
+
+  return (
+    <HomeHeaderView
+      pathname={pathname}
+      schemaData={schemaData}
+      navigationItems={navigationItems}
+      avatarImages={avatarImages}
+      logoConfig={logoConfig}
+    />
+  );
+});
+
+HomeHeaderContainer.displayName = "HomeHeader";
+
+export default HomeHeaderContainer;
@@ -0,0 +1,23 @@
+export interface HomeHeaderProps {
+  // Currently no props, but keeping interface for future extensibility
+}
+
+export interface HomeHeaderViewProps {
+  pathname: string;
+  schemaData: object;
+  navigationItems: Array<{
+    label: string;
+    href: string;
+    isActive: boolean;
+  }>;
+  avatarImages: Array<{
+    src: string;
+    alt: string;
+  }>;
+  logoConfig: {
+    src: string;
+    alt: string;
+    width: number;
+    height: number;
+  };
+}
@@ -0,0 +1,67 @@
+"use client";
+
+import { memo } from "react";
+import Script from "next/script";
+import Logo from "../Logo";
+import NavigationItem from "../NavigationItem";
+import AvatarContainer from "../AvatarContainer";
+import Button from "../Button";
+import type { HomeHeaderViewProps } from "./HomeHeader.types";
+
+function HomeHeaderView({
+  pathname,
+  schemaData,
+  navigationItems,
+  avatarImages,
+  logoConfig,
+}: HomeHeaderViewProps) {
+  return (
+    <>
+      <Script
+        id="home-header-schema"
+        type="application/ld+json"
+        dangerouslySetInnerHTML={{ __html: JSON.stringify(schemaData) }}
+      />
+      <header className="sticky top-0 z-50 bg-[var(--color-surface-default-primary)] border-b border-[var(--color-border-default-tertiary)]">
+        <div className="max-w-[1440px] mx-auto px-[var(--spacing-scale-016)] md:px-[var(--spacing-scale-032)] lg:px-[var(--spacing-scale-064)]">
+          <div className="flex items-center justify-between h-[var(--measures-sizing-064)] md:h-[var(--measures-sizing-080)]">
+            <div className="flex items-center gap-[var(--spacing-scale-040)]">
+              <Logo
+                src={logoConfig.src}
+                alt={logoConfig.alt}
+                width={logoConfig.width}
+                height={logoConfig.height}
+              />
+              <nav className="hidden md:flex items-center gap-[var(--spacing-scale-016)]">
+                {navigationItems.map((item) => (
+                  <NavigationItem
+                    key={item.href}
+                    href={item.href}
+                    isActive={item.isActive}
+                  >
+                    {item.label}
+                  </NavigationItem>
+                ))}
+              </nav>
+            </div>
+            <div className="flex items-center gap-[var(--spacing-scale-016)]">
+              <AvatarContainer avatars={avatarImages} />
+              <Button
+                href="/learn"
+                variant="primary"
+                size="medium"
+                className="hidden md:inline-flex"
+              >
+                Get Started
+              </Button>
+            </div>
+          </div>
+        </div>
+      </header>
+    </>
+  );
+}
+
+HomeHeaderView.displayName = "HomeHeaderView";
+
+export default memo(HomeHeaderView);
@@ -0,0 +1,2 @@
+export { default } from "./HomeHeader.container";
+export type { HomeHeaderProps } from "./HomeHeader.types";