From 1deada190a9abd90017667bb96bd8a893ad35df6 Mon Sep 17 00:00:00 2001
From: Dan Lebo <dan.lebo@me.com>
Date: Sun, 5 Feb 2023 13:08:29 -0800
Subject: [PATCH] introduce navitem component

---
 beta/src/components/Layout/TopNav/TopNav.tsx | 68 +++++++-------------
 1 file changed, 24 insertions(+), 44 deletions(-)

diff --git a/beta/src/components/Layout/TopNav/TopNav.tsx b/beta/src/components/Layout/TopNav/TopNav.tsx
index 959d9829b..1064796fb 100644
--- a/beta/src/components/Layout/TopNav/TopNav.tsx
+++ b/beta/src/components/Layout/TopNav/TopNav.tsx
@@ -125,6 +125,22 @@ function Link({href, children, ...props}: JSX.IntrinsicElements['a']) {
   );
 }
 
+function NavItem({url, section, title}: any) {
+  return (
+    <div className="block">
+      <Link
+        href={`${url}`}
+        className={cn(
+          'outline-link p-2 rounded-lg capitalize',
+          section != title && 'hover:bg-card hover:dark:bg-card-dark',
+          section === title && 'bg-highlight dark:bg-highlight-dark text-link'
+        )}>
+        {title}
+      </Link>
+    </div>
+  );
+}
+
 export default function TopNav({
   routeTree,
   breadcrumbs,
@@ -260,50 +276,14 @@ export default function TopNav({
           </div>
           <div className="text-base justify-center items-center flex 3xl:flex-1 flex-row 3xl:justify-end">
             <div className="ml-2.5 mr-5 hidden lg:flex gap-5">
-              <div className="block">
-                <Link
-                  href="/learn"
-                  className={cn(
-                    'outline-link p-2 rounded-lg hover:bg-card hover:dark:bg-card-dark',
-                    section === 'learn' &&
-                      'bg-highlight dark:bg-highlight-dark text-link'
-                  )}>
-                  Learn
-                </Link>
-              </div>
-              <div className="block">
-                <Link
-                  href="/reference/react"
-                  className={cn(
-                    'outline-link p-2 rounded-lg hover:bg-card hover:dark:bg-card-dark',
-                    section === 'reference' &&
-                      'bg-highlight dark:bg-highlight-dark text-link'
-                  )}>
-                  Reference
-                </Link>
-              </div>
-              <div className="block">
-                <Link
-                  href="/community"
-                  className={cn(
-                    'outline-link p-2 rounded-lg hover:bg-card hover:dark:bg-card-dark',
-                    section === 'community' &&
-                      'bg-highlight dark:bg-highlight-dark text-link'
-                  )}>
-                  Community
-                </Link>
-              </div>
-              <div className="block">
-                <Link
-                  href="/blog"
-                  className={cn(
-                    'outline-link p-2 rounded-lg hover:bg-card hover:dark:bg-card-dark',
-                    section === 'blog' &&
-                      'bg-highlight dark:bg-highlight-dark text-link'
-                  )}>
-                  Blog
-                </Link>
-              </div>
+              <NavItem section={section} url="/learn" title="learn" />
+              <NavItem
+                section={section}
+                url="/reference/react"
+                title="reference"
+              />
+              <NavItem section={section} url="/community" title="community" />
+              <NavItem section={section} url="/blog" title="blog" />
             </div>
             <div className="flex w-full md:hidden"></div>
             <div className="flex items-center -space-x-2.5 xs:space-x-0 ">