terminal

1import {
2  AnimatedSpan,
3  Terminal,
4  TypingAnimation,
5} from "@/components/magicui/terminal";
6 
7export function TerminalDemo() {
8  return (
9    <Terminal>
10      <TypingAnimation>&gt; pnpm dlx shadcn@latest init</TypingAnimation>
11 
12      <AnimatedSpan delay={1500} className="text-green-500">
13        <span>✔ Preflight checks.</span>
14      </AnimatedSpan>
15 
16      <AnimatedSpan delay={2000} className="text-green-500">
17        <span>✔ Verifying framework. Found Next.js.</span>
18      </AnimatedSpan>
19 
20      <AnimatedSpan delay={2500} className="text-green-500">
21        <span>✔ Validating Tailwind CSS.</span>
22      </AnimatedSpan>
23 
24      <AnimatedSpan delay={3000} className="text-green-500">
25        <span>✔ Validating import alias.</span>
26      </AnimatedSpan>
27 
28      <AnimatedSpan delay={3500} className="text-green-500">
29        <span>✔ Writing components.json.</span>
30      </AnimatedSpan>
31 
32      <AnimatedSpan delay={4000} className="text-green-500">
33        <span>✔ Checking registry.</span>
34      </AnimatedSpan>
35 
36      <AnimatedSpan delay={4500} className="text-green-500">
37        <span>✔ Updating tailwind.config.ts</span>
38      </AnimatedSpan>
39 
40      <AnimatedSpan delay={5000} className="text-green-500">
41        <span>✔ Updating app/globals.css</span>
42      </AnimatedSpan>
43 
44      <AnimatedSpan delay={5500} className="text-green-500">
45        <span>✔ Installing dependencies.</span>
46      </AnimatedSpan>
47 
48      <AnimatedSpan delay={6000} className="text-blue-500">
49        <span>ℹ Updated 1 file:</span>
50        <span className="pl-2">- lib/utils.ts</span>
51      </AnimatedSpan>
52 
53      <TypingAnimation delay={6500} className="text-muted-foreground">
54        Success! Project initialization completed.
55      </TypingAnimation>
56 
57      <TypingAnimation delay={7000} className="text-muted-foreground">
58        You may now add components.
59      </TypingAnimation>
60    </Terminal>
61  );
62}