Resolve errors with migrated components
This commit is contained in:
adilallo
@@ -1,71 +1,180 @@
|
||||
"use client";
|
||||
|
||||
import { memo, useMemo } from "react";
|
||||
import { memo } from "react";
|
||||
import { usePathname } from "next/navigation";
|
||||
import { useSchemaData } from "../../hooks";
|
||||
import MenuBarItem from "../MenuBarItem";
|
||||
import Button from "../Button";
|
||||
import AvatarContainer from "../AvatarContainer";
|
||||
import Avatar from "../Avatar";
|
||||
import Logo from "../Logo";
|
||||
import { getAssetPath, ASSETS } from "../../../lib/assetUtils";
|
||||
import HomeHeaderView from "./HomeHeader.view";
|
||||
import type { HomeHeaderProps } from "./HomeHeader.types";
|
||||
import type { HomeHeaderProps, NavSize } from "./HomeHeader.types";
|
||||
|
||||
// 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: "homeHeaderXsmall" as const,
|
||||
showText: false,
|
||||
},
|
||||
{
|
||||
breakpoint: "hidden sm:block md:hidden",
|
||||
size: "homeHeaderSm" as const,
|
||||
showText: true,
|
||||
},
|
||||
{
|
||||
breakpoint: "hidden md:block lg:hidden",
|
||||
size: "homeHeaderMd" as const,
|
||||
showText: true,
|
||||
},
|
||||
{
|
||||
breakpoint: "hidden lg:block xl:hidden",
|
||||
size: "homeHeaderLg" as const,
|
||||
showText: true,
|
||||
},
|
||||
{
|
||||
breakpoint: "hidden xl:block",
|
||||
size: "homeHeaderXl" as const,
|
||||
showText: true,
|
||||
},
|
||||
];
|
||||
|
||||
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],
|
||||
);
|
||||
// Schema markup for site navigation (home page specific)
|
||||
const schemaData = {
|
||||
"@context": "https://schema.org",
|
||||
"@type": "WebSite",
|
||||
name: "CommunityRule",
|
||||
url: "https://communityrule.com",
|
||||
description: "Build operating manuals for successful communities",
|
||||
potentialAction: {
|
||||
"@type": "SearchAction",
|
||||
target: "https://communityrule.com/search?q={search_term_string}",
|
||||
"query-input": "required name=search_term_string",
|
||||
},
|
||||
};
|
||||
|
||||
// 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",
|
||||
},
|
||||
],
|
||||
[],
|
||||
);
|
||||
const renderNavigationItems = (size: NavSize) => {
|
||||
return navigationItems.map((item, index) => (
|
||||
<MenuBarItem
|
||||
key={index}
|
||||
href={item.href}
|
||||
size={
|
||||
item.extraPadding &&
|
||||
(size === "xsmall" ||
|
||||
size === "default" ||
|
||||
size === "home" ||
|
||||
size === "homeMd" ||
|
||||
size === "large" ||
|
||||
size === "homeXlarge")
|
||||
? size === "home" || size === "homeMd"
|
||||
? "homeMd"
|
||||
: size === "large"
|
||||
? "large"
|
||||
: size === "homeXlarge"
|
||||
? "homeXlarge"
|
||||
: "xsmallUseCases"
|
||||
: size
|
||||
}
|
||||
variant={
|
||||
size === "xsmall" ||
|
||||
size === "default" ||
|
||||
size === "home" ||
|
||||
size === "homeMd" ||
|
||||
size === "large" ||
|
||||
size === "homeXlarge"
|
||||
? "home"
|
||||
: "default"
|
||||
}
|
||||
isActive={pathname === item.href}
|
||||
ariaLabel={`Navigate to ${item.text} page`}
|
||||
>
|
||||
{item.text}
|
||||
</MenuBarItem>
|
||||
));
|
||||
};
|
||||
|
||||
// Logo configuration
|
||||
const logoConfig = useMemo(
|
||||
() => ({
|
||||
src: "/assets/logo.svg",
|
||||
alt: "Community Rule Logo",
|
||||
width: 120,
|
||||
height: 32,
|
||||
}),
|
||||
[],
|
||||
);
|
||||
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: NavSize) => {
|
||||
return (
|
||||
<MenuBarItem
|
||||
href="#"
|
||||
size={size}
|
||||
variant={size === "xsmall" || size === "default" ? "home" : "default"}
|
||||
ariaLabel="Log in to your account"
|
||||
>
|
||||
Log in
|
||||
</MenuBarItem>
|
||||
);
|
||||
};
|
||||
|
||||
const renderCreateRuleButton = (
|
||||
buttonSize: "xsmall" | "small" | "medium" | "large" | "xlarge",
|
||||
containerSize: "small" | "medium" | "large" | "xlarge",
|
||||
avatarSize: "small" | "medium" | "large" | "xlarge",
|
||||
) => {
|
||||
return (
|
||||
<Button
|
||||
size={buttonSize}
|
||||
variant="secondary"
|
||||
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 (
|
||||
<HomeHeaderView
|
||||
@@ -74,6 +183,11 @@ const HomeHeaderContainer = memo<HomeHeaderProps>(() => {
|
||||
navigationItems={navigationItems}
|
||||
avatarImages={avatarImages}
|
||||
logoConfig={logoConfig}
|
||||
renderNavigationItems={renderNavigationItems}
|
||||
renderAvatarGroup={renderAvatarGroup}
|
||||
renderLoginButton={renderLoginButton}
|
||||
renderCreateRuleButton={renderCreateRuleButton}
|
||||
renderLogo={renderLogo}
|
||||
/>
|
||||
);
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user