8-bit FAQ2

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 FAQItem {
13  answer: string;
14  question: string;
15}
16 
17interface FAQ2Props {
18  className?: string;
19  description?: string;
20  items?: FAQItem[];
21  title?: string;
22}
23 
24const defaultItems: FAQItem[] = [
25  {
26    question: "What do I get?",
27    answer: "50+ retro-styled components, blocks, and a full registry. Copy, paste, ship.",
28  },
29  {
30    question: "Is it free?",
31    answer: "The core library is 100% open source. Premium blocks and themes coming soon.",
32  },
33  {
34    question: "What frameworks?",
35    answer: "Built for React and Next.js. Works with any project that uses shadcn/ui.",
36  },
37  {
38    question: "How do I install?",
39    answer: "Run the shadcn CLI: pnpm dlx shadcn@latest add @8bitcn/button. That's it.",
40  },
41  {
42    question: "Can I customize?",
43    answer: "Everything is yours. Copy the source, change the colors, modify the borders. No lock-in.",
44  },
45  {
46    question: "Need help?",
47    answer: "Join our Discord or open a GitHub issue. The community is active and friendly.",
48  },
49];
50 
51export default function FAQ2({
52  title = "Quick Answers",
53  description = "No scrolling through walls of text",
54  items = defaultItems,
55  className,
56}: FAQ2Props) {
57  return (
58    <section className={cn("w-full px-4 py-16", className)}>
59      <div className="mx-auto max-w-4xl">
60        {(title || description) && (
61          <div className="mb-10 text-center">
62            {title && (
63              <h2 className="retro mb-3 font-bold text-2xl tracking-tight md:text-3xl">
64                {title}
65              </h2>
66            )}
67            {description && (
68              <p className="retro mx-auto max-w-xl text-muted-foreground text-[9px]">
69                {description}
70              </p>
71            )}
72          </div>
73        )}
74 
75        <div className="grid gap-x-4 gap-y-1 sm:grid-cols-2">
76          {items.map((item) => (
77            <Card key={item.question}>
78              <CardHeader className="pb-2">
79                <CardTitle className="retro text-xs">{item.question}</CardTitle>
80              </CardHeader>
81              <CardContent>
82                <p className="retro text-[9px] leading-relaxed text-muted-foreground">
83                  {item.answer}
84                </p>
85              </CardContent>
86            </Card>
87          ))}
88        </div>
89      </div>
90// … truncated