"use client"; import { useEffect, useState } from "react"; import { motion, AnimatePresence } from "framer-motion"; import { cn } from "@/lib/utils"; type LineKind = "prompt" | "output" | "success" | "muted"; interface TermLine { kind: LineKind; text: string; } const SCRIPT: TermLine[] = [ { kind: "prompt", text: "npx lumenite add spotlight-card" }, { kind: "muted", text: "Resolving packages..." }, { kind: "muted", text: "Fetching component tree..." }, { kind: "output", text: "+ src/components/library/spotlight-card.tsx" }, { kind: "output", text: "+ src/lib/utils.ts" }, { kind: "success", text: "✓ Installed 1 component in 0.8s" }, { kind: "prompt", text: "npm run build" }, { kind: "muted", text: "Compiling..." }, { kind: "success", text: "✓ Build complete, 0 errors, 0 warnings" }, ]; function colorFor(kind: LineKind) { switch (kind) { case "prompt": return "text-white"; case "success": return "text-emerald-400"; case "muted": return "text-zinc-500"; default: return "text-zinc-300"; } } export function Terminal({ className }: { className?: string }) { const [visible, setVisible] = useState(0); const [typed, setTyped] = useState(""); const [cycle, setCycle] = useState(0); useEffect(() => { if (visible >= SCRIPT.length) { const t = setTimeout(() => { setVisible(0); setTyped(""); setCycle((c) => c + 1); }, 1800); return () => clearTimeout(t); } const line = SCRIPT[visible]; if (line.kind !== "prompt") { const t = setTimeout(() => setVisible((v) => v + 1), 420); return () => clearTimeout(t); } let i = 0; const speed = 28; const interval = setInterval(() => { i += 1; setTyped(line.text.slice(0, i)); if (i >= line.text.length) { clearInterval(interval); setTimeout(() => { setVisible((v) => v + 1); setTyped(""); }, 350); } }, speed); return () => clearInterval(interval); // eslint-disable-next-line react-hooks/exhaustive-deps }, [visible, cycle]); const current = SCRIPT[visible]; const isTypingPrompt = current?.kind === "prompt"; return (

zsh, lumenite

{SCRIPT.slice(0, visible).map((line, i) => ( {line.kind === "prompt" ? ( ➜ {line.text} ) : ( line.text )} ))} {isTypingPrompt && (

➜ {typed}

)}

); } export default function Demo() { return (

); }