65 lines
1.4 KiB
TypeScript
65 lines
1.4 KiB
TypeScript
import * as hi from "jsr:@preact-icons/hi2";
|
|
|
|
interface HeaderLink {
|
|
name: string;
|
|
linkTo: string;
|
|
// deno-lint-ignore no-explicit-any
|
|
icon: any;
|
|
newTab?: boolean;
|
|
}
|
|
|
|
const headerLinks: Array<HeaderLink> = [
|
|
{
|
|
name: "Home",
|
|
linkTo: "/",
|
|
icon: <hi.HiOutlineHome />,
|
|
},
|
|
{
|
|
name: "Blog",
|
|
linkTo: "posts/",
|
|
icon: <hi.HiOutlineBookmarkSquare />,
|
|
},
|
|
{
|
|
name: "Projects",
|
|
linkTo: "projects/",
|
|
icon: <hi.HiOutlineWrenchScrewdriver />,
|
|
},
|
|
{
|
|
name: "Contact",
|
|
linkTo: "contact/",
|
|
icon: <hi.HiOutlinePencilSquare />,
|
|
},
|
|
];
|
|
|
|
export default function Header() {
|
|
return (
|
|
<nav>
|
|
<div class="bg-[#313244] flex justify-center space-x-6 p-4">
|
|
{headerLinks.map((l) => {
|
|
const newTab = l.newTab ? "_blank" : "_self";
|
|
return (
|
|
<a
|
|
href={l.linkTo}
|
|
target={newTab}
|
|
class="text-[#cdd6f4]
|
|
text-lg
|
|
font-medium
|
|
transition-all
|
|
duration-300
|
|
ease-in-out
|
|
hover:text-[#cba6f7]
|
|
hover:drop-shadow-[0_0_20px_rgba(96,165,250,0.7)]
|
|
hover:scale-110
|
|
cursor-pointer"
|
|
>
|
|
<div class="flex items-center gap-2">
|
|
{l.icon} {l.name}
|
|
</div>
|
|
</a>
|
|
);
|
|
})}
|
|
</div>
|
|
</nav>
|
|
);
|
|
}
|