Terminal Demo

1import {
2  Terminal,
3  TerminalCommand,
4  TerminalOutput,
5} from "@/registry/loomui/terminal"
6 
7export default function TerminalDemo() {
8  return (
9    <Terminal title="~/acme-app" className="max-w-lg">
10      <TerminalCommand>npx shadcn@latest add @loomui/terminal</TerminalCommand>
11      <TerminalOutput delay={420}>Checking registry...</TerminalOutput>
12      <TerminalOutput delay={520}>
13        <svg
14          viewBox="0 0 24 24"
15          fill="none"
16          stroke="currentColor"
17          strokeWidth="3"
18          strokeLinecap="round"
19          strokeLinejoin="round"
20          aria-hidden="true"
21          className="text-accent inline-block size-3"
22        >
23          <path d="M20 6 9 17l-5-5" />
24        </svg>{" "}
25        Installed terminal.tsx
26      </TerminalOutput>
27      <TerminalOutput delay={260}>
28        <svg
29          viewBox="0 0 24 24"
30          fill="none"
31          stroke="currentColor"
32          strokeWidth="3"
33          strokeLinecap="round"
34          strokeLinejoin="round"
35          aria-hidden="true"
36          className="text-accent inline-block size-3"
37        >
38          <path d="M20 6 9 17l-5-5" />
39        </svg>{" "}
40        Updated app/globals.css
41      </TerminalOutput>
42      <TerminalCommand>pnpm dev</TerminalCommand>
43      <TerminalOutput delay={380}>
44        ready on http://localhost:3000
45      </TerminalOutput>
46    </Terminal>
47  )
48}