NEXUS_AI.pro/pixel-perfect-pixels-main/src/components/chat/TypingIndicator.tsx

import { motion } from "framer-motion";
import { Shield } from "lucide-react";

export const TypingIndicator = () => {
  return (
    <motion.div
      initial={{ opacity: 0, y: 10 }}
      animate={{ opacity: 1, y: 0 }}
      exit={{ opacity: 0, y: -10 }}
      className="flex gap-3 px-4 py-5 bg-card/40"
    >
      <div className="flex-shrink-0 w-7 h-7 rounded-md flex items-center justify-center bg-primary/15 text-primary glow-cyan">
        <Shield size={14} />
      </div>

      <div className="flex-1">
        <div className="flex items-center gap-2 mb-2">
          <span className="text-xs font-bold font-heading tracking-wide text-gradient-cyber">
            NEXUS
          </span>
          <span className="px-1.5 py-0 text-[8px] rounded-full bg-primary/10 text-primary border border-primary/20 font-mono tracking-wider animate-pulse">
            PROCESSING
          </span>
        </div>
        <div className="typing-indicator flex items-center gap-1">
          <span className="w-1.5 h-1.5 rounded-full bg-primary/60"></span>
          <span className="w-1.5 h-1.5 rounded-full bg-primary/60"></span>
          <span className="w-1.5 h-1.5 rounded-full bg-primary/60"></span>
        </div>
      </div>
    </motion.div>
  );
};