Dock Demo

1"use client";
2 
3import React from "react";
4// import { Dock, DockIcon } from "@/components/spectrumui/dock";
5import { Dock, DockIcon } from "@/app/registry/spectrumui/dock";
6import {
7  Home,
8  User,
9  Code2,
10  FolderGit2,
11  BookOpen,
12  MessageSquare,
13  Settings,
14} from "lucide-react";
15 
16export default function DockDemo() {
17  const links = [
18    { icon: <Home className="h-full w-full" />, label: "Home" },
19    { icon: <User className="h-full w-full" />, label: "Profile" },
20    { icon: <Code2 className="h-full w-full" />, label: "Projects" },
21    { icon: <FolderGit2 className="h-full w-full" />, label: "Repositories" },
22    { icon: <BookOpen className="h-full w-full" />, label: "Blog" },
23    { icon: <MessageSquare className="h-full w-full" />, label: "Contact" },
24    { icon: <Settings className="h-full w-full" />, label: "Settings" },
25  ];
26 
27  return (
28    <div className="flex w-full items-center justify-center py-8">
29      <Dock variant="normal">
30        {links.map((link, idx) => (
31          <DockIcon key={idx} label={link.label}>
32            {link.icon}
33          </DockIcon>
34        ))}
35      </Dock>
36    </div>
37  );
38}