Faq 3

1"use client";
2 
3import { ChevronDown, Search } from "lucide-react";
4import { AnimatePresence, motion, useReducedMotion } from "motion/react";
5import { useMemo, useState } from "react";
6 
7export interface FaqSearchableProps {
8  description?: string;
9  faqs?: Array<{
10    question: string;
11    answer: string;
12  }>;
13  noResultsText?: string;
14  searchPlaceholder?: string;
15  title?: string;
16}
17 
18const defaultFaqs = [
19  {
20    answer:
21      "Getting started is easy! Simply install the package via npm or pnpm, import the components you need, and start building. We provide comprehensive documentation and examples to help you get up and running quickly.",
22    question: "How do I get started with SmoothUI?",
23  },
24  {
25    answer:
26      "Yes! SmoothUI is completely free and open source. You can use it in both personal and commercial projects without any restrictions. We believe in making beautiful UI components accessible to everyone.",
27    question: "Is SmoothUI free to use?",
28  },
29  {
30    answer:
31      "SmoothUI requires React 18 or later and works with Next.js 13+. You'll also need Node.js 18+ and a modern browser that supports CSS animations and transforms.",
32    question: "What are the system requirements?",
33  },
34  {
35    answer:
36      "Absolutely! All animations are fully customizable. You can modify timing, easing, and effects using Motion (Framer Motion) props. We also respect the prefers-reduced-motion setting for accessibility.",
37    question: "Can I customize the animations?",
38  },
39  {
40    answer:
41      "You can report bugs by opening an issue on our GitHub repository. Please include a detailed description, steps to reproduce, and your environment details. We actively monitor and respond to issues.",
42    question: "How do I report bugs or issues?",
43  },
44  {
45    answer:
46      "Yes, we offer enterprise support packages that include priority bug fixes, dedicated support channels, custom component development, and SLA guarantees. Contact us for more information.",
47    question: "Is there enterprise support available?",
48  },
49];
50 
51export function FaqSearchable({
52  title = "Frequently Asked Questions",
53  description = "Search through our FAQ to find answers to your questions",
54  searchPlaceholder = "Search questions...",
55  noResultsText = "No matching questions found. Try a different search term.",
56  faqs = defaultFaqs,
57}: FaqSearchableProps) {
58  const [searchQuery, setSearchQuery] = useState("");
59  const [openIndex, setOpenIndex] = useState<number | null>(null);
60// … truncated