Header #3
+97
-35
@@ -1,5 +1,6 @@
|
||||
import Logo from "./Logo";
|
||||
import NavigationItem from "./NavigationItem";
|
||||
import MenuBar from "./MenuBar";
|
||||
import MenuBarItem from "./MenuBarItem";
|
||||
import Button from "./Button";
|
||||
import AvatarContainer from "./AvatarContainer";
|
||||
import Avatar from "./Avatar";
|
||||
@@ -7,50 +8,111 @@ import Avatar from "./Avatar";
|
||||
export default function Header() {
|
||||
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]
|
||||
px-[var(--spacing-measures-spacing-016)]
|
||||
py-[var(--spacing-measures-spacing-008)]
|
||||
lg:px-[var(--spacing-measures-spacing-120,120px)]
|
||||
lg:py-[var(--spacing-measures-spacing-016,16px)]"
|
||||
>
|
||||
{/* Logo */}
|
||||
<div className="flex items-center justify-between mx-auto max-w-[1920px] h-[40px] px-[var(--spacing-measures-spacing-016)] py-[var(--spacing-measures-spacing-008)] lg:px-[var(--spacing-measures-spacing-120,120px)] 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">
|
||||
<div className="hidden sm:block md:hidden">
|
||||
<Logo size="header" showText={true} />
|
||||
</div>
|
||||
<div className="hidden md:block">
|
||||
<Logo size="headerMd" showText={true} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Navigation */}
|
||||
<div className="flex items-center">
|
||||
<nav className="flex items-center space-x-[var(--spacing-scale-002)]">
|
||||
<NavigationItem href="#" size="xsmall">
|
||||
Use cases
|
||||
</NavigationItem>
|
||||
<NavigationItem href="#" size="xsmall">
|
||||
Learn
|
||||
</NavigationItem>
|
||||
<NavigationItem href="#" size="xsmall">
|
||||
About
|
||||
</NavigationItem>
|
||||
<NavigationItem href="#" size="xsmall">
|
||||
Log in
|
||||
</NavigationItem>
|
||||
</nav>
|
||||
<div className="block md: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>
|
||||
</MenuBar>
|
||||
</div>
|
||||
|
||||
<Button size="xsmall" className="ml-[var(--spacing-scale-006)]">
|
||||
{/* Avatar Container */}
|
||||
<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>
|
||||
<div className="hidden md:block 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>
|
||||
</MenuBar>
|
||||
</div>
|
||||
|
||||
<div className="hidden md:flex items-center">
|
||||
<MenuBarItem
|
||||
href="#"
|
||||
size="xsmall"
|
||||
className="mr-[var(--spacing-scale-006)]"
|
||||
>
|
||||
Log in
|
||||
</MenuBarItem>
|
||||
<Button size="xsmall">
|
||||
<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>
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
@@ -12,9 +12,16 @@ export default function Logo({ size = "default", showText = true }) {
|
||||
containerHeight: "h-[20.85px]",
|
||||
gap: "gap-[2.11px]",
|
||||
textSize: "text-[11.57px]",
|
||||
lineHeight: "leading-[14px]",
|
||||
lineHeight: "leading-[14.24px]",
|
||||
iconSize: "w-[14.24px] h-[14.24px]",
|
||||
},
|
||||
headerMd: {
|
||||
containerHeight: "h-[17.91px]",
|
||||
gap: "gap-[6.51px]",
|
||||
textSize: "text-[17.89px]",
|
||||
lineHeight: "leading-[22.02px]",
|
||||
iconSize: "w-[22.02px] h-[22.02px]",
|
||||
},
|
||||
headerLg: {
|
||||
containerHeight: "h-[36px]",
|
||||
gap: "gap-[7px]",
|
||||
|
||||
@@ -0,0 +1,9 @@
|
||||
export default function MenuBar({ children, className = "", ...props }) {
|
||||
const baseStyles = `flex items-center px-[var(--spacing-scale-004)] py-[var(--spacing-scale-004)] gap-[var(--spacing-scale-001)] ${className}`;
|
||||
|
||||
return (
|
||||
<nav className={baseStyles} {...props}>
|
||||
{children}
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,51 @@
|
||||
export default function MenuBarItem({
|
||||
href = "#",
|
||||
children,
|
||||
variant = "default",
|
||||
size = "default",
|
||||
className = "",
|
||||
disabled = false,
|
||||
...props
|
||||
}) {
|
||||
const variantStyles = {
|
||||
default:
|
||||
"bg-transparent text-[var(--color-content-default-brand-primary)] border border-transparent hover:bg-[var(--color-surface-default-tertiary)] hover:text-[var(--color-content-default-brand-primary)] active:bg-transparent active:text-[var(--color-content-default-brand-primary)] active:border-[var(--color-content-default-brand-primary)] disabled:bg-[var(--color-surface-default-tertiary)] disabled:text-[var(--color-content-default-tertiary)] disabled:border-[var(--color-content-default-tertiary)] disabled:opacity-50 disabled:cursor-not-allowed",
|
||||
};
|
||||
|
||||
const sizeStyles = {
|
||||
default:
|
||||
"px-[var(--spacing-measures-spacing-016)] py-[var(--spacing-measures-spacing-016)] gap-[var(--spacing-scale-004)]",
|
||||
xsmall:
|
||||
"px-[var(--spacing-scale-004)] py-[var(--spacing-scale-002)] gap-[var(--spacing-scale-004)]",
|
||||
};
|
||||
|
||||
const textStyles = {
|
||||
default:
|
||||
"font-['Inter'] text-[10px] leading-[12px] font-medium tracking-[0%]",
|
||||
xsmall:
|
||||
"font-['Inter'] text-[10px] leading-[12px] font-medium tracking-[0%]",
|
||||
};
|
||||
|
||||
const baseStyles = `inline-flex items-center ${sizeStyles[size]} rounded-[var(--radius-measures-radius-full)] ${textStyles[size]} transition-all duration-200 cursor-pointer`;
|
||||
|
||||
let finalVariant = variant;
|
||||
if (disabled) {
|
||||
finalVariant = "default";
|
||||
}
|
||||
|
||||
const combinedStyles = `${baseStyles} ${variantStyles[finalVariant]} ${className}`;
|
||||
|
||||
if (disabled) {
|
||||
return (
|
||||
<span className={combinedStyles} {...props}>
|
||||
{children}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<a href={href} className={combinedStyles} {...props}>
|
||||
{children}
|
||||
</a>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user