refactor(nav links): style and Next.js's <Link></Link> without a component wrapper

- delete NavLink component (wrapper)

components/Footer.tsx

@@ -2,7 +2,6 @@ import Link from "next/link";
 
 import { Container } from "@/components/Container";
 // import { Logo } from '@/components/Logo'
-// import { NavLink } from '@/components/NavLink'
 import { Button } from "@/components/Button";
 
 export function Footer() {

components/Header.tsx

@@ -1,6 +1,5 @@
 import Link from "next/link";
 
-import { NavLink } from "@/components/NavLink";
 import { Container } from "@/components/Container";
 import { Button } from "@/components/Button";
 
@@ -12,13 +11,22 @@ export function Header() {
           <nav className="relative z-50 flex justify-between">
             <div className="flex items-center md:gap-x-12">
               <span className="text-2xl font-bold">
-                <Link href="/">Vojtěch Mareš</Link>
+                <Link href="/" className="py-2 px-4 rounded-full focus-visible:outline-black">Vojtěch Mareš</Link>
               </span>
               <div className="hidden md:flex md:gap-x-6">
-                {/* <NavLink href="#how-can-i-help">Jak vám můžu pomoci?</NavLink> */}
-                <NavLink href="/skoleni">Školení</NavLink>
-                {/* <NavLink href="/pripadove-studie">Případové studie</NavLink> */}
-                <NavLink href="https://vojtechmares.blog/">Blog</NavLink>
+                <Link
+                  href="/skoleni"
+                  className="inline-block rounded-full py-2 px-4 text-lg font-medium text-slate-700 hover:bg-slate-100 hover:text-black focus-visible:outline-black"
+                >
+                  Školení
+                </Link>
+                {/* <Link href="/pripadove-studie" className="inline-block rounded-full py-2 px-4 text-lg font-medium text-slate-700 hover:bg-slate-100 hover:text-black focus-visible:outline-black">Případové studie</Link> */}
+                <Link
+                  href="https://vojtechmares.blog/"
+                  className="inline-block rounded-full py-2 px-4 text-lg font-medium text-slate-700 hover:bg-slate-100 hover:text-black focus-visible:outline-black"
+                >
+                  Blog
+                </Link>
               </div>
             </div>
             <div className="flex items-center gap-x-5 md:gap-x-8">

components/NavLink.tsx

@@ -1,18 +0,0 @@
-import { ReactNode } from "react";
-import Link from "next/link";
-
-type Props = {
-  href: string;
-  children: ReactNode;
-};
-
-export function NavLink({ href, children }: Props) {
-  return (
-    <Link
-      href={href}
-      className="inline-block rounded-lg py-1 px-2 text-lg font-medium text-slate-700 hover:bg-slate-100 hover:text-black"
-    >
-      {children}
-    </Link>
-  );
-}