magicui

1
import { CommandMenu } from "@/components/command-menu";
2
import { Icons } from "@/components/icons";
3
import { MainNav } from "@/components/main-nav";
4
import { MobileNav } from "@/components/mobile-nav";
5
import { ModeToggle } from "@/components/mode-toggle";
6
import { buttonVariants } from "@/components/ui/button";
7
import { siteConfig } from "@/config/site";
8
import { cn } from "@/lib/utils";
9
import NumberTicker from "@/registry/components/magicui/number-ticker";
10
import { StarIcon } from "@heroicons/react/24/solid";
11
import { User } from "next-auth";
12
import Link from "next/link";
13

14
interface SiteHeaderProps {
15
  user?: User;
16
}
17

18
export async function SiteHeader({ user }: SiteHeaderProps) {
19
  const { stargazers_count: stars } = await fetch(
20
    "https://api.github.com/repos/magicuidesign/magicui",
21
    {
22
      ...(process.env.GITHUB_OAUTH_TOKEN && {
23
        headers: {
24
          Authorization: `Bearer ${process.env.GITHUB_OAUTH_TOKEN}`,
25
          "Content-Type": "application/json",
26
        },
27
      }),
28
      next: {
29
        revalidate: 3600,
30
      },
31
    },
32
  )
33
    .then((res) => res.json())
34
    .catch(() => ({ stargazers_count: 300 }));
35

36
  return (
37
    <header
38
      className={cn(
39
        "supports-backdrop-blur:bg-background/90 sticky top-0 z-40 w-full  bg-background/40 backdrop-blur-lg",
40
      )}
41
    >
42
      <div className="container flex h-16 items-center">
43
        <MainNav />
44
        <MobileNav />
45
        <div className="flex flex-1 items-center justify-between gap-2 md:justify-end">
46
          <Link
47
            className={cn(
48
              buttonVariants(),
49
              "hidden max-w-52 gap-2 overflow-hidden whitespace-pre md:flex",
50
              "group relative w-full justify-center gap-2 rounded-md transition-all duration-300 ease-out hover:ring-2 hover:ring-primary hover:ring-offset-2",
51
            )}
52
            target="_blank"
53
            href={siteConfig.links.github}
54
          >
55
            <span className="absolute right-0 -mt-12 h-32 w-8 translate-x-12 rotate-12 transform bg-white opacity-10 transition-all duration-1000 ease-out group-hover:-translate-x-40" />
56
            <Icons.gitHub className="h-4 w-4" />
57
            Star on GitHub
58
            <div className="hidden items-center gap-1 text-sm md:flex">
59
              <StarIcon className="h-4 w-4 text-gray-500 transition-all duration-300 group-hover:text-yellow-300" />
60
              <NumberTicker
61
                value={stars}
62
                className="font-display font-medium text-white dark:text-black"
63
              />
64
            </div>
65
          </Link>
66
          <div className="w-full flex-1 md:w-auto md:flex-none">
67
            <CommandMenu />
68
          </div>
69
          <nav className="flex items-center gap-2">
70
            <ModeToggle />
71
          </nav>
72
        </div>
73
      </div>
74
      <hr className="m-0 h-px w-full border-none bg-gradient-to-r from-neutral-200/0 via-neutral-200/30 to-neutral-200/0" />
75
    </header>
76
  );
77
}
78