dock

1"use client"
2 
3import React, {
4  createContext,
5  ReactNode,
6  useCallback,
7  useContext,
8  useEffect,
9  useMemo,
10  useRef,
11  useState,
12} from "react"
13import {
14  animate,
15  AnimatePresence,
16  motion,
17  MotionValue,
18  useAnimation,
19  useMotionValue,
20  useSpring,
21  useTransform,
22} from "motion/react"
23 
24import { cn } from "@/lib/utils"
25 
26// Interface to define the types for our Dock context
27interface DockContextType {
28  width: number // Width of the dock
29  hovered: boolean // If the dock is hovered
30  setIsZooming: (value: boolean) => void // Function to set zooming state
31  zoomLevel: MotionValue<number> // Motion value for zoom level
32  mouseX: MotionValue<number> // Motion value for mouse X position
33  animatingIndexes: number[] // Array of animating indexes
34  setAnimatingIndexes: (indexes: number[]) => void // Function to set animating indexes
35}
36 
37// Initial width for the dock
38const INITIAL_WIDTH = 48
39 
40// Create a context to manage Dock state
41const DockContext = createContext<DockContextType>({
42  width: 0,
43  hovered: false,
44  setIsZooming: () => {},
45  zoomLevel: null as any,
46  mouseX: null as any,
47  animatingIndexes: [],
48  setAnimatingIndexes: () => {},
49})
50 
51// Custom hook to use Dock context
52const useDock = () => useContext(DockContext)
53 
54// Props for the Dock component
55interface DockProps {
56  className?: string
57  children: ReactNode // React children to be rendered within the dock
58}
59 
60// Main Dock component: orchestrating the dock's animation behavior
61function Dock({ className, children }: DockProps) {
62  const [hovered, setHovered] = useState(false) // State to track if the dock is hovered. When the mouse hovers over the dock, this state changes to true.
63  const [width, setWidth] = useState(0) // State to track the width of the dock. This dynamically updates based on the dock's current width.
64  const dockRef = useRef<HTMLDivElement>(null) // Reference to the dock element in the DOM. This allows direct manipulation and measurement of the dock.
65  const isZooming = useRef(false) // Reference to track if the zooming animation is active. This prevents conflicting animations.
66  const [animatingIndexes, setAnimatingIndexes] = useState<number[]>([]) // State to track which dock items are currently animating. This array holds the indices of animating items.
67 
68  // Callback to toggle the zooming state. This ensures that we don't trigger hover animations while zooming.
69  const setIsZooming = useCallback((value: boolean) => {
70// … truncated