Searchable Question Index

"use client";

import React from "react";
import SearchableQuestionIndex, { QuestionItem } from "@/components/ui/searchable-question-index";

const items: QuestionItem[] = [
  {
    id: "getting-started-install",
    category: "General",
    question: "How do I install the component library?",
    answer: "You can install any component directly using the 21st.dev CLI command with npx @21st-dev/cli add <component-name>, or copy-paste the component file directly into your project.",
  },
  {
    id: "billing-refunds",
    category: "Billing",
    question: "What is your refund policy?",
    answer: "We offer a 14-day no-questions-asked refund policy for all annual subscriptions. Monthly plans can be cancelled anytime without further charges.",
  },
  {
    id: "security-encryption",
    category: "Security",
    question: "Is data encrypted at rest and in transit?",
    answer: "Yes, all data is encrypted in transit using TLS 1.3 and at rest using AES-256 encryption. We regularly conduct external security audits and penetration tests.",
  },
  {
    id: "account-seats",
    category: "Account",
    question: "Can I add multiple team members to my organization?",
    answer: "Team accounts allow inviting unlimited collaborators with fine-grained role-based access control, including Admin, Editor, and Viewer permissions.",
  },
  {
    id: "billing-invoices",
    category: "Billing",
    question: "Where can I download my tax invoices?",
    answer: "Tax invoices and receipts are automatically sent to your billing email address and are also available for download in the Billing tab of your Organization settings.",
  },
];

export default function SearchableQuestionIndexDemo() {
  return (
    <div className="flex w-full items-center justify-center p-4 md:p-8 min-h-[550px]">
      <SearchableQuestionIndex
        title="Knowledge Base & FAQ"
        placeholder="Type keywords to search articles…"
        items={items}
      />
    </div>
  );
}