Badge Button Combo

1"use client";
2 
3import * as React from "react";
4import { motion, AnimatePresence } from "motion/react";
5 
6/* ── sound ── */
7let _a: AudioContext, _b: AudioBuffer;
8const tick = () => {
9  if (typeof window === "undefined") return;
10  if (!_a) {
11    _a = new AudioContext();
12    _b = _a.createBuffer(1, (_a.sampleRate * 0.003) | 0, _a.sampleRate);
13    const d = _b.getChannelData(0);
14    for (let i = 0; i < d.length; i++)
15      d[i] = (Math.random() * 2 - 1) * (1 - i / d.length) ** 4;
16  }
17  const s = _a.createBufferSource();
18  s.buffer = _b;
19  const g = _a.createGain();
20  g.gain.value = 0.08;
21  s.connect(g).connect(_a.destination);
22  s.start();
23};
24 
25/* ── theme ── */
26const CSS = `
27.bx{
28  --bx-glass:linear-gradient(180deg,rgba(255,255,255,0.78),rgba(255,255,255,0.62));
29  --bx-border:rgba(0,0,0,0.06);
30  --bx-shadow:0 0 1px rgba(0,0,0,0.04),0 2px 8px rgba(0,0,0,0.04),inset 0 1px 0 rgba(255,255,255,0.8);
31  --bx-hi:rgba(0,0,0,0.88);
32  --bx-chip:rgba(0,0,0,0.06);
33  --bx-chip-t:rgba(0,0,0,0.65)
34}
35.dark .bx,[data-theme="dark"] .bx{
36  --bx-glass:linear-gradient(180deg,rgba(255,255,255,0.05),rgba(255,255,255,0.02));
37  --bx-border:rgba(255,255,255,0.07);
38  --bx-shadow:0 1px 3px rgba(0,0,0,0.08),inset 0 1px 0 rgba(255,255,255,0.04);
39  --bx-hi:rgba(255,255,255,0.88);
40  --bx-chip:rgba(255,255,255,0.08);
41  --bx-chip-t:rgba(255,255,255,0.65)
42}`;
43 
44/* ── component ── */
45export interface BadgeButtonComboProps {
46  label: string;
47  badge?: number | string;
48  onClick?: () => void;
49  sound?: boolean;
50  style?: React.CSSProperties;
51}
52 
53export default function BadgeButtonCombo({
54  label,
55  badge,
56  onClick,
57  sound = true,
58  style,
59}: BadgeButtonComboProps) {
60  return (
61    <>
62      <style dangerouslySetInnerHTML={{ __html: CSS }} />
63      <motion.button
64        className="bx"
65        onClick={() => {
66          onClick?.();
67          if (sound) tick();
68        }}
69        whileHover={{ scale: 1.04 }}
70        whileTap={{ scale: 0.96 }}
71        transition={{ type: "spring", stiffness: 500, damping: 30 }}
72        style={{
73          display: "inline-flex",
74          alignItems: "center",
75          gap: 8,
76          padding: "8px 14px",
77          borderRadius: 10,
78          border: "1px solid var(--bx-border)",
79          background: "var(--bx-glass)",
80          boxShadow: "var(--bx-shadow)",
81          backdropFilter: "blur(24px)",
82          WebkitBackdropFilter: "blur(24px)",
83          color: "var(--bx-hi)",
84          fontSize: 13,
85          fontWeight: 500,
86// … truncated