40 lines
1.3 KiB
TypeScript
40 lines
1.3 KiB
TypeScript
import { twMerge } from "tailwind-merge";
|
|
import { HeaderLinks } from "./(data)/links";
|
|
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";
|
|
import LinkList from "@/components/lib/elements/LinkList";
|
|
|
|
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-background-dark z-10"
|
|
)}
|
|
>
|
|
<Row className="gap-6 ml-auto hidden md:flex">
|
|
<LinkList links={HeaderLinks} />
|
|
</Row>
|
|
<Row className="flex md:hidden w-full justify-between">
|
|
<Logo size={25} />
|
|
<Button
|
|
title="Mobile Menu"
|
|
variant="ghost"
|
|
onClick={() => setMenuOpen(!menuOpen)}
|
|
>
|
|
<Menu />
|
|
</Button>
|
|
</Row>
|
|
</header>
|
|
);
|
|
}
|