Gooey Dropdown

1'use client'
2 
3import React, { useEffect, useId, useMemo, useRef, useState } from 'react'
4import { animate, useMotionValue, useMotionValueEvent, useReducedMotion } from 'motion/react'
5import { cn } from '@/lib/utils'
6import { playHoverSound, playClickSound } from '@/lib/sound'
7 
8export type DropdownItem = {
9  label: string
10  onClick?: () => void
11}
12 
13type SpringConfig = {
14  type: 'spring'
15  stiffness?: number
16  damping?: number
17  mass?: number
18  bounce?: number
19  visualDuration?: number
20}
21 
22export type GooDropdownProps = {
23  trigger?: string
24  items?: DropdownItem[]
25  width?: number
26  align?: 'start' | 'end'
27  gap?: number
28  itemHeight?: number
29  buttonRadius?: number
30  panelRadius?: number
31  fill?: string
32  gooStrength?: number
33  spring?: SpringConfig
34  className?: string
35}
36 
37const BTN_W = 78
38const BTN_H = 34
39const PANEL_PAD = 6
40const FILL = 'var(--color-card)'
41 
42const DEFAULT_ITEMS: DropdownItem[] = [
43  { label: 'Copy link', onClick: () => {} },
44  { label: 'Share on X', onClick: () => {} },
45  { label: 'Embed', onClick: () => {} },
46]
47 
48const DEFAULT_SPRING: SpringConfig = {
49  type: 'spring',
50  visualDuration: 0.3,
51  bounce: 0.15,
52}
53 
54const lerp = (a: number, b: number, t: number) => a + (b - a) * t
55 
56function roundedRectShape(x: number, y: number, w: number, h: number, radius: number) {
57  const r = Math.max(0, Math.min(radius, w / 2, h / 2))
58  const k = r * 0.5523
59  const x1 = x
60  const y1 = y
61  const x2 = x + w
62  const y2 = y + h
63  const p = (n: number) => `${n.toFixed(3)}px`
64 
65  return (
66    `shape(from ${p(x1 + r)} ${p(y1)}, ` +
67    `line to ${p(x2 - r)} ${p(y1)}, ` +
68    `curve to ${p(x2)} ${p(y1 + r)} with ${p(x2 - r + k)} ${p(y1)} / ${p(x2)} ${p(y1 + r - k)}, ` +
69    `line to ${p(x2)} ${p(y2 - r)}, ` +
70    `curve to ${p(x2 - r)} ${p(y2)} with ${p(x2)} ${p(y2 - r + k)} / ${p(x2 - r + k)} ${p(y2)}, ` +
71    `line to ${p(x1 + r)} ${p(y2)}, ` +
72    `curve to ${p(x1)} ${p(y2 - r)} with ${p(x1 + r - k)} ${p(y2)} / ${p(x1)} ${p(y2 - r + k)}, ` +
73    `line to ${p(x1)} ${p(y1 + r)}, ` +
74    `curve to ${p(x1 + r)} ${p(y1)} with ${p(x1)} ${p(y1 + r - k)} / ${p(x1 + r - k)} ${p(y1)}, ` +
75    `close)`
76  )
77}
78 
79export function GooDropdown({
80  trigger = 'Share',
81  items = DEFAULT_ITEMS,
82  width = 240,
83  align = 'end',
84  gap = 18,
85  itemHeight = 40,
86  buttonRadius = 12,
87  panelRadius = 20,
88  fill = FILL,
89  gooStrength = 8,
90  spring = DEFAULT_SPRING,
91  className,
92}: GooDropdownProps) {
93  const [open, setOpen] = useState(false)
94  const [activeIndex, setActiveIndex] = useState(0)
95// … truncated