wymiller/my-website-v2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fixed header links, adjusted anchor tag

Browse Source
This commit is contained in:
Wyatt J. Miller 2024-12-07 16:11:48 -05:00
parent eab3904e69
commit ae86f86339
1 changed files with 24 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
frontend/components/Header.tsx
View File

@ -11,54 +11,47 @@ interface HeaderLink {
const headerLinks: Array<HeaderLink> = [
{
name: "Home",
linkTo: "/",
linkTo: `${Deno.env.get("BASE_URI_WEB")}/`,
icon: <hi.HiOutlineHome />,
},
{
name: "Blog",
linkTo: "posts/",
linkTo: `${Deno.env.get("BASE_URI_WEB")}/posts`,
icon: <hi.HiOutlineBookmarkSquare />,
},
{
name: "Projects",
linkTo: "projects/",
linkTo: `${Deno.env.get("BASE_URI_WEB")}/projects`,
icon: <hi.HiOutlineWrenchScrewdriver />,
},
{
name: "Contact",
linkTo: "contact/",
linkTo: `${Deno.env.get("BASE_URI_WEB")}/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>
<header>
<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>
</header>
);
}