From 31a126572bc905c5eb3bdcc645a7fb02621675c0 Mon Sep 17 00:00:00 2001
From: Ivan Dimitrov <ivan@idimitrov.dev>
Date: Sat, 11 Nov 2023 16:39:48 +0200
Subject: [PATCH] lighthouse

---
 src/app/components/navbar.tsx | 5 ++---
 src/app/contact/page.tsx      | 3 ++-
 src/app/globals.css           | 2 +-
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/app/components/navbar.tsx b/src/app/components/navbar.tsx
index 5d6a773..9c38739 100644
--- a/src/app/components/navbar.tsx
+++ b/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>
     )
diff --git a/src/app/contact/page.tsx b/src/app/contact/page.tsx
index f5669fc..2027d13 100644
--- a/src/app/contact/page.tsx
+++ b/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>
   )
diff --git a/src/app/globals.css b/src/app/globals.css
index 1f2b342..ecf0861 100644
--- a/src/app/globals.css
+++ b/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
 }