Voice Aura

1"use client";
2 
3import { useState, type ReactNode } from "react";
4import { AnimatePresence, motion } from "motion/react";
5import { cn } from "@/lib/utils";
6 
7type VoiceAuraProps = {
8  iconSize?: string;
9  icon?: ReactNode;
10  buttonClassName?: string;
11  buttonWrapperClassName?: string;
12  overlayClassName?: string;
13  backdropClassName?: string;
14  defaultOpen?: boolean;
15  open?: boolean;
16  onOpenChange?: (open: boolean) => void;
17};
18 
19export default function VoiceAura({
20  iconSize = "size-5",
21  icon,
22  buttonClassName,
23  buttonWrapperClassName,
24  overlayClassName,
25  backdropClassName,
26  defaultOpen = false,
27  open,
28  onOpenChange,
29}: VoiceAuraProps) {
30  const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
31  const isControlled = open !== undefined;
32  const isOpen = isControlled ? open : uncontrolledOpen;
33 
34  const handleOpenChange = (open: boolean) => {
35    if (!isControlled) {
36      setUncontrolledOpen(open);
37    }
38 
39    onOpenChange?.(open);
40  };
41 
42  return (
43    <div
44      className={cn(
45        "relative inline-flex items-center justify-center",
46        buttonWrapperClassName
47      )}
48    >
49      <motion.button
50        type="button"
51        onClick={() => handleOpenChange(!isOpen)}
52        aria-pressed={isOpen}
53        whileTap={{ scale: 0.95 }}
54        animate={
55          isOpen
56            ? {
57                boxShadow: [
58                  "0 0 0 0px rgba(34,211,238,0)",
59                  "0 0 0 12px rgba(34,211,238,0.22)",
60                  "0 0 0 0px rgba(34,211,238,0)",
61                ],
62              }
63            : { boxShadow: "0 0 0 0px rgba(59,130,246,0)" }
64        }
65        transition={
66          isOpen
67            ? { duration: 2, repeat: Infinity, ease: "easeInOut" }
68            : { duration: 0.3 }
69        }
70        className={cn(
71          "relative z-10 rounded-full bg-neutral-800 p-2 text-white transition-colors duration-150 ease-out hover:bg-neutral-700 dark:bg-neutral-100 dark:text-neutral-900 dark:hover:bg-neutral-200",
72          buttonClassName
73        )}
74      >
75        {icon ?? <MicrophoneIcon className={iconSize} />}
76      </motion.button>
77 
78      <AnimatePresence>
79        {isOpen && (
80          <AuraLayer
81            overlayClassName={overlayClassName}
82            backdropClassName={backdropClassName}
83          />
84        )}
85      </AnimatePresence>
86    </div>
87  );
88}
89 
90function AuraLayer({
91  overlayClassName,
92  backdropClassName,
93}: {
94  overlayClassName?: string;
95  backdropClassName?: string;
96}) {
97  return (
98// … truncated