Dock

1"use client"
2 
3import React, { useRef, type PropsWithChildren } from "react"
4import { cva, type VariantProps } from "class-variance-authority"
5import {
6  motion,
7  MotionValue,
8  useMotionValue,
9  useSpring,
10  useTransform,
11} from "motion/react"
12import type { MotionProps } from "motion/react"
13 
14import { cn } from "@/lib/utils"
15 
16export interface DockProps extends VariantProps<typeof dockVariants> {
17  className?: string
18  iconSize?: number
19  iconMagnification?: number
20  disableMagnification?: boolean
21  iconDistance?: number
22  direction?: "top" | "middle" | "bottom"
23  children: React.ReactNode
24}
25 
26const DEFAULT_SIZE = 40
27const DEFAULT_MAGNIFICATION = 60
28const DEFAULT_DISTANCE = 140
29const DEFAULT_DISABLEMAGNIFICATION = false
30 
31const dockVariants = cva(
32  "supports-backdrop-blur:bg-white/10 supports-backdrop-blur:dark:bg-black/10 mx-auto mt-8 flex h-[58px] w-max items-center justify-center gap-2 rounded-2xl border p-2 backdrop-blur-md"
33)
34 
35const Dock = React.forwardRef<HTMLDivElement, DockProps>(
36  (
37    {
38      className,
39      children,
40      iconSize = DEFAULT_SIZE,
41      iconMagnification = DEFAULT_MAGNIFICATION,
42      disableMagnification = DEFAULT_DISABLEMAGNIFICATION,
43      iconDistance = DEFAULT_DISTANCE,
44      direction = "middle",
45      ...props
46    },
47    ref
48  ) => {
49    const mouseX = useMotionValue(Infinity)
50 
51    const renderChildren = () => {
52      return React.Children.map(children, (child) => {
53        if (
54          React.isValidElement<DockIconProps>(child) &&
55          child.type === DockIcon
56        ) {
57          return React.cloneElement(child, {
58            ...child.props,
59            mouseX: mouseX,
60            size: iconSize,
61            magnification: iconMagnification,
62            disableMagnification: disableMagnification,
63            distance: iconDistance,
64          })
65        }
66        return child
67      })
68    }
69 
70    return (
71      <motion.div
72        ref={ref}
73        onMouseMove={(e) => mouseX.set(e.pageX)}
74        onMouseLeave={() => mouseX.set(Infinity)}
75        {...props}
76        className={cn(dockVariants({ className }), {
77          "items-start": direction === "top",
78          "items-center": direction === "middle",
79          "items-end": direction === "bottom",
80        })}
81      >
82        {renderChildren()}
83      </motion.div>
84    )
85  }
86)
87 
88Dock.displayName = "Dock"
89 
90export interface DockIconProps extends Omit<
91  MotionProps & React.HTMLAttributes<HTMLDivElement>,
92  "children"
93> {
94  size?: number
95  magnification?: number
96// … truncated