circle-menu

1'use client';
2 
3import { AnimatePresence, motion, useAnimationControls } from 'framer-motion';
4import { Menu, X } from 'lucide-react';
5import React, { useState } from 'react';
6import { cn } from '@/lib/utils';
7 
8const CONSTANTS = {
9    itemSize: 48,
10    containerSize: 250,
11    openStagger: 0.02,
12    closeStagger: 0.07
13};
14 
15const STYLES: Record<string, Record<string, string>> = {
16    trigger: {
17        container:
18            'rounded-full flex items-center bg-[#27272A] justify-center border border-white/10 cursor-pointer outline-none ring-0 hover:brightness-125 transition-all duration-100 z-50',
19        active: 'bg-[#27272A]'
20    },
21    item: {
22        container:
23            'rounded-full flex items-center justify-center absolute bg-zinc-100 text-black hover:bg-white cursor-pointer',
24        label: 'text-xs text-black absolute top-full left-1/2 -translate-x-1/2 text-white mt-1'
25    }
26};
27 
28const pointOnCircle = (i: number, n: number, r: number, cx = 0, cy = 0) => {
29    const theta = (2 * Math.PI * i) / n - Math.PI / 2;
30    const x = cx + r * Math.cos(theta);
31    const y = cy + r * Math.sin(theta) + 0;
32    return { x, y };
33};
34 
35interface MenuItemProps {
36    icon: React.ReactNode;
37    label: string;
38    onClick?: () => void;
39    index: number;
40    totalItems: number;
41    isOpen: boolean;
42}
43 
44const MenuItem = ({ icon, label, onClick, index, totalItems, isOpen }: MenuItemProps) => {
45    const { x, y } = pointOnCircle(index, totalItems, CONSTANTS.containerSize / 2);
46    const [hovering, setHovering] = useState(false);
47 
48    return (
49        <motion.button
50            onClick={onClick}
51            animate={{
52                x: isOpen ? x : 0,
53                y: isOpen ? y : 0
54            }}
55            whileHover={{
56                scale: 1.1,
57                transition: {
58                    duration: 0.1,
59                    delay: 0
60                }
61            }}
62            transition={{
63                delay: isOpen ? index * CONSTANTS.openStagger : index * CONSTANTS.closeStagger,
64                type: 'spring',
65                stiffness: 300,
66                damping: 30
67            }}
68            style={{
69                height: CONSTANTS.itemSize - 2,
70                width: CONSTANTS.itemSize - 2
71            }}
72            className={STYLES.item.container}
73            onMouseEnter={() => setHovering(true)}
74            onMouseLeave={() => setHovering(false)}
75        >
76            {icon}
77            {hovering && <p className={STYLES.item.label}>{label}</p>}
78// … truncated