Dock

1import * as React from "react"
2 
3import { cn } from "@/lib/utils"
4 
5function Dock({ className, ...props }: React.ComponentProps<"div">) {
6  return (
7    <div
8      data-slot="dock"
9      className={cn(
10        "flex w-fit items-end gap-[18px] rounded-[22px] border border-white/90 bg-[linear-gradient(180deg,rgba(255,255,255,0.55)_0%,rgba(235,238,243,0.75)_100%)] px-[26px] pb-2.5 pt-3.5 shadow-[inset_0_1px_0_rgba(255,255,255,0.9),0_0_0_1px_rgba(20,40,80,0.08),0_16px_38px_rgba(30,40,60,0.18)]",
11        className
12      )}
13      {...props}
14    />
15  )
16}
17 
18function DockItem({
19  label,
20  active = false,
21  className,
22  children,
23  ...props
24}: React.ComponentProps<"div"> & {
25  label?: string
26  active?: boolean
27}) {
28  return (
29    <div
30      data-slot="dock-item"
31      className={cn(
32        "group relative flex flex-col items-center gap-[5px] transition-transform duration-200 ease-out hover:-translate-y-2.5 hover:scale-[1.12] motion-reduce:transition-none motion-reduce:hover:transform-none",
33        className
34      )}
35      {...props}
36    >
37      {label ? (
38        <span className="pointer-events-none absolute -top-[30px] whitespace-nowrap text-[13px] font-semibold text-white opacity-0 transition-opacity [text-shadow:0_1px_2px_rgba(0,0,0,0.9),0_0_5px_rgba(0,0,0,0.65),0_0_10px_rgba(0,0,0,0.45)] group-hover:opacity-100">
39          {label}
40        </span>
41      ) : null}
42      {children}
43      <span
44        className={cn(
45          "size-[4px] rounded-full bg-[#5a6270]",
46          active ? "opacity-100" : "opacity-0"
47        )}
48      />
49    </div>
50  )
51}
52 
53function DockIcon({ className, ...props }: React.ComponentProps<"div">) {
54  return (
55    <div
56      data-slot="dock-icon"
57      className={cn(
58        "relative flex size-[58px] items-center justify-center overflow-hidden rounded-[14px] bg-[linear-gradient(180deg,#8ec2f9_0%,#4a90ec_55%,#2f7de0_100%)] text-[26px] font-bold text-white shadow-[inset_0_1px_1px_rgba(255,255,255,0.6),0_3px_8px_rgba(20,30,50,0.25)] before:absolute before:inset-x-[8%] before:top-[4%] before:h-[45%] before:rounded-[12px] before:bg-[linear-gradient(180deg,rgba(255,255,255,0.85),rgba(255,255,255,0.1))] before:content-[''] [text-shadow:0_-1px_1px_rgba(0,0,0,0.3)]",
59        className
60      )}
61      {...props}
62    />
63  )
64}
65 
66export { Dock, DockItem, DockIcon }