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

21
frontend/components/Header.tsx
View File

@ -11,28 +11,29 @@ 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 (
<header>
<nav> <nav>
<div class="bg-[#313244] flex justify-center space-x-6 p-4"> <div class="bg-[#313244] flex justify-center space-x-6 p-4">
{headerLinks.map((l) => { {headerLinks.map((l) => {
@ -41,16 +42,7 @@ export default function Header() {
<a <a
href={l.linkTo} href={l.linkTo}
target={newTab} target={newTab}
class="text-[#cdd6f4] 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"
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"> <div class="flex items-center gap-2">
{l.icon} {l.name} {l.icon} {l.name}
@ -60,5 +52,6 @@ export default function Header() {
})} })}
</div> </div>
</nav> </nav>
</header>
); );
} }