8-bit Advanced 1

1import { cn } from "@/lib/utils";
2 
3import {
4  Card,
5  CardContent,
6  CardHeader,
7  CardTitle,
8} from "@/components/ui/8bit/card";
9 
10import "@/components/ui/8bit/styles/retro.css";
11 
12export interface TerminalLine {
13  color?: string;
14  text: string;
15  type: "input" | "output" | "comment";
16}
17 
18interface Advanced1Props {
19  className?: string;
20  lines?: TerminalLine[];
21  title?: string;
22}
23 
24const defaultLines: TerminalLine[] = [
25  { type: "comment", text: "# Install 8bitcn components" },
26  { type: "input", text: "pnpm dlx shadcn@latest add @8bitcn/button" },
27  { type: "output", text: "Installing @8bitcn/button..." },
28  { type: "output", text: "Created components/ui/8bit/button.tsx" },
29  { type: "output", text: "Created components/ui/8bit/styles/retro.css" },
30  { type: "output", text: "Done in 1.2s" },
31  { type: "comment", text: "" },
32  { type: "comment", text: "# Add a block" },
33  { type: "input", text: "pnpm dlx shadcn@latest add @8bitcn/hero1" },
34  { type: "output", text: "Installing @8bitcn/hero1..." },
35  { type: "output", text: "Created components/ui/8bit/blocks/hero1.tsx" },
36  { type: "output", text: "Done in 0.8s" },
37];
38 
39function lineClass(type: TerminalLine["type"]): string {
40  if (type === "input") {
41    return "text-foreground";
42  }
43  if (type === "comment") {
44    return "text-muted-foreground";
45  }
46  return "text-muted-foreground/70";
47}
48 
49function linePrefix(type: TerminalLine["type"]): string {
50  if (type === "input") {
51    return "> ";
52  }
53  return "";
54}
55 
56export default function Advanced1({
57  title = "Terminal",
58  lines = defaultLines,
59  className,
60}: Advanced1Props) {
61  return (
62    <section className={cn("w-full px-4 py-16", className)}>
63      <div className="mx-auto max-w-2xl">
64        <Card className="bg-background">
65          <CardHeader className="pb-2">
66            <div className="flex items-center gap-2">
67              <div className="flex gap-1.5">
68                <div className="size-2.5 bg-destructive" />
69                <div className="size-2.5 bg-yellow-500" />
70                <div className="size-2.5 bg-green-500" />
71              </div>
72              <CardTitle className="retro text-[10px] text-muted-foreground">
73                {title}
74              </CardTitle>
75            </div>
76          </CardHeader>
77          <CardContent>
78            <div className="space-y-0.5">
79              {lines.map((line, idx) => (
80                <p
81                  className={cn("retro text-[10px] leading-relaxed", lineClass(line.type))}
82// … truncated