Dock

import { Dock } from "@/components/ui/dock";

export default function Example() {
  return <Dock />;
}

"use client";

import { forwardRef, useState } from "react";
import { cn } from "@/lib/utils";

const Dock = forwardRef(({ className, items = [], ...props }, ref) => {
  const [hovered, setHovered] = useState(-1);

  return (
    <div ref={ref} className={cn("flex items-end gap-1 rounded-2xl border bg-background/80 px-3 py-2 shadow-lg backdrop-blur-sm", className)} {...props}>
      {items.map((item, i) => (
        <button key={i}
          onMouseEnter={() => setHovered(i)}
          onMouseLeave={() => setHovered(-1)}
          className={cn("flex flex-col items-center gap-1 rounded-xl p-2 transition-all duration-200 hover:bg-accent",
            hovered === i && "scale-125",
            (hovered === i - 1 || hovered === i + 1) && "scale-110"
          )}
          title={item.label}
        >
          <span className="text-2xl">{item.icon}</span>
          {hovered === i && <span className="absolute -top-8 rounded-md bg-foreground px-2 py-1 text-xs text-background">{item.label}</span>}
        </button>
      ))}
    </div>
  );
});
Dock.displayName = "Dock";

export { Dock };