xlibs-components/dist/components/magicui/dock.js

Modern React component library with Aceternity, MagicUI, and ShadCN components for building beautiful web applications

"use client";
import { jsx as _jsx } from "react/jsx-runtime";
import * as React from "react";
import { motion, useMotionValue, useSpring, useTransform } from "framer-motion";
export const DockIcon = React.forwardRef(({ children, mouseX, index, total }, ref) => {
    const ref2 = React.useRef(null);
    const distance = useTransform(mouseX, (val) => {
        const bounds = ref2.current?.getBoundingClientRect() ?? { x: 0, width: 0 };
        return val - bounds.x - bounds.width / 2;
    });
    const widthTransform = useTransform(distance, [-150, 0, 150], [40, 80, 40]);
    const heightTransform = useTransform(distance, [-150, 0, 150], [40, 80, 40]);
    const width = useSpring(widthTransform, {
        mass: 0.1,
        stiffness: 150,
        damping: 12,
    });
    const height = useSpring(heightTransform, {
        mass: 0.1,
        stiffness: 150,
        damping: 12,
    });
    return (_jsx(motion.div, { ref: ref2, style: {
            width,
            height,
        }, className: "aspect-square rounded-full bg-card border border-border flex items-center justify-center cursor-pointer hover:bg-accent transition-colors duration-200", children: _jsx("div", { className: "w-6 h-6 text-foreground", children: children }) }));
});
DockIcon.displayName = "DockIcon";
export const Dock = React.forwardRef(({ children, className }, ref) => {
    const mouseX = useMotionValue(Infinity);
    return (_jsx(motion.div, { ref: ref, onMouseMove: (e) => mouseX.set(e.pageX), onMouseLeave: () => mouseX.set(Infinity), className: className, children: _jsx("div", { className: "flex items-end gap-2 rounded-full bg-card/50 backdrop-blur-sm border border-border p-2", children: React.Children.map(children, (child, index) => {
                if (React.isValidElement(child) && child.type === DockIcon) {
                    return React.cloneElement(child, {
                        mouseX,
                        index,
                        total: React.Children.count(children),
                    });
                }
                return child;
            }) }) }));
});
Dock.displayName = "Dock";