Motion Dock

1"use client";
2 
3import React from "react";
4import {
5  useAnimate,
6  motion,
7  AnimatePresence,
8  usePresence,
9  useMotionValue,
10  type Transition,
11  type AnimationPlaybackControlsWithThen,
12  type HTMLMotionProps,
13} from "motion/react";
14import { cn } from "@/lib/utils";
15 
16import { usePrevious } from "@/hooks/use-previous";
17import { useDebouncedState } from "@/hooks/use-debounced-state";
18 
19interface DockItem extends Omit<HTMLMotionProps<"button">, "ref"> {
20  icon: React.ReactElement;
21  tooltip: string;
22}
23 
24export interface MotionDockProps extends React.ComponentProps<"div"> {
25  dockItems: DockItem[];
26  tooltipBorderRadius?: React.CSSProperties["borderRadius"];
27}
28const TRANSITION: Transition = {
29  duration: 0.2,
30  ease: [0.76, 0, 0.24, 1], // easeInOutQuart
31};
32export function MotionDock({
33  dockItems,
34  className,
35  tooltipBorderRadius = "var(--radius-sm)",
36  ...rest
37}: MotionDockProps) {
38  const [activeItem, setActiveItem] = useDebouncedState<number>(-1, 100);
39  const dockRef = React.useRef<HTMLDivElement>(null);
40 
41  const handleReset = () => setActiveItem(-1);
42 
43  return (
44    <div className={cn(className, "!relative !w-fit")} {...rest}>
45      <div
46        ref={dockRef}
47        className="bg-background text-foreground border-border flex gap-0.5 rounded-full border p-1 shadow-sm"
48        onMouseLeave={handleReset}
49        onBlurCapture={handleReset}
50      >
51        {dockItems.map(
52          ({ icon, tooltip, onMouseEnter, onFocus, className, ...rest }, i) => (
53            <motion.button
54              key={tooltip}
55              aria-label={tooltip}
56              onFocus={(e) => {
57                setActiveItem(i);
58                onFocus?.(e);
59              }}
60              onMouseEnter={(e) => {
61                setActiveItem(i);
62                onMouseEnter?.(e);
63              }}
64              data-dockitem={i}
65              className={cn(
66                "hover:text-accent-foreground hover:bg-accent focus-visible:text-accent-foreground focus-visible:bg-accent focus-visible:ring-ring focus-visible:ring-offset-background cursor-pointer rounded-full p-1.5 transition-colors duration-150 ease-out focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-none",
67                className
68              )}
69              {...rest}
70            >
71              {icon}
72            </motion.button>
73          )
74        )}
75      </div>
76      <AnimatePresence>
77        {activeItem >= 0 && (
78          <ToolTipsContainer
79            activeItem={activeItem}
80// … truncated