Terminal

"use client";

import { useEffect, useState } from "react";

import { AnimatedSpan, Terminal, TypingAnimation } from "@/lab/magicui/ui/terminal";

import { Fit } from "./fit";

export default function TerminalDemo() {
  // The sequence plays once; restart it so the card loops.
  const [run, setRun] = useState(0);
  useEffect(() => {
    const id = setInterval(() => setRun((r) => r + 1), 15000);
    return () => clearInterval(id);
  }, []);
  return (
    <Fit width={520} height={420}>
      <div className="flex h-full w-full items-center justify-center text-neutral-950">
        <Terminal key={run}>
          <TypingAnimation>&gt; pnpm dlx shadcn@latest init</TypingAnimation>
          <AnimatedSpan className="text-green-500">✔ Preflight checks.</AnimatedSpan>
          <AnimatedSpan className="text-green-500">✔ Verifying framework. Found Next.js.</AnimatedSpan>
          <AnimatedSpan className="text-green-500">✔ Validating Tailwind CSS.</AnimatedSpan>
          <AnimatedSpan className="text-green-500">✔ Validating import alias.</AnimatedSpan>
          <AnimatedSpan className="text-green-500">✔ Writing components.json.</AnimatedSpan>
          <AnimatedSpan className="text-green-500">✔ Checking registry.</AnimatedSpan>
          <AnimatedSpan className="text-green-500">✔ Updating tailwind.config.ts</AnimatedSpan>
          <AnimatedSpan className="text-green-500">✔ Updating app/globals.css</AnimatedSpan>
          <AnimatedSpan className="text-green-500">✔ Installing dependencies.</AnimatedSpan>
          <AnimatedSpan className="text-blue-500">
            <span>ℹ Updated 1 file:</span>
            <span className="pl-2">- lib/utils.ts</span>
          </AnimatedSpan>
          <TypingAnimation className="text-neutral-500">Success! Project initialization completed.</TypingAnimation>
          <TypingAnimation className="text-neutral-500">You may now add components.</TypingAnimation>
        </Terminal>
      </div>
    </Fit>
  );
}