8-bit FAQ3

1"use client";
2 
3import { useState } from "react";
4 
5import { cn } from "@/lib/utils";
6 
7import {
8  Accordion,
9  AccordionContent,
10  AccordionItem,
11  AccordionTrigger,
12} from "@/components/ui/8bit/accordion";
13import { Input } from "@/components/ui/8bit/input";
14 
15import "@/components/ui/8bit/styles/retro.css";
16 
17export interface FAQItem {
18  answer: string;
19  category?: string;
20  question: string;
21}
22 
23interface FAQ3Props {
24  className?: string;
25  description?: string;
26  items?: FAQItem[];
27  title?: string;
28}
29 
30const defaultItems: FAQItem[] = [
31  {
32    category: "General",
33    question: "What is 8bitcn?",
34    answer:
35      "A retro-styled component library for React. Think shadcn/ui but everything looks like it came from a 1985 arcade cabinet.",
36  },
37  {
38    category: "General",
39    question: "Is this production ready?",
40    answer:
41      "Yes. Every component is accessible, responsive, and tested. The pixel borders are decorative — the engineering is serious.",
42  },
43  {
44    category: "Setup",
45    question: "How do I install components?",
46    answer:
47      "Use the shadcn CLI: pnpm dlx shadcn@latest add @8bitcn/button. Components are copied into your project — no runtime dependency.",
48  },
49  {
50    category: "Setup",
51    question: "Does it work with existing shadcn?",
52    answer:
53      "Absolutely. 8bitcn wraps shadcn components. Your existing setup stays intact. Just add the retro layer on top.",
54  },
55  {
56    category: "Billing",
57    question: "Is the library free?",
58    answer:
59      "The core library is MIT licensed and free forever. Premium blocks and templates will be available separately.",
60  },
61  {
62    category: "Billing",
63    question: "Do you offer team licenses?",
64    answer:
65      "Not yet, but it's on the roadmap. For now, one purchase covers your entire team since components are copy-pasted.",
66  },
67];
68 
69export default function FAQ3({
70  title = "Help Center",
71  description = "Search or browse common questions",
72  items = defaultItems,
73  className,
74}: FAQ3Props) {
75  const [search, setSearch] = useState("");
76 
77  const filtered = search
78    ? items.filter(
79        (item) =>
80          item.question.toLowerCase().includes(search.toLowerCase()) ||
81          item.answer.toLowerCase().includes(search.toLowerCase()),
82      )
83    : items;
84 
85  const categories = [...new Set(filtered.map((item) => item.category).filter(Boolean))];
86 
87  return (
88    <section className={cn("w-full px-4 py-16", className)}>
89      <div className="mx-auto max-w-2xl">
90// … truncated