{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"marketing-faq-sections-search-filter","type":"registry:block","title":"Search Filter","files":[{"path":"components/blocks/marketing/faq-sections/search-filter.tsx","content":"import { useState } from 'react';\nimport { Input } from '@/components/ui/input';\nimport { Search } from 'lucide-react';\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from '@/components/ui/accordion';\n\nconst faqs = [\n  {\n    question: 'How do I reset my password?',\n    answer:\n      \"You can reset your password by clicking on the 'Forgot Password' link on the login page. You'll receive an email with instructions to create a new password.\",\n    tags: ['account', 'security'],\n  },\n  {\n    question: 'Can I change my subscription plan?',\n    answer:\n      'Yes, you can upgrade or downgrade your subscription plan at any time from your account settings. Changes to your plan will take effect immediately.',\n    tags: ['billing', 'subscription'],\n  },\n  {\n    question: 'How do I download my invoices?',\n    answer:\n      'All invoices are available in the Billing section of your account dashboard. You can download them as PDF files or have them emailed to you.',\n    tags: ['billing', 'invoice'],\n  },\n  {\n    question: 'Is there a mobile app available?',\n    answer:\n      'Yes, we offer mobile apps for both iOS and Android devices. You can download them from the respective app stores and sign in with your existing account.',\n    tags: ['platform', 'mobile'],\n  },\n  {\n    question: 'What payment methods do you accept?',\n    answer:\n      'We accept all major credit cards (Visa, Mastercard, American Express), PayPal, and bank transfers for annual enterprise plans.',\n    tags: ['billing', 'payment'],\n  },\n  {\n    question: 'Can I share my account with others?',\n    answer:\n      'Individual accounts are for single-user use only. For team usage, please consider our team plans which allow multiple users with custom permission settings.',\n    tags: ['account', 'teams'],\n  },\n  {\n    question: 'How secure is my data?',\n    answer:\n      'Your data is encrypted both in transit and at rest. We use industry-standard security measures and regularly undergo security audits to ensure your information remains protected.',\n    tags: ['security', 'privacy'],\n  },\n  {\n    question: 'Do you offer discounts for non-profits?',\n    answer:\n      'Yes, we offer special pricing for registered non-profit organizations. Please contact our sales team with proof of your non-profit status to apply for the discount.',\n    tags: ['billing', 'discount'],\n  },\n];\n\nexport default function SearchFilter() {\n  const [searchQuery, setSearchQuery] = useState('');\n\n  const filteredFaqs = faqs.filter(\n    (faq) =>\n      faq.question.toLowerCase().includes(searchQuery.toLowerCase()) ||\n      faq.answer.toLowerCase().includes(searchQuery.toLowerCase()) ||\n      faq.tags.some((tag) =>\n        tag.toLowerCase().includes(searchQuery.toLowerCase())\n      )\n  );\n\n  return (\n    <div className=\"container mx-auto max-w-[85rem] px-4 py-24 md:px-6 lg:py-32 2xl:max-w-[1400px]\">\n      {/* Title */}\n      <div className=\"mx-auto mb-10 max-w-2xl text-center lg:mb-14\">\n        <h2 className=\"text-2xl font-bold md:text-4xl md:leading-tight\">\n          Frequently Asked Questions\n        </h2>\n        <p className=\"text-muted-foreground mt-4\">\n          Find answers to your questions or search for specific topics\n        </p>\n      </div>\n      {/* End Title */}\n\n      {/* Search */}\n      <div className=\"mx-auto mb-10 max-w-2xl\">\n        <div className=\"relative\">\n          <Search className=\"text-muted-foreground absolute top-1/2 left-3 h-5 w-5 -translate-y-1/2\" />\n          <Input\n            type=\"text\"\n            placeholder=\"Search questions, answers, or topics...\"\n            className=\"pl-10\"\n            value={searchQuery}\n            onChange={(e) => setSearchQuery(e.target.value)}\n          />\n        </div>\n        {searchQuery && (\n          <p className=\"text-muted-foreground mt-2 text-sm\">\n            Showing {filteredFaqs.length}{' '}\n            {filteredFaqs.length === 1 ? 'result' : 'results'} for &quot;\n            {searchQuery}&quot;\n          </p>\n        )}\n      </div>\n      {/* End Search */}\n\n      {/* FAQs */}\n      <div className=\"mx-auto max-w-2xl\">\n        {filteredFaqs.length > 0 ? (\n          <Accordion type=\"single\" collapsible className=\"w-full\">\n            {filteredFaqs.map((faq, index) => (\n              <AccordionItem value={`item-${index}`} key={index}>\n                <AccordionTrigger className=\"text-left font-medium\">\n                  {faq.question}\n                </AccordionTrigger>\n                <AccordionContent className=\"text-muted-foreground\">\n                  <p>{faq.answer}</p>\n                  <div className=\"mt-4 flex flex-wrap gap-2\">\n                    {faq.tags.map((tag) => (\n                      <span\n                        key={tag}\n                        className=\"bg-muted inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium\"\n                        onClick={(e) => {\n                          e.stopPropagation();\n                          setSearchQuery(tag);\n                        }}\n                      >\n                        {tag}\n                      </span>\n                    ))}\n                  </div>\n                </AccordionContent>\n              </AccordionItem>\n            ))}\n          </Accordion>\n        ) : (\n          <div className=\"py-10 text-center\">\n            <p className=\"text-muted-foreground\">\n              No results found for your search. Try a different term.\n            </p>\n          </div>\n        )}\n      </div>\n      {/* End FAQs */}\n    </div>\n  );\n}\n","type":"registry:component","target":"components/blocks/marketing/faq-sections/search-filter.tsx"},{"path":"components/ui/input.tsx","content":"import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Input({ className, type, ...props }: React.ComponentProps<\"input\">) {\n  return (\n    <input\n      type={type}\n      data-slot=\"input\"\n      className={cn(\n        \"h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-2.5 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Input }\n","type":"registry:ui","target":"components/ui/input.tsx"},{"path":"components/ui/accordion.tsx","content":"\"use client\"\n\nimport * as React from \"react\"\nimport { Accordion as AccordionPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/lib/utils\"\nimport { ChevronDownIcon, ChevronUpIcon } from \"lucide-react\"\n\nfunction Accordion({\n  className,\n  ...props\n}: React.ComponentProps<typeof AccordionPrimitive.Root>) {\n  return (\n    <AccordionPrimitive.Root\n      data-slot=\"accordion\"\n      className={cn(\"flex w-full flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction AccordionItem({\n  className,\n  ...props\n}: React.ComponentProps<typeof AccordionPrimitive.Item>) {\n  return (\n    <AccordionPrimitive.Item\n      data-slot=\"accordion-item\"\n      className={cn(\"not-last:border-b\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction AccordionTrigger({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {\n  return (\n    <AccordionPrimitive.Header className=\"flex\">\n      <AccordionPrimitive.Trigger\n        data-slot=\"accordion-trigger\"\n        className={cn(\n          \"group/accordion-trigger relative flex flex-1 items-start justify-between rounded-md border border-transparent py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:after:border-ring disabled:pointer-events-none disabled:opacity-50 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 **:data-[slot=accordion-trigger-icon]:text-muted-foreground\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n        <ChevronDownIcon data-slot=\"accordion-trigger-icon\" className=\"pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden\" />\n        <ChevronUpIcon data-slot=\"accordion-trigger-icon\" className=\"pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline\" />\n      </AccordionPrimitive.Trigger>\n    </AccordionPrimitive.Header>\n  )\n}\n\nfunction AccordionContent({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof AccordionPrimitive.Content>) {\n  return (\n    <AccordionPrimitive.Content\n      data-slot=\"accordion-content\"\n      className=\"overflow-hidden text-sm data-open:animate-accordion-down data-closed:animate-accordion-up\"\n      {...props}\n    >\n      <div\n        className={cn(\n          \"pt-0 pb-4 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4\",\n          className\n        )}\n      >\n        {children}\n      </div>\n    </AccordionPrimitive.Content>\n  )\n}\n\nexport { Accordion, AccordionItem, AccordionTrigger, AccordionContent }\n","type":"registry:ui","target":"components/ui/accordion.tsx"}],"description":"An FAQ section with a search field that filters questions as you type. Helps visitors jump straight to the answer they want across a long question list.","dependencies":["lucide-react","radix-ui"]}