nav wip

Author: davemooreuws

public/favicon.ico

@@ -1,5 +1,6 @@
-import { Button } from '@/components/Button'
 import { HeroPattern } from '@/components/HeroPattern'
+import { Button } from '@/components/ui/button'
+import Link from 'next/link'
 
 export default function NotFound() {
   return (
@@ -15,8 +16,8 @@ export default function NotFound() {
         <p className="mt-2 text-base text-zinc-600 dark:text-zinc-400">
           Sorry, we couldn’t find the page you’re looking for.
         </p>
-        <Button href="/" arrow="right" className="mt-8">
-          Back to docs
+        <Button className="mt-8" asChild>
+          <Link href="/">Back to docs</Link>
         </Button>
       </div>
     </>

src/app/not-found.tsx

@@ -62,7 +62,7 @@ const GitHubStarCount = ({ className }: { className?: string }) => {
   }, [])
 
   return (
-    <div className={clsx('text-xs uppercase text-zinc-300', className)}>
+    <div className={clsx('text-xs uppercase dark:text-zinc-300', className)}>
       {formatStarCount(starCount)}
     </div>
   )

src/components/GitHubStarCount.tsx

@@ -4,7 +4,7 @@ export function HeroPattern() {
   return (
     <div className="absolute inset-0 -z-10 mx-0 max-w-none overflow-hidden">
       <div className="absolute left-1/2 top-0 ml-[-38rem] h-[25rem] w-[81.25rem] dark:[mask-image:linear-gradient(white,transparent)]">
-        <div className="absolute inset-0 bg-gradient-to-r from-[#36b49f] to-[#DBFF75] opacity-40 [mask-image:radial-gradient(farthest-side_at_top,white,transparent)] dark:from-[#36b49f]/30 dark:to-[#DBFF75]/30 dark:opacity-100">
+        <div className="absolute inset-0 bg-gradient-to-r from-primary to-secondary opacity-40 [mask-image:radial-gradient(farthest-side_at_top,white,transparent)] dark:from-primary/30 dark:to-secondary/30 dark:opacity-100">
           <GridPattern
             width={72}
             height={56}

src/components/HeroPattern.tsx

@@ -3,7 +3,7 @@ import Link from 'next/link'
 import { Footer } from '@/components/Footer'
 import { Header } from '@/components/layout/Header'
 import { Logo } from '@/components/Logo'
-import { Navigation } from '@/components/layout/Navigation'
+import { Navigation } from '@/components/nav/Navigation'
 
 const experimentalRuntimes = ['go', 'dart']
 

src/components/layout/BaseLayout.tsx

@@ -9,14 +9,12 @@ import { Logo } from '@/components/Logo'
 import {
   MobileNavigation,
   useIsInsideMobileNavigation,
-} from '@/components/MobileNavigation'
-import { useMobileNavigationStore } from '@/components/MobileNavigation'
+} from '@/components/nav/MobileNavigation'
+import { useMobileNavigationStore } from '@/components/nav/MobileNavigation'
 import { Search } from '@/components/layout/Search'
 import { ThemeToggle } from '@/components/ThemeToggle'
-import { FaDiscord } from 'react-icons/fa'
 import { cn } from '@/lib/utils'
 import GitHubStarCount from '../GitHubStarCount'
-import { StarIcon } from '@heroicons/react/24/outline'
 import { GitHubIcon } from '../icons/GitHubIcon'
 
 function TopLevelNavItem({
@@ -72,7 +70,7 @@ export const Header = forwardRef<
             'bg-gray-800/7.5 dark:bg-white/7.5',
         )}
       />
-      <Link href="/" aria-label="Home">
+      <Link href="/" aria-label="Home" className="hidden lg:block">
         <Logo className="h-6" />
       </Link>
       <div className="hidden lg:block">
@@ -106,7 +104,9 @@ export const Header = forwardRef<
           </ul>
         </nav>
         <div className="flex items-center gap-4">
-          <div className="lg:hidden">{/* <Search /> */}</div>
+          <div className="lg:hidden">
+            <Search />
+          </div>
           <ThemeToggle />
         </div>
       </div>