adilallo
64 lines
2.3 KiB
JavaScript
64 lines
2.3 KiB
JavaScript
import Logo from "./Logo";
|
|
import NavigationItem from "./NavigationItem";
|
|
import Button from "./Button";
|
|
import AvatarContainer from "./AvatarContainer";
|
|
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)]
|
|
sm:px-[var(--spacing-measures-spacing-032)]
|
|
sm:py-[var(--spacing-measures-spacing-012)]
|
|
lg:px-[var(--spacing-measures-spacing-120,120px)]
|
|
lg:py-[var(--spacing-measures-spacing-016,16px)]"
|
|
>
|
|
{/* Logo */}
|
|
<div>
|
|
<div className="block sm:hidden">
|
|
<Logo size="header" showText={false} />
|
|
</div>
|
|
<div className="hidden sm:block lg:hidden">
|
|
<Logo size="header" showText={false} />
|
|
</div>
|
|
<div className="hidden lg:block">
|
|
<Logo size="headerLg" showText={false} />
|
|
</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>
|
|
|
|
<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>
|
|
</div>
|
|
</header>
|
|
);
|
|
}
|