Dock

1"use client";
2// beui.dev/components/motion/dock
3 
4import { motion, useReducedMotion } from "motion/react";
5import { createContext, useContext, useId, useMemo, type ReactNode } from "react";
6import { SPRING_LAYOUT } from "@/lib/ease";
7import { cn } from "@/lib/utils";
8 
9type DockContextValue = {
10  size: number;
11  pillLayoutId: string;
12};
13 
14const DockContext = createContext<DockContextValue | null>(null);
15 
16export interface DockProps {
17  children: ReactNode;
18  className?: string;
19  /** Size of each item in px. */
20  size?: number;
21}
22 
23export function Dock({ children, size = 44, className }: DockProps) {
24  const pillLayoutId = useId();
25  const ctx = useMemo<DockContextValue>(
26    () => ({ size, pillLayoutId }),
27    [size, pillLayoutId],
28  );
29 
30  return (
31    <DockContext.Provider value={ctx}>
32      <div
33        className={cn(
34          "inline-flex h-auto items-end gap-1.5 rounded-2xl border border-border bg-card/80 px-2 py-1 shadow-2xl backdrop-blur-xl",
35          className,
36        )}
37      >
38        {children}
39      </div>
40    </DockContext.Provider>
41  );
42}
43 
44export interface DockItemProps {
45  children: ReactNode;
46  className?: string;
47  /** When set, the item renders as a <button>. Omit when children carry their own link or button. */
48  onClick?: () => void;
49  active?: boolean;
50  "aria-label"?: string;
51}
52 
53export function DockItem({
54  children,
55  className,
56  onClick,
57  active,
58  ...rest
59}: DockItemProps) {
60  const dock = useContext(DockContext);
61  const reduce = useReducedMotion();
62  const size = dock?.size ?? 44;
63  const pillLayoutId = dock?.pillLayoutId ?? "dock-pill";
64 
65  const pill = active ? (
66    <motion.span
67      layoutId={pillLayoutId}
68      transition={reduce ? { duration: 0 } : SPRING_LAYOUT}
69      className="absolute inset-0.5 -z-10 rounded-xl bg-primary/5"
70    />
71  ) : null;
72  const sharedStyle = { width: size, height: size };
73  const sharedClass = cn(
74    "relative flex shrink-0 items-center justify-center rounded-full text-foreground",
75    className,
76  );
77 
78  if (onClick) {
79    return (
80      <button
81        type="button"
82        onClick={onClick}
83        aria-label={rest["aria-label"]}
84        aria-pressed={active}
85        style={sharedStyle}
86        className={cn(
87          sharedClass,
88          "cursor-pointer border-0 bg-transparent p-0 outline-none",
89          "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
90        )}
91      >
92        {pill}
93        {children}
94      </button>
95// … truncated