38 lines
1.3 KiB
TypeScript
38 lines
1.3 KiB
TypeScript
|
import { twMerge } from "tailwind-merge";
|
||
|
|
import { HeaderLinks } from "./(data)/links";
|
||
|
|
import HeaderLink from "./(partials)/HeaderLink";
|
||
|
|
import Row from "@/components/lib/layout/Row";
|
||
|
|
import Logo from "@/components/general/Logo";
|
||
|
|
import { Menu } from "lucide-react";
|
||
|
|
import Button from "@/components/lib/layout/Button";
|
||
|
|
import React from "react";
|
||
|
|
|
||
|
|
type Props = {
|
||
|
|
menuOpen: boolean;
|
||
|
|
setMenuOpen: React.Dispatch<React.SetStateAction<boolean>>;
|
||
|
|
};
|
||
|
|
|
||
|
|
export default function Header({ menuOpen, setMenuOpen }: Props) {
|
||
|
|
return (
|
||
|
|
<header
|
||
|
|
className={twMerge(
|
||
|
|
"h-[var(--header-height)] border-0 border-b border-white/10",
|
||
|
|
"w-full flex flex-row items-center px-6 sticky top-0",
|
||
|
|
"bg-[var(--bg-color)] z-10"
|
||
|
|
)}
|
||
|
|
>
|
||
|
|
<Row className="gap-6 ml-auto hidden md:flex">
|
||
|
|
{HeaderLinks.map((link, index) => {
|
||
|
|
return <HeaderLink key={index} link={link} />;
|
||
|
|
})}
|
||
|
|
</Row>
|
||
|
|
<Row className="flex md:hidden w-full justify-between">
|
||
|
|
<Logo size={25} />
|
||
|
|
<Button variant="ghost" onClick={() => setMenuOpen(!menuOpen)}>
|
||
|
|
<Menu />
|
||
|
|
</Button>
|
||
|
|
</Row>
|
||
|
|
</header>
|
||
|
|
);
|
||
|
|
}
|