57 lines
1.8 KiB
TypeScript
57 lines
1.8 KiB
TypeScript
// components/navbar.tsx
|
|
|
|
import { Dock, DockIcon } from "@/components/magicui/dock";
|
|
import { ModeToggle } from "@/components/mode-toggle";
|
|
import { buttonVariants } from "@/components/ui/button";
|
|
import { Separator } from "@/components/ui/separator";
|
|
import {
|
|
Tooltip,
|
|
TooltipContent,
|
|
TooltipTrigger,
|
|
TooltipProvider,
|
|
} from "@/components/ui/tooltip";
|
|
import { DATA } from "@/app/resume";
|
|
import { cn } from "@/lib/utils";
|
|
import Link from "next/link";
|
|
|
|
export default function Navbar() {
|
|
return (
|
|
<div className="pointer-events-auto fixed inset-x-0 bottom-0 z-30 mx-auto mb-4 flex origin-bottom">
|
|
<div className="pointer-events-auto mx-auto max-w-max">
|
|
<Dock direction="middle" className="bg-background backdrop-blur-none border">
|
|
{DATA.navbar.map((item) => (
|
|
<DockIcon key={item.href}>
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<Link
|
|
href={item.href}
|
|
className={cn(
|
|
buttonVariants({ variant: "ghost", size: "icon" }),
|
|
"size-12",
|
|
)}
|
|
>
|
|
<item.icon className="size-4" />
|
|
</Link>
|
|
</TooltipTrigger>
|
|
<TooltipContent>
|
|
<p>{item.label}</p>
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
</DockIcon>
|
|
))}
|
|
<Separator orientation="vertical" className="h-full" />
|
|
<DockIcon>
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<ModeToggle />
|
|
</TooltipTrigger>
|
|
<TooltipContent>
|
|
<p>Theme</p>
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
</DockIcon>
|
|
</Dock>
|
|
</div>
|
|
</div>
|
|
);
|
|
} |