Code cleanup
This commit is contained in:
adilallo
+101
-132
@@ -6,163 +6,132 @@ import AvatarContainer from "./AvatarContainer";
|
||||
import Avatar from "./Avatar";
|
||||
|
||||
export default function Header() {
|
||||
const navigationItems = [
|
||||
{ href: "#", text: "Use cases", extraPadding: true },
|
||||
{ href: "#", text: "Learn" },
|
||||
{ href: "#", text: "About" },
|
||||
];
|
||||
|
||||
const avatarImages = [
|
||||
{ src: "/assets/Avatar_1.png", alt: "Avatar 1" },
|
||||
{ src: "/assets/Avatar_2.png", alt: "Avatar 2" },
|
||||
{ src: "/assets/Avatar_3.png", alt: "Avatar 3" },
|
||||
];
|
||||
|
||||
const logoConfig = [
|
||||
{ breakpoint: "block sm:hidden", size: "header", showText: false },
|
||||
{ breakpoint: "hidden sm:block md:hidden", size: "header", showText: true },
|
||||
{
|
||||
breakpoint: "hidden md:block lg:hidden",
|
||||
size: "headerMd",
|
||||
showText: true,
|
||||
},
|
||||
{ breakpoint: "hidden lg:block", size: "headerLg", showText: true },
|
||||
];
|
||||
|
||||
const renderNavigationItems = (size) => {
|
||||
return navigationItems.map((item, index) => (
|
||||
<MenuBarItem
|
||||
key={index}
|
||||
href={item.href}
|
||||
size={item.extraPadding && size === "xsmall" ? "xsmallUseCases" : size}
|
||||
>
|
||||
{item.text}
|
||||
</MenuBarItem>
|
||||
));
|
||||
};
|
||||
|
||||
const renderAvatarGroup = (containerSize, avatarSize) => {
|
||||
return (
|
||||
<AvatarContainer size={containerSize}>
|
||||
{avatarImages.map((avatar, index) => (
|
||||
<Avatar
|
||||
key={index}
|
||||
src={avatar.src}
|
||||
alt={avatar.alt}
|
||||
size={avatarSize}
|
||||
/>
|
||||
))}
|
||||
</AvatarContainer>
|
||||
);
|
||||
};
|
||||
|
||||
const renderLoginButton = (size, marginRight) => {
|
||||
return (
|
||||
<MenuBarItem href="#" size={size} className={marginRight}>
|
||||
Log in
|
||||
</MenuBarItem>
|
||||
);
|
||||
};
|
||||
|
||||
const renderCreateRuleButton = (
|
||||
buttonSize,
|
||||
containerSize,
|
||||
avatarSize,
|
||||
marginLeft
|
||||
) => {
|
||||
return (
|
||||
<Button size={buttonSize} className={marginLeft}>
|
||||
{renderAvatarGroup(containerSize, avatarSize)}
|
||||
<span>Create rule</span>
|
||||
</Button>
|
||||
);
|
||||
};
|
||||
|
||||
const renderLogo = (size, showText) => {
|
||||
return <Logo size={size} showText={showText} />;
|
||||
};
|
||||
|
||||
return (
|
||||
<header className="bg-[var(--color-surface-default-primary)] w-full border-b border-[var(--border-color-default-tertiary)]">
|
||||
<div className="flex items-center justify-between mx-auto max-w-[1920px] h-[40px] lg:h-[84px] 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)]">
|
||||
<div>
|
||||
<div className="block sm:hidden">
|
||||
<Logo size="header" showText={false} />
|
||||
</div>
|
||||
<div className="hidden sm:block md:hidden">
|
||||
<Logo size="header" showText={true} />
|
||||
</div>
|
||||
<div className="hidden md:block lg:hidden">
|
||||
<Logo size="headerMd" showText={true} />
|
||||
</div>
|
||||
<div className="hidden lg:block">
|
||||
<Logo size="headerLg" showText={true} />
|
||||
</div>
|
||||
{logoConfig.map((config, index) => (
|
||||
<div key={index} className={config.breakpoint}>
|
||||
{renderLogo(config.size, config.showText)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="flex items-center">
|
||||
<div className="block md:hidden">
|
||||
<div className="block sm:hidden">
|
||||
<MenuBar className="gap-[var(--spacing-scale-001)]">
|
||||
<MenuBarItem
|
||||
href="#"
|
||||
size="xsmall"
|
||||
className="px-[var(--spacing-scale-002)] py-[var(--spacing-scale-002)]"
|
||||
>
|
||||
Use cases
|
||||
</MenuBarItem>
|
||||
<MenuBarItem href="#" size="xsmall">
|
||||
Learn
|
||||
</MenuBarItem>
|
||||
<MenuBarItem href="#" size="xsmall">
|
||||
About
|
||||
</MenuBarItem>
|
||||
<MenuBarItem href="#" size="xsmall">
|
||||
Log in
|
||||
</MenuBarItem>
|
||||
{renderNavigationItems("xsmall")}
|
||||
{renderLoginButton("xsmall")}
|
||||
</MenuBar>
|
||||
</div>
|
||||
|
||||
<div className="hidden sm:block md:hidden absolute left-1/2 transform -translate-x-1/2">
|
||||
<MenuBar className="gap-[var(--spacing-scale-001)]">
|
||||
{renderNavigationItems("xsmall")}
|
||||
{renderLoginButton("xsmall")}
|
||||
</MenuBar>
|
||||
</div>
|
||||
|
||||
<div className="hidden md:block lg:hidden absolute left-1/2 transform -translate-x-1/2 ml-[var(--spacing-scale-024)]">
|
||||
<MenuBar className="gap-[var(--spacing-scale-001)]">
|
||||
<MenuBarItem
|
||||
href="#"
|
||||
size="xsmall"
|
||||
className="px-[var(--spacing-scale-002)] py-[var(--spacing-scale-002)]"
|
||||
>
|
||||
Use cases
|
||||
</MenuBarItem>
|
||||
<MenuBarItem href="#" size="xsmall">
|
||||
Learn
|
||||
</MenuBarItem>
|
||||
<MenuBarItem href="#" size="xsmall">
|
||||
About
|
||||
</MenuBarItem>
|
||||
{renderNavigationItems("xsmall")}
|
||||
</MenuBar>
|
||||
</div>
|
||||
|
||||
<div className="hidden lg:block absolute left-1/2 transform -translate-x-1/2 -ml-[var(--spacing-scale-024)]">
|
||||
<MenuBar size="large">
|
||||
<MenuBarItem
|
||||
href="#"
|
||||
size="large"
|
||||
className="px-[var(--spacing-scale-002)] py-[var(--spacing-scale-002)]"
|
||||
>
|
||||
Use cases
|
||||
</MenuBarItem>
|
||||
<MenuBarItem href="#" size="large">
|
||||
Learn
|
||||
</MenuBarItem>
|
||||
<MenuBarItem href="#" size="large">
|
||||
About
|
||||
</MenuBarItem>
|
||||
</MenuBar>
|
||||
<MenuBar size="large">{renderNavigationItems("large")}</MenuBar>
|
||||
</div>
|
||||
|
||||
<div className="hidden md:block lg:hidden">
|
||||
<MenuBarItem
|
||||
href="#"
|
||||
size="xsmall"
|
||||
className="mr-[var(--spacing-scale-010)]"
|
||||
>
|
||||
Log in
|
||||
</MenuBarItem>
|
||||
<Button size="xsmall">
|
||||
<AvatarContainer size="medium">
|
||||
<Avatar
|
||||
src="/assets/Avatar_1.png"
|
||||
alt="Avatar 1"
|
||||
size="medium"
|
||||
/>
|
||||
<Avatar
|
||||
src="/assets/Avatar_2.png"
|
||||
alt="Avatar 2"
|
||||
size="medium"
|
||||
/>
|
||||
<Avatar
|
||||
src="/assets/Avatar_3.png"
|
||||
alt="Avatar 3"
|
||||
size="medium"
|
||||
/>
|
||||
</AvatarContainer>
|
||||
<span>Create rule</span>
|
||||
</Button>
|
||||
<div className="hidden md:block lg:hidden absolute right-[var(--spacing-measures-spacing-016)]">
|
||||
<div className="flex items-center">
|
||||
{renderLoginButton("xsmall", "mr-[var(--spacing-scale-010)]")}
|
||||
{renderCreateRuleButton("xsmall", "medium", "medium")}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="hidden lg:flex items-center">
|
||||
<MenuBarItem
|
||||
href="#"
|
||||
size="large"
|
||||
className="mr-[var(--spacing-scale-012)]"
|
||||
>
|
||||
Log in
|
||||
</MenuBarItem>
|
||||
<Button size="large">
|
||||
<AvatarContainer size="xlarge">
|
||||
<Avatar
|
||||
src="/assets/Avatar_1.png"
|
||||
alt="Avatar 1"
|
||||
size="xlarge"
|
||||
/>
|
||||
<Avatar
|
||||
src="/assets/Avatar_2.png"
|
||||
alt="Avatar 2"
|
||||
size="xlarge"
|
||||
/>
|
||||
<Avatar
|
||||
src="/assets/Avatar_3.png"
|
||||
alt="Avatar 3"
|
||||
size="xlarge"
|
||||
/>
|
||||
</AvatarContainer>
|
||||
<span>Create rule</span>
|
||||
</Button>
|
||||
{renderLoginButton("large", "mr-[var(--spacing-scale-012)]")}
|
||||
{renderCreateRuleButton("large", "xlarge", "xlarge")}
|
||||
</div>
|
||||
|
||||
<div className="block md:hidden">
|
||||
<Button size="xsmall" className="ml-[var(--spacing-scale-006)]">
|
||||
<AvatarContainer size="small">
|
||||
<Avatar
|
||||
src="/assets/Avatar_1.png"
|
||||
alt="Avatar 1"
|
||||
size="small"
|
||||
/>
|
||||
<Avatar
|
||||
src="/assets/Avatar_2.png"
|
||||
alt="Avatar 2"
|
||||
size="small"
|
||||
/>
|
||||
<Avatar
|
||||
src="/assets/Avatar_3.png"
|
||||
alt="Avatar 3"
|
||||
size="small"
|
||||
/>
|
||||
</AvatarContainer>
|
||||
<span>Create rule</span>
|
||||
</Button>
|
||||
{renderCreateRuleButton("xsmall", "small", "small")}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user