glass-dock

1'use client';
2 
3import React, { useRef, useState, useEffect } from 'react';
4import { LucideIcon } from 'lucide-react';
5import { motion, AnimatePresence } from 'framer-motion';
6import { cn } from '@/lib/utils';
7import gsap from "gsap";
8 
9export interface DockItem {
10    title: string;
11    icon: LucideIcon;
12    onClick?: () => void;
13    href?: string;
14}
15 
16export interface GlassDockProps extends React.HTMLAttributes<HTMLDivElement> {
17    items: DockItem[];
18    dockClassName?: string;
19}
20 
21// Attempt to register MorphSVGPlugin if available. 
22if (typeof window !== "undefined") {
23    try {
24        // @ts-ignore
25        import("gsap/MorphSVGPlugin").then((plugin) => {
26            gsap.registerPlugin(plugin.MorphSVGPlugin);
27        }).catch(e => {
28            console.warn("GSAP MorphSVGPlugin not found. Morphing animations will be disabled.", e);
29        });
30    } catch (e) {
31        console.warn("GSAP MorphSVGPlugin not found.", e);
32    }
33}
34 
35// Helper component for Morphing Icons
36const MorphingIcon = ({ type, isActive, onClick, onMouseEnter }: { type: string, isActive: boolean, onClick: () => void, onMouseEnter?: () => void }) => {
37    const buttonRef = useRef<HTMLButtonElement>(null);
38    const pathRef = useRef<SVGPathElement>(null);
39 
40    // Animation functions integrated directly
41    const animateHome = () => {
42        if (!buttonRef.current || !pathRef.current) return;
43        const button = buttonRef.current;
44        const path = pathRef.current;
45 
46        gsap.to(button, {
47            "--tab-bar-home-scale": 0.25,
48            "--tab-bar-home-opacity": 0,
49            duration: 0.1,
50            onComplete: () => {
51                gsap.to(path, {
52                    keyframes: [
53                        { morphSVG: "M12.6387 3.53796L15.1949 7.69178C15.7004 8.51322 15.7802 9.5276 15.4092 10.4179L11.3846 20.0769C11.2016 20.516 11.5243 21 12 21V21C12.4757 21 12.7984 20.516 12.6154 20.0769L8.5908 10.4179C8.21983 9.5276 8.29956 8.51322 8.80506 7.69178L11.3613 3.53796C11.6541 3.06206 12.3459 3.06206 12.6387 3.53796Z", duration: 0.1 },
54                        { morphSVG: "M12.1483 3.46366L12.8548 8.05624C12.9493 8.67024 12.8508 9.29842 12.573 9.85405L8.08541 18.8292C7.58673 19.8265 8.31198 21 9.42705 21H14.5729C15.688 21 16.4133 19.8265 15.9146 18.8292L11.427 9.85405C11.1492 9.29842 11.0507 8.67024 11.1452 8.05624L11.8517 3.46366C11.8778 3.29407 12.1222 3.29407 12.1483 3.46366Z", duration: 0.09 },
55                        {
56// … truncated