Developer Tools

// VoiceHUD.tsx
import { motion } from 'framer-motion';

export const VoiceHUD = ({ isListening }: { isListening: boolean }) => {
  if (!isListening) return null;

  return (
    <div className="fixed bottom-right z-50 m-6">
      <motion.div 
        initial={{ opacity: 0, scale: 0.9 }}
        animate={{ opacity: 1, scale: 1 }}
        className="backdrop-blur-[12px] bg-black/60 border border-white/10 rounded-full px-6 py-3 flex items-center gap-3 shadow-2xl"
      >
        <div className="w-3 h-3 rounded-full bg-primary animate-pulse" />
        <span className="text-sm font-medium text-white tracking-wide">Listening...</span>
      </motion.div>
    </div>
  );
};