"use client"; import React, { useRef, useState } from "react"; import { motion } from "motion/react"; import TwitterXIcon from "../ui/twitter-x-icon"; import GithubIcon from "../ui/github-icon"; import WhatsappIcon from "../ui/whatsapp-icon"; import FacebookIcon from "../ui/facebook-icon"; import LinkedinIcon from "../ui/linkedin-icon"; import InstagramIcon from "../ui/instagram-icon"; import { AnimatedIconProps, AnimatedIconHandle } from "../ui/types"; const dockItems = [ { icon: TwitterXIcon, label: "Twitter/X", href: "#" }, { icon: WhatsappIcon, label: "Whatsapp", href: "#" }, { icon: GithubIcon, label: "GitHub", href: "#" }, { icon: FacebookIcon, label: "Facebook", href: "#" }, { icon: LinkedinIcon, label: "LinkedIn", href: "#" }, { icon: InstagramIcon, label: "Instagram", href: "#" }, ]; interface DockItemProps { icon: React.ComponentType< AnimatedIconProps & React.RefAttributes >; label: string; href: string; isAnimated?: boolean; } const DockItem = ({ icon: Icon, label, href, isAnimated = true, }: DockItemProps) => { const iconRef = useRef(null); const [isHovered, setIsHovered] = useState(false); const handleMouseEnter = () => { setIsHovered(true); if (isAnimated) { iconRef.current?.startAnimation(); } }; const handleMouseLeave = () => { setIsHovered(false); if (isAnimated) { iconRef.current?.stopAnimation(); } }; React.useEffect(() => { if (!isAnimated) { iconRef.current?.stopAnimation(); } }, [isAnimated]); return ( {label}

{/* Tooltip */} {label} ); }; const Dock = ({ isAnimated = true }: { isAnimated?: boolean }) => { const [isHovered, setIsHovered] = useState(false); return (

setIsHovered(true)} onMouseLeave={() => setIsHovered(false)} animate={{ paddingLeft: isHovered ? 50 : 12, paddingRight: isHovered ? 50 : 12, gap: isHovered ? 24 : 8, }} transition={{ type: "spring", stiffness: 250, damping: 20, }} > {dockItems.map((item) => ( ))}

); }; export default Dock;

Dock

Platform

Category