Components
Loading preview...
A React component that renders a simulated terminal interface, cycling through a predefined list of log messages at regular intervals.
npx shadcn@latest add https://21st.dev/r/cnippet.dev/terminal-card"use client";
import { useEffect, useRef, useState } from "react";
const LOG_LINES = [
"> Initializing UI pipeline...",
"> Loading model weights: 2.4GB",
"> Connecting to data stream...",
"> Analyzing codebase...",
"> bunx --bun cnippet@latest add ui",
"> Optimization pass: 1/3",
"> Optimization pass: 2/3",
"> Optimization pass: 3/3",
"> Create a components.json file to add components. Proceed? ... yes",
"> ✔ Writing components.json.",
"> 98% Optimized",
"> Creating components/ui/accordion.tsx",
"> Creating components/ui/alert-dialog.tsx",
"> Creating components/ui/aler.tsx",
"> Creating components/ui/autocomplete.tsx",
"> Creating components/ui/avatar.tsx",
"> Creating components/ui/badge.tsx",
"> Creating components/ui/breadcrumb.tsx",
"> Creating components/ui/button.tsx",
"> Creating components/ui/card.tsx",
"> Creating components/ui/carousel.tsx",
"> Creating components/ui/chart.tsx",
"> Creating components/ui/checkbox.tsx",
"> Creating components/ui/accordion.tsx",
"> Creating 46 other files",
"> Deploying to edge nodes...",
"> Status: OPERATIONAL",
"> Latency: 12ms p99",
"> Throughput: 14.2k req/s",
"> Memory: 847MB / 2048MB",
"> --------- CYCLE COMPLETE ---------",
];
export default function TerminalCard() {
const [lines, setLines] = useState<string[]>([LOG_LINES[0]]);
const indexRef = useRef(0);
useEffect(() => {
const interval = setInterval(() => {
const next = (indexRef.current + 1) % LOG_LINES.length;
indexRef.current = next;
if (next === 0) {
setLines([LOG_LINES[0]]);
} else {
setLines((l) => [...l.slice(-8), LOG_LINES[next]]);
}
}, 1800);
return () => clearInterval(interval);
}, []);
return (
<div className="flex flex-col h-full mx-auto w-full max-w-xl border-2 border-black dark:border-white">
<div className="flex items-center gap-2 border-b-2 border-foreground px-4 py-2">
<span className="h-2 w-2 bg-red-600" />
<span className="h-2 w-2 bg-yellow-500" />
<span className="h-2 w-2 bg-green-500" />
<span className="ml-auto text-[10px] tracking-widest text-muted-foreground uppercase">
terminal.cnippet
</span>
</div>
<div className="flex-1 bg-foreground p-4 overflow-hidden">
<div className="flex flex-col gap-1">
{lines.map((line, i) => (
<span
key={i}
className="text-xs text-background font-mono block"
style={{ opacity: i === lines.length - 1 ? 1 : 0.6 }}
>
{line}
</span>
))}
<span className="text-xs text-[#ea580c] font-mono animate-blink">
{"_"}
</span>
</div>
</div>
</div>
);
}