lighthouse

src/app/components/navbar.tsx

@@ -1,14 +1,13 @@
 "use client"
 import Link from "next/link";
 import { usePathname } from "next/navigation";
-import { ReactNode } from "react";
 
 export default function Navbar() {
   const path = usePathname()
 
-  const link = (text: ReactNode, href: string) => {
+  const link = (text: string, href: string) => {
     return (
-      <Link aria-selected={path === href} className="btn" aria-label="Home" href={href}>
+      <Link data-selected={path === href} className="btn" aria-label={text} href={href}>
         {text}
       </Link>
     )

src/app/contact/page.tsx

@@ -4,11 +4,12 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 export default function Contact() {
 
   const email = "ivan@idimitrov.dev";
+  const mailto = `mailto:${email}`
 
   return (
     <div className="w-full h-full p-2 grid place-content-center">
       <div className="flex flex-row gap-4">
-        <a href={`mailto:${email}`}><FontAwesomeIcon icon={faEnvelope}/></a>
+        <a aria-label={mailto} href={mailto}><FontAwesomeIcon icon={faEnvelope} /></a>
       </div>
     </div>
   )

src/app/globals.css

@@ -15,6 +15,6 @@ svg {
 }
 
 .btn {
-  @apply bg-gray-900 text-gray-300 hover:bg-gray-700 hover:text-white rounded-md px-3 py-2 text-sm font-medium aria-selected:bg-gray-600
+  @apply bg-gray-900 text-gray-300 hover:bg-gray-700 hover:text-white rounded-md px-3 py-2 text-sm font-medium data-[selected=true]:bg-gray-600
 }