From 0c59f086279f54051a45ad94cdea2c321475f0c7 Mon Sep 17 00:00:00 2001
From: Vojtech Mares <iam@vojtechmares.com>
Date: Wed, 11 Jan 2023 11:45:45 +0100
Subject: [PATCH] refactor(nav links): style and Next.js's `<Link></Link>`
 without a component wrapper

- delete NavLink component (wrapper)
---
 components/Footer.tsx  |  1 -
 components/Header.tsx  | 20 ++++++++++++++------
 components/NavLink.tsx | 18 ------------------
 3 files changed, 14 insertions(+), 25 deletions(-)
 delete mode 100644 components/NavLink.tsx

diff --git a/components/Footer.tsx b/components/Footer.tsx
index 324365c..da998db 100644
--- a/components/Footer.tsx
+++ b/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() {
diff --git a/components/Header.tsx b/components/Header.tsx
index 5ee30ff..a87c907 100644
--- a/components/Header.tsx
+++ b/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">
diff --git a/components/NavLink.tsx b/components/NavLink.tsx
deleted file mode 100644
index a8daae5..0000000
--- a/components/NavLink.tsx
+++ /dev/null
@@ -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>
-  );
-}