| import { useEffect, useRef } from "react"; |
| import { motion, AnimatePresence } from "framer-motion"; |
|
|
| interface ScanningLogProps { |
| logs: string[]; |
| isScanning: boolean; |
| } |
|
|
| export function ScanningLog({ logs, isScanning }: ScanningLogProps) { |
| const scrollRef = useRef<HTMLDivElement>(null); |
|
|
| useEffect(() => { |
| if (scrollRef.current) { |
| scrollRef.current.scrollTop = scrollRef.current.scrollHeight; |
| } |
| }, [logs]); |
|
|
| return ( |
| <div className="h-full flex flex-col font-mono text-xs bg-black relative overflow-hidden"> |
| <div className="px-4 py-3 border-b border-white/[0.06]"> |
| <div className="flex items-center gap-2"> |
| <span className={`block w-1.5 h-1.5 rounded-full transition-colors ${isScanning ? 'bg-emerald-400 animate-pulse' : 'bg-white/20'}`} /> |
| <span className="text-[11px] text-white/35 font-mono uppercase tracking-[0.08em]"> |
| {isScanning ? "Processing" : "System Log"} |
| </span> |
| </div> |
| </div> |
| |
| <div ref={scrollRef} className="flex-1 overflow-y-auto px-4 py-3 space-y-1 scrollbar-none"> |
| <AnimatePresence initial={false}> |
| {logs.map((log, i) => ( |
| <motion.div |
| key={i} |
| initial={{ opacity: 0, x: -4 }} |
| animate={{ opacity: 1, x: 0 }} |
| transition={{ duration: 0.12 }} |
| className="flex gap-2 text-white/30 hover:text-white/50 transition-colors" |
| > |
| <span className="text-white/15 select-none text-[10px] leading-[18px] w-4 text-right shrink-0 tabular-nums"> |
| {String(i + 1).padStart(2, "0")} |
| </span> |
| <span className="text-[11px] leading-[18px]"> |
| {log.startsWith('>') ? ( |
| <span className="text-white/70">{log}</span> |
| ) : ( |
| log |
| )} |
| </span> |
| </motion.div> |
| ))} |
| </AnimatePresence> |
| |
| <div className="h-3 w-[5px] bg-white/15 animate-pulse ml-6 mt-1.5 rounded-sm" /> |
| </div> |
| </div> |
| ); |
| } |
|
|
