From 271dd996315394aa2a210a1481e46f23c502dc21 Mon Sep 17 00:00:00 2001
From: SameerJadav <sameerjadav010@gmail.com>
Date: Tue, 15 Aug 2023 10:12:38 +0530
Subject: [PATCH 01/12] refactor: correct contrast ratio & accessible name

---
 docs/next.config.mjs               | 2 +-
 docs/src/app/page.tsx              | 4 ++--
 docs/src/components/mobile-nav.tsx | 1 +
 docs/src/styles/globals.css        | 4 ++--
 4 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/docs/next.config.mjs b/docs/next.config.mjs
index 97b3362..bbbe4f0 100644
--- a/docs/next.config.mjs
+++ b/docs/next.config.mjs
@@ -20,7 +20,7 @@ export default withMdx({
         rehypePrettyCode,
         /** @type {import("rehype-pretty-code").Options} */
         ({
-          theme: { dark: "one-dark-pro", light: "github-light" },
+          theme: { dark: "one-dark-pro", light: "min-light" },
           getHighlighter,
           onVisitLine(node) {
             // Prevent lines from collapsing in `display: grid` mode, and allow empty
diff --git a/docs/src/app/page.tsx b/docs/src/app/page.tsx
index f04243d..0df43a7 100644
--- a/docs/src/app/page.tsx
+++ b/docs/src/app/page.tsx
@@ -22,7 +22,7 @@ export default function IndexPage() {
           </Balancer>
         </h1>
         <p
-          className="animate-fade-up text-center text-muted-foreground/80 opacity-0 md:text-xl"
+          className="animate-fade-up text-center dark:text-muted-foreground/80 text-muted-foreground opacity-0 md:text-xl"
           style={{ animationDelay: "0.30s", animationFillMode: "forwards" }}
         >
           <Balancer>{siteConfig.description}</Balancer>
@@ -44,7 +44,7 @@ export default function IndexPage() {
             className={buttonVariants({ variant: "outline", size: "lg" })}
           >
             <Icons.gitHub className="mr-1 h-4 w-4" />
-            GitHub
+            <span>GitHub</span>
           </Link>
         </div>
       </div>
diff --git a/docs/src/components/mobile-nav.tsx b/docs/src/components/mobile-nav.tsx
index ccc9f2d..8cf7a50 100644
--- a/docs/src/components/mobile-nav.tsx
+++ b/docs/src/components/mobile-nav.tsx
@@ -37,6 +37,7 @@ export function MobileDropdown(props: {
           className="mr-2 px-0 hamburger space-x-2 hover:bg-transparent focus-visible:bg-transparent focus-visible:ring-0 focus-visible:ring-offset-0 md:hidden"
         >
           <Icons.menu className={cn("h-6 w-6", isOpen && "open")} />
+          <span className="sr-only">Menu</span>
         </Button>
       </PopoverTrigger>
       <PopoverContent className="z-40 mt-2 h-[calc(100vh-4rem)] w-screen bg-background animate-none rounded-none border-none transition-transform md:hidden">
diff --git a/docs/src/styles/globals.css b/docs/src/styles/globals.css
index 9b4148b..d15909e 100644
--- a/docs/src/styles/globals.css
+++ b/docs/src/styles/globals.css
@@ -7,8 +7,8 @@
     --background: 0 0% 100%;
     --foreground: 222.2 47.4% 11.2%;
 
-    --muted: 210 40% 96.1%;
-    --muted-foreground: 215.4 16.3% 46.9%;
+    --muted: 270 20% 98%;
+    --muted-foreground: 252 5% 40.7%;
 
     --popover: 0 0% 100%;
     --popover-foreground: 222.2 47.4% 11.2%;

From b0aba7480a670dcb315b1dff7ac03925f849f2cd Mon Sep 17 00:00:00 2001
From: SameerJadav <sameerjadav010@gmail.com>
Date: Tue, 15 Aug 2023 10:20:39 +0530
Subject: [PATCH 02/12] fix: main nav link active state

---
 docs/src/components/main-nav.tsx | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/docs/src/components/main-nav.tsx b/docs/src/components/main-nav.tsx
index 5c26454..5f026d2 100644
--- a/docs/src/components/main-nav.tsx
+++ b/docs/src/components/main-nav.tsx
@@ -5,7 +5,7 @@ import Link from "next/link";
 
 import { cn } from "@/lib/cn";
 import { Icons } from "@/components/icons";
-import { usePathname } from "next/navigation";
+import { useSelectedLayoutSegment } from "next/navigation";
 
 export interface NavItem {
   title: string;
@@ -16,9 +16,13 @@ export interface NavItem {
   label?: string;
 }
 
-export function MainNav(props: { items: NavItem[] }) {
-  const pathname = usePathname();
+function isActive(href: string) {
+  const segment = useSelectedLayoutSegment();
+  if (!segment) return false;
+  return href.startsWith(`/${segment}`);
+}
 
+export function MainNav(props: { items: NavItem[] }) {
   return (
     <div className="flex gap-6 md:gap-10">
       {props.items?.length ? (
@@ -30,9 +34,9 @@ export function MainNav(props: { items: NavItem[] }) {
                   key={index}
                   href={item.href}
                   className={cn(
-                    "text-muted-foreground flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background hover:bg-accent hover:text-accent-foreground h-9 px-3",
+                    "text-foreground/60 text-sm font-medium transition-colors hover:text-foreground/80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background rounded-sm",
                     item.disabled && "cursor-not-allowed opacity-80",
-                    item.href === pathname && "text-foreground"
+                    isActive(item.href) && "text-foreground"
                   )}
                 >
                   {item.title}

From 629e269c4a343016d7ca40e92f7cd19baba4bf03 Mon Sep 17 00:00:00 2001
From: SameerJadav <sameerjadav010@gmail.com>
Date: Tue, 15 Aug 2023 10:57:57 +0530
Subject: [PATCH 03/12] style: fix some style issues with header

---
 docs/src/components/main-nav.tsx     | 40 ++++++++---------
 docs/src/components/mobile-nav.tsx   |  3 +-
 docs/src/components/site-header.tsx  | 66 ++++++++++++++--------------
 docs/src/components/theme-toggle.tsx |  6 +--
 docs/src/components/ui/button.tsx    |  3 +-
 5 files changed, 59 insertions(+), 59 deletions(-)

diff --git a/docs/src/components/main-nav.tsx b/docs/src/components/main-nav.tsx
index 5f026d2..94e6a0c 100644
--- a/docs/src/components/main-nav.tsx
+++ b/docs/src/components/main-nav.tsx
@@ -24,27 +24,23 @@ function isActive(href: string) {
 
 export function MainNav(props: { items: NavItem[] }) {
   return (
-    <div className="flex gap-6 md:gap-10">
-      {props.items?.length ? (
-        <nav className="hidden gap-6 md:flex">
-          {props.items?.map(
-            (item, index) =>
-              item.href && (
-                <Link
-                  key={index}
-                  href={item.href}
-                  className={cn(
-                    "text-foreground/60 text-sm font-medium transition-colors hover:text-foreground/80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background rounded-sm",
-                    item.disabled && "cursor-not-allowed opacity-80",
-                    isActive(item.href) && "text-foreground"
-                  )}
-                >
-                  {item.title}
-                </Link>
-              )
-          )}
-        </nav>
-      ) : null}
-    </div>
+    <nav className="hidden md:flex md:items-center md:space-x-6">
+      {props.items?.map(
+        (item, index) =>
+          item.href && (
+            <Link
+              key={index}
+              href={item.href}
+              className={cn(
+                "text-foreground/60 text-sm font-medium transition-colors hover:text-foreground/80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background rounded-md",
+                item.disabled && "cursor-not-allowed opacity-80",
+                isActive(item.href) && "text-foreground"
+              )}
+            >
+              {item.title}
+            </Link>
+          )
+      )}
+    </nav>
   );
 }
diff --git a/docs/src/components/mobile-nav.tsx b/docs/src/components/mobile-nav.tsx
index 8cf7a50..8cb7cff 100644
--- a/docs/src/components/mobile-nav.tsx
+++ b/docs/src/components/mobile-nav.tsx
@@ -34,7 +34,8 @@ export function MobileDropdown(props: {
       <PopoverTrigger asChild>
         <Button
           variant="ghost"
-          className="mr-2 px-0 hamburger space-x-2 hover:bg-transparent focus-visible:bg-transparent focus-visible:ring-0 focus-visible:ring-offset-0 md:hidden"
+          size="icon"
+          className="hamburger focus-visible:bg-transparent focus-visible:ring-0 focus-visible:ring-offset-0 md:hidden"
         >
           <Icons.menu className={cn("h-6 w-6", isOpen && "open")} />
           <span className="sr-only">Menu</span>
diff --git a/docs/src/components/site-header.tsx b/docs/src/components/site-header.tsx
index a951a7b..f9e412a 100644
--- a/docs/src/components/site-header.tsx
+++ b/docs/src/components/site-header.tsx
@@ -9,50 +9,52 @@ import { MobileDropdown } from "@/components/mobile-nav";
 
 export function SiteHeader() {
   return (
-    <header className="bg-background sticky top-0 z-50 w-full border-b">
-      <div className="container flex h-16 items-center space-x-4 sm:justify-between sm:space-x-0">
-        <Link href="/" className="items-center space-x-2 rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ring ring-offset-background flex h-9 mr-3 px-3">
-          <Icons.logo className="h-6 w-6" />
-          <span className="font-bold text-lg">
-            {siteConfig.name}
-          </span>
-        </Link>
-
-        <MainNav items={siteConfig.mainNav} />
-        <div className="flex flex-1 items-center justify-end space-x-4">
-          <nav className="flex items-center space-x-1">
-            <Link
-              href={siteConfig.links.github}
-              target="_blank"
-              rel="noreferrer"
-              className={buttonVariants({
-                size: "sm",
-                variant: "ghost",
-              })}
-            >
-              <Icons.gitHub className="h-5 w-5" />
-              <span className="sr-only">GitHub</span>
-            </Link>
-            {/* <Link
+    <header className="bg-background/90 sticky top-0 z-50 w-full border-b backdrop-blur">
+      <div className="container h-16 border-b flex items-center justify-between">
+        <div className="flex items-center space-x-6">
+          <Link
+            href="/"
+            className="flex items-center space-x-2 rounded-md h-6 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ring ring-offset-background"
+          >
+            <Icons.logo className="h-6 w-6" />
+            <span className="font-medium text-2xl leading-none">
+              {siteConfig.name}
+            </span>
+          </Link>
+          <MainNav items={siteConfig.mainNav} />
+        </div>
+        <div className="flex items-center space-x-2">
+          <Link
+            href={siteConfig.links.github}
+            target="_blank"
+            rel="noreferrer"
+            className={buttonVariants({
+              size: "icon",
+              variant: "ghost",
+            })}
+          >
+            <Icons.gitHub className="h-6 w-6" />
+            <span className="sr-only">GitHub</span>
+          </Link>
+          {/* <Link
               href={siteConfig.links.twitter}
               target="_blank"
               rel="noreferrer"
             >
               <div
                 className={buttonVariants({
-                  size: "sm",
+                  size: "icon",
                   variant: "ghost",
                 })}
               >
-                <Icons.twitter className="h-5 w-5 fill-current" />
+                <Icons.twitter className="h-6 w-6 fill-current" />
                 <span className="sr-only">Twitter</span>
               </div>
             </Link> */}
-            <ThemeToggle />
-            <MobileDropdown
-              items={{ main: siteConfig.mainNav, docs: siteConfig.sidebarNav }}
-            />
-          </nav>
+          <ThemeToggle />
+          <MobileDropdown
+            items={{ main: siteConfig.mainNav, docs: siteConfig.sidebarNav }}
+          />
         </div>
       </div>
     </header>
diff --git a/docs/src/components/theme-toggle.tsx b/docs/src/components/theme-toggle.tsx
index 7de133c..6788467 100644
--- a/docs/src/components/theme-toggle.tsx
+++ b/docs/src/components/theme-toggle.tsx
@@ -12,11 +12,11 @@ export function ThemeToggle() {
   return (
     <Button
       variant="ghost"
-      size="sm"
+      size="icon"
       onClick={() => setTheme(theme === "light" ? "dark" : "light")}
     >
-      <Icons.sun className="rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
-      <Icons.moon className="absolute rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+      <Icons.sun className="rotate-0 scale-100 w-6 h-6 transition-all dark:-rotate-90 dark:scale-0" />
+      <Icons.moon className="absolute rotate-90 w-6 h-6 scale-0 transition-all dark:rotate-0 dark:scale-100" />
       <span className="sr-only">Toggle theme</span>
     </Button>
   );
diff --git a/docs/src/components/ui/button.tsx b/docs/src/components/ui/button.tsx
index 8854a31..10c4591 100644
--- a/docs/src/components/ui/button.tsx
+++ b/docs/src/components/ui/button.tsx
@@ -19,9 +19,10 @@ const buttonVariants = cva(
         link: "underline-offset-4 hover:underline text-primary",
       },
       size: {
+        lg: "h-11 px-8 rounded-md",
         default: "h-10 py-2 px-4",
         sm: "h-9 px-3 rounded-md",
-        lg: "h-11 px-8 rounded-md",
+        icon: "p-1",
       },
     },
     defaultVariants: {

From 511d1545a61f7c07908d41b0a980583adad56eae Mon Sep 17 00:00:00 2001
From: SameerJadav <sameerjadav010@gmail.com>
Date: Tue, 15 Aug 2023 12:58:41 +0530
Subject: [PATCH 04/12] style: consistent styling

---
 docs/src/app/docs/layout.tsx        | 2 +-
 docs/src/app/page.tsx               | 2 +-
 docs/src/components/mobile-nav.tsx  | 2 +-
 docs/src/components/site-header.tsx | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/docs/src/app/docs/layout.tsx b/docs/src/app/docs/layout.tsx
index ec5e67f..56e0a3e 100644
--- a/docs/src/app/docs/layout.tsx
+++ b/docs/src/app/docs/layout.tsx
@@ -14,7 +14,7 @@ export const metadata: Metadata = {
 export default function DocsLayout(props: { children: ReactNode }) {
   return (
     <div className="container flex-1 items-start md:grid md:grid-cols-[220px_minmax(0,1fr)] md:gap-6 lg:grid-cols-[256px_minmax(0,1fr)] lg:gap-10">
-      <aside className="fixed top-14 z-30 -ml-2 -mr-2 hidden h-[calc(100vh-3.5rem)] w-full shrink-0 overflow-y-auto border-r md:sticky md:block">
+      <aside className="fixed top-[4.0625rem] z-30 -ml-2 -mr-2 hidden h-[calc(100vh-4.0625rem)] w-full shrink-0 overflow-y-auto border-r md:sticky md:block">
         <ScrollArea className="py-6 pr-4 lg:py-8">
           <DocsSidebarNav items={siteConfig.sidebarNav} />
         </ScrollArea>
diff --git a/docs/src/app/page.tsx b/docs/src/app/page.tsx
index 0df43a7..83b7f17 100644
--- a/docs/src/app/page.tsx
+++ b/docs/src/app/page.tsx
@@ -7,7 +7,7 @@ import { Icons } from "@/components/icons";
 
 export default function IndexPage() {
   return (
-    <section className="container flex flex-col justify-center overflow-hidden items-center min-h-[calc(100vh-4rem)] gap-6 pb-8 pt-6 md:py-10">
+    <section className="container flex flex-col justify-center overflow-hidden items-center min-h-[calc(100vh-4.0625rem)] gap-6 pb-8 pt-6 md:py-10">
       <div className="max-w-5xl space-y-8">
         <h1
           className="font-cal animate-fade-up bg-gradient-to-br from-indigo-700 via-accent-foreground to-fuchsia-500 bg-clip-text text-center text-5xl/[3rem] font-bold text-transparent opacity-0 drop-shadow-sm md:text-7xl/[5rem]"
diff --git a/docs/src/components/mobile-nav.tsx b/docs/src/components/mobile-nav.tsx
index 8cb7cff..4ec0c66 100644
--- a/docs/src/components/mobile-nav.tsx
+++ b/docs/src/components/mobile-nav.tsx
@@ -41,7 +41,7 @@ export function MobileDropdown(props: {
           <span className="sr-only">Menu</span>
         </Button>
       </PopoverTrigger>
-      <PopoverContent className="z-40 mt-2 h-[calc(100vh-4rem)] w-screen bg-background animate-none rounded-none border-none transition-transform md:hidden">
+      <PopoverContent className="z-40 mt-2 h-[calc(100vh-4.0625rem)] w-screen bg-background animate-none rounded-none border-none transition-transform md:hidden">
         <ScrollArea className="pb-8">
           {props.items.docs.map((item, index) => (
             <div key={index} className="flex flex-col space-y-3 pt-6">
diff --git a/docs/src/components/site-header.tsx b/docs/src/components/site-header.tsx
index f9e412a..5913bb0 100644
--- a/docs/src/components/site-header.tsx
+++ b/docs/src/components/site-header.tsx
@@ -10,7 +10,7 @@ import { MobileDropdown } from "@/components/mobile-nav";
 export function SiteHeader() {
   return (
     <header className="bg-background/90 sticky top-0 z-50 w-full border-b backdrop-blur">
-      <div className="container h-16 border-b flex items-center justify-between">
+      <div className="container h-16 flex items-center justify-between">
         <div className="flex items-center space-x-6">
           <Link
             href="/"

From e14293dd25fdd108d41d1d62a77f563c6955b56f Mon Sep 17 00:00:00 2001
From: SameerJadav <sameerjadav010@gmail.com>
Date: Tue, 15 Aug 2023 13:45:59 +0530
Subject: [PATCH 05/12] refactor: added meta tags

---
 docs/src/app/layout.tsx | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/docs/src/app/layout.tsx b/docs/src/app/layout.tsx
index 757eeb1..0b229af 100644
--- a/docs/src/app/layout.tsx
+++ b/docs/src/app/layout.tsx
@@ -43,10 +43,23 @@ export const metadata: Metadata = {
     apple: "/apple-touch-icon.png",
   },
   openGraph: {
-    images: [{ url: "/opengraph-image.png" }],
+    type: "website",
+    locale: "en_US",
+    title: siteConfig.name,
+    description: siteConfig.description,
+    images: [
+      {
+        url: "/opengraph-image.png",
+        width: 910,
+        height: 455,
+        alt: siteConfig.name,
+      },
+    ],
   },
   twitter: {
     card: "summary_large_image",
+    title: siteConfig.name,
+    description: siteConfig.description,
     images: [{ url: "/opengraph-image.png" }],
   },
 };

From 63c391e2d0aa1f88262157880021c5ffb83d0e3c Mon Sep 17 00:00:00 2001
From: SameerJadav <sameerjadav010@gmail.com>
Date: Tue, 15 Aug 2023 13:55:59 +0530
Subject: [PATCH 06/12] feat: SWC minify

---
 docs/next.config.mjs | 1 +
 1 file changed, 1 insertion(+)

diff --git a/docs/next.config.mjs b/docs/next.config.mjs
index bbbe4f0..e917c53 100644
--- a/docs/next.config.mjs
+++ b/docs/next.config.mjs
@@ -7,6 +7,7 @@ import { getHighlighter } from "shiki";
 
 /** @type {import('next').NextConfig} */
 const nextConfig = {
+  swcMinify: true,
   pageExtensions: ["ts", "tsx", "mdx"],
   redirects: () => [
     { source: "/docs", destination: "/docs/introduction", permanent: true },

From d4e93cf2a81d3902b57303c0603395ca0b3580d5 Mon Sep 17 00:00:00 2001
From: SameerJadav <sameerjadav010@gmail.com>
Date: Tue, 15 Aug 2023 16:47:46 +0530
Subject: [PATCH 07/12] feat: added `hoverOnlyWhenSupported`

---
 docs/tailwind.config.ts | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/docs/tailwind.config.ts b/docs/tailwind.config.ts
index 8a8a602..b6f035c 100644
--- a/docs/tailwind.config.ts
+++ b/docs/tailwind.config.ts
@@ -105,5 +105,8 @@ export default {
       },
     },
   },
+  future: {
+    hoverOnlyWhenSupported: true,
+  },
   plugins: [require("tailwindcss-animate")],
 } satisfies Config;

From 7f6f855833bd0a84467d813ebad1a2eb3334a45b Mon Sep 17 00:00:00 2001
From: SameerJadav <sameerjadav010@gmail.com>
Date: Thu, 17 Aug 2023 00:58:08 +0530
Subject: [PATCH 08/12] refactor: removed SWC minifiy because it's default

---
 docs/next.config.mjs | 1 -
 1 file changed, 1 deletion(-)

diff --git a/docs/next.config.mjs b/docs/next.config.mjs
index e917c53..bbbe4f0 100644
--- a/docs/next.config.mjs
+++ b/docs/next.config.mjs
@@ -7,7 +7,6 @@ import { getHighlighter } from "shiki";
 
 /** @type {import('next').NextConfig} */
 const nextConfig = {
-  swcMinify: true,
   pageExtensions: ["ts", "tsx", "mdx"],
   redirects: () => [
     { source: "/docs", destination: "/docs/introduction", permanent: true },

From 11beca5be930c2dc34697167e5ec840a99a9c3c8 Mon Sep 17 00:00:00 2001
From: SameerJadav <sameerjadav010@gmail.com>
Date: Thu, 17 Aug 2023 01:00:00 +0530
Subject: [PATCH 09/12] refactor: increased spacing in header

---
 docs/src/components/site-header.tsx | 2 +-
 docs/src/components/ui/button.tsx   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/src/components/site-header.tsx b/docs/src/components/site-header.tsx
index 5913bb0..45a030e 100644
--- a/docs/src/components/site-header.tsx
+++ b/docs/src/components/site-header.tsx
@@ -23,7 +23,7 @@ export function SiteHeader() {
           </Link>
           <MainNav items={siteConfig.mainNav} />
         </div>
-        <div className="flex items-center space-x-2">
+        <div className="flex items-center space-x-2 md:space-x-4">
           <Link
             href={siteConfig.links.github}
             target="_blank"
diff --git a/docs/src/components/ui/button.tsx b/docs/src/components/ui/button.tsx
index 10c4591..62abdb9 100644
--- a/docs/src/components/ui/button.tsx
+++ b/docs/src/components/ui/button.tsx
@@ -22,7 +22,7 @@ const buttonVariants = cva(
         lg: "h-11 px-8 rounded-md",
         default: "h-10 py-2 px-4",
         sm: "h-9 px-3 rounded-md",
-        icon: "p-1",
+        icon: "h-9 w-9",
       },
     },
     defaultVariants: {

From 9e9420ea2ad6e36700828cd54e662a9661ccb836 Mon Sep 17 00:00:00 2001
From: SameerJadav <sameerjadav010@gmail.com>
Date: Thu, 17 Aug 2023 10:18:40 +0530
Subject: [PATCH 10/12] refactor: move `isActive()` inside MainNav

---
 docs/src/components/main-nav.tsx | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/docs/src/components/main-nav.tsx b/docs/src/components/main-nav.tsx
index 94e6a0c..aa48cc3 100644
--- a/docs/src/components/main-nav.tsx
+++ b/docs/src/components/main-nav.tsx
@@ -16,13 +16,14 @@ export interface NavItem {
   label?: string;
 }
 
-function isActive(href: string) {
+export function MainNav(props: { items: NavItem[] }) {
   const segment = useSelectedLayoutSegment();
-  if (!segment) return false;
-  return href.startsWith(`/${segment}`);
-}
 
-export function MainNav(props: { items: NavItem[] }) {
+  const isActive = (href: string) => {
+    if (!segment) return false;
+    return href.startsWith(`/${segment}`);
+  };
+
   return (
     <nav className="hidden md:flex md:items-center md:space-x-6">
       {props.items?.map(

From 82fb85ca8db1939f710f01c914e600954819f9c2 Mon Sep 17 00:00:00 2001
From: Julius Marminge <julius0216@outlook.com>
Date: Thu, 17 Aug 2023 21:37:33 +0200
Subject: [PATCH 11/12] Update main-nav.tsx

---
 docs/src/components/main-nav.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/src/components/main-nav.tsx b/docs/src/components/main-nav.tsx
index aa48cc3..52e329e 100644
--- a/docs/src/components/main-nav.tsx
+++ b/docs/src/components/main-nav.tsx
@@ -30,7 +30,7 @@ export function MainNav(props: { items: NavItem[] }) {
         (item, index) =>
           item.href && (
             <Link
-              key={index}
+              key={item.href}
               href={item.href}
               className={cn(
                 "text-foreground/60 text-sm font-medium transition-colors hover:text-foreground/80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background rounded-md",

From 0a6029bcca376c665f4ab884578be197f5a587d8 Mon Sep 17 00:00:00 2001
From: Julius Marminge <julius0216@outlook.com>
Date: Thu, 17 Aug 2023 21:38:44 +0200
Subject: [PATCH 12/12] Update main-nav.tsx

---
 docs/src/components/main-nav.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/src/components/main-nav.tsx b/docs/src/components/main-nav.tsx
index 52e329e..d6d2d46 100644
--- a/docs/src/components/main-nav.tsx
+++ b/docs/src/components/main-nav.tsx
@@ -27,7 +27,7 @@ export function MainNav(props: { items: NavItem[] }) {
   return (
     <nav className="hidden md:flex md:items-center md:space-x-6">
       {props.items?.map(
-        (item, index) =>
+        (item) =>
           item.href && (
             <Link
               key={item.href}