magicui

1
"use client";
2

3
import { Icons } from "@/components/icons";
4
import { docsConfig } from "@/config/docs";
5
import { siteConfig } from "@/config/site";
6
import { cn } from "@/lib/utils";
7
import { ExternalLinkIcon } from "@radix-ui/react-icons";
8
import Link from "next/link";
9
import { usePathname } from "next/navigation";
10
import { Badge } from "./ui/badge";
11

12
export function MainNav() {
13
  const pathname = usePathname();
14

15
  return (
16
    <div className="mr-4 hidden md:flex">
17
      <Link href="/" className="mr-6 flex items-center space-x-2">
18
        <Icons.logo className="h-6 w-6" />
19
        <span className="hidden font-bold md:inline-block">
20
          {siteConfig.name}
21
        </span>
22
        <Badge variant="secondary">Beta</Badge>
23
      </Link>
24
      <nav className="hidden items-center space-x-6 text-sm font-medium xl:flex">
25
        {docsConfig.mainNav.map((item) => (
26
          <Link
27
            key={item.href}
28
            href={item.href!}
29
            target={item.external ? "_blank" : undefined}
30
            className={cn(
31
              "flex items-center justify-center transition-colors hover:text-foreground/80",
32
              pathname?.startsWith(item.href!)
33
                ? "text-foreground"
34
                : "text-foreground/60",
35
            )}
36
          >
37
            {item.title}
38
            {item.external && <ExternalLinkIcon className="ml-2 size-4" />}
39
          </Link>
40
        ))}
41
      </nav>
42
    </div>
43
  );
44
}
45