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> = [ const headerLinks: Array<HeaderLink> = [
{ {
name: "Home", name: "Home",
linkTo: "/", linkTo: `${Deno.env.get("BASE_URI_WEB")}/`,
icon: <hi.HiOutlineHome />, icon: <hi.HiOutlineHome />,
}, },
{ {
name: "Blog", name: "Blog",
linkTo: "posts/", linkTo: `${Deno.env.get("BASE_URI_WEB")}/posts`,
icon: <hi.HiOutlineBookmarkSquare />, icon: <hi.HiOutlineBookmarkSquare />,
}, },
{ {
name: "Projects", name: "Projects",
linkTo: "projects/", linkTo: `${Deno.env.get("BASE_URI_WEB")}/projects`,
icon: <hi.HiOutlineWrenchScrewdriver />, icon: <hi.HiOutlineWrenchScrewdriver />,
}, },
{ {
name: "Contact", name: "Contact",
linkTo: "contact/", linkTo: `${Deno.env.get("BASE_URI_WEB")}/contact`,
icon: <hi.HiOutlinePencilSquare />, icon: <hi.HiOutlinePencilSquare />,
}, },
]; ];
export default function Header() { export default function Header() {
return ( return (
<nav> <header>
<div class="bg-[#313244] flex justify-center space-x-6 p-4"> <nav>
{headerLinks.map((l) => { <div class="bg-[#313244] flex justify-center space-x-6 p-4">
const newTab = l.newTab ? "_blank" : "_self"; {headerLinks.map((l) => {
return ( const newTab = l.newTab ? "_blank" : "_self";
<a return (
href={l.linkTo} <a
target={newTab} href={l.linkTo}
class="text-[#cdd6f4] target={newTab}
text-lg 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"
font-medium >
transition-all <div class="flex items-center gap-2">
duration-300 {l.icon} {l.name}
ease-in-out </div>
hover:text-[#cba6f7] </a>
hover:drop-shadow-[0_0_20px_rgba(96,165,250,0.7)] );
hover:scale-110 })}
cursor-pointer" </div>
> </nav>
<div class="flex items-center gap-2"> </header>
{l.icon} {l.name}
</div>
</a>
);
})}
</div>
</nav>
); );
} }