{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"faq-3","type":"registry:block","title":"Faq 3","description":"","dependencies":["lucide-react"],"registryDependencies":["https://www.diarmuradi.com/r/styles/base-nova/accordion.json","https://www.diarmuradi.com/r/styles/base-nova/tabs.json"],"files":[{"path":"faq.tsx","type":"registry:block","content":"\"use client\"\n\nimport type { ReactNode } from \"react\"\n\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/components/ui/accordion\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/components/ui/tabs\"\nimport { CreditCardIcon, MailIcon, ShieldIcon, SparklesIcon, UserIcon } from 'lucide-react'\n\ntype Category = \"account\" | \"billing\" | \"support\" | \"security\" | \"features\"\n\nconst items = {\n  account: [\n    {\n      id: \"a1\",\n      trigger: \"How do I create an account?\",\n      content:\n        \"Click the 'Sign Up' button, enter your email, create a password, and verify your email address.\",\n      date: \"12 Jan, 2025\",\n    },\n    {\n      id: \"a2\",\n      trigger: \"Can I change my email address?\",\n      content: \"Yes, you can update your email in account settings.\",\n      date: \"10 Jan, 2025\",\n    },\n    {\n      id: \"a3\",\n      trigger: \"How do I reset my password?\",\n      content:\n        \"Click 'Forgot Password' on the login page and follow the emailed instructions.\",\n      date: \"09 Jan, 2025\",\n    },\n    {\n      id: \"a4\",\n      trigger: \"Can I delete my account?\",\n      content:\n        \"Yes, you can request account deletion through the privacy dashboard.\",\n      date: \"07 Jan, 2025\",\n    },\n    {\n      id: \"a5\",\n      trigger: \"Can I have multiple accounts?\",\n      content:\n        \"Our terms allow one personal account per user, but you can manage multiple organizations.\",\n      date: \"05 Jan, 2025\",\n    },\n  ],\n  billing: [\n    {\n      id: \"b1\",\n      trigger: \"What payment methods do you accept?\",\n      content: \"We accept all major credit cards, PayPal, and bank transfers.\",\n      date: \"08 Jan, 2025\",\n    },\n    {\n      id: \"b2\",\n      trigger: \"Do you offer refunds?\",\n      content: \"We offer a 30-day money-back guarantee for new subscriptions.\",\n      date: \"04 Jan, 2025\",\n    },\n    {\n      id: \"b3\",\n      trigger: \"Can I change my plan anytime?\",\n      content:\n        \"Yes, you can upgrade or downgrade in settings; changes are prorated.\",\n      date: \"02 Jan, 2025\",\n    },\n  ],\n  support: [\n    {\n      id: \"s1\",\n      trigger: \"How do I contact support?\",\n      content:\n        \"Our support team is available 24/7 via live chat, email, and phone.\",\n      date: \"03 Jan, 2025\",\n    },\n    {\n      id: \"s2\",\n      trigger: \"How long does response take?\",\n      content: \"We typically respond within 1-2 hours during business hours.\",\n      date: \"01 Jan, 2025\",\n    },\n    {\n      id: \"s3\",\n      trigger: \"Do you have a knowledge base?\",\n      content:\n        \"Yes, our comprehensive help center is available at help.example.com.\",\n      date: \"29 Dec, 2024\",\n    },\n    {\n      id: \"s4\",\n      trigger: \"Is phone support available for all plans?\",\n      content: \"Priority phone support is available for Business customers.\",\n      date: \"27 Dec, 2024\",\n    },\n  ],\n  security: [\n    {\n      id: \"sec1\",\n      trigger: \"How secure is my data?\",\n      content:\n        \"We use bank-level encryption and comply with GDPR and SOC 2 standards.\",\n      date: \"28 Dec, 2024\",\n    },\n    {\n      id: \"sec2\",\n      trigger: \"Is my data backed up?\",\n      content:\n        \"Yes, data is backed up multiple times daily across distributed servers.\",\n      date: \"25 Dec, 2024\",\n    },\n    {\n      id: \"sec3\",\n      trigger: \"Can I enable 2FA?\",\n      content:\n        \"Yes, you can enable Two-Factor Authentication in your security settings.\",\n      date: \"22 Dec, 2024\",\n    },\n  ],\n  features: [\n    {\n      id: \"f1\",\n      trigger: \"What are the main features?\",\n      content:\n        \"Real-time collaboration, advanced analytics, and custom integrations.\",\n      date: \"22 Dec, 2024\",\n    },\n    {\n      id: \"f2\",\n      trigger: \"Do you have an API?\",\n      content:\n        \"Yes, we offer a full REST API for custom software integrations.\",\n      date: \"20 Dec, 2024\",\n    },\n  ],\n}\n\nconst TABS: {\n  label: string\n  value: Category\n  icon: ReactNode\n}[] = [\n  {\n    label: \"Account\",\n    value: \"account\",\n    icon: (\n      <UserIcon  className=\"size-4 group-data-active:text-primary\" />\n    ),\n  },\n  {\n    label: \"Billing\",\n    value: \"billing\",\n    icon: (\n      <CreditCardIcon  className=\"size-4 group-data-active:text-primary\" />\n    ),\n  },\n  {\n    label: \"Support\",\n    value: \"support\",\n    icon: (\n      <MailIcon  className=\"size-4 group-data-active:text-primary\" />\n    ),\n  },\n  {\n    label: \"Security\",\n    value: \"security\",\n    icon: (\n      <ShieldIcon  className=\"size-4 group-data-active:text-primary\" />\n    ),\n  },\n  {\n    label: \"Features\",\n    value: \"features\",\n    icon: (\n      <SparklesIcon  className=\"size-4 group-data-active:text-primary\" />\n    ),\n  },\n]\n\nexport function Faq() {\n  const defaultTab = TABS[0]?.value as string\n\n  return (\n    <div className=\"mx-auto flex w-full max-w-2xl flex-col gap-8\">\n      <header className=\"flex flex-col gap-3\">\n        <span className=\"w-fit rounded-lg bg-muted px-3 py-2 text-sm text-foreground\">\n          Browse topics\n        </span>\n        <div className=\"flex flex-col gap-2\">\n          <h1 className=\"text-3xl font-semibold tracking-tight sm:text-4xl md:text-5xl\">\n            Answers by category\n          </h1>\n          <p className=\"text-muted-foreground\">\n            Jump to billing, security, or features without leaving the page.\n          </p>\n        </div>\n      </header>\n\n      <Tabs defaultValue={defaultTab} className=\"w-full\">\n        <TabsList className=\"grid h-full! w-full grid-cols-5 gap-2 rounded-full px-1\">\n          {TABS.map(({ value, label, icon }) => (\n            <TabsTrigger\n              key={value}\n              value={value}\n              className=\"group flex items-center gap-2 rounded-full py-2 data-active:bg-background group-data-[variant=default]/tabs-list:data-active:shadow-elevated-xs!\"\n            >\n              {icon}\n              <span className=\"hidden sm:inline\">{label}</span>\n            </TabsTrigger>\n          ))}\n        </TabsList>\n\n        {TABS.map(({ value }) => (\n          <TabsContent key={value} value={value} className=\"mt-6\">\n            <Accordion className=\"gap-2\" defaultValue={[items[value][0]?.id]}>\n              {items[value].map((item) => (\n                <AccordionItem\n                  key={item.id}\n                  value={item.id}\n                  className=\"overflow-hidden rounded-xl border-none bg-muted\"\n                >\n                  <AccordionTrigger className=\"px-4 text-muted-foreground hover:text-foreground hover:no-underline aria-expanded:text-foreground\">\n                    {item.trigger}\n                  </AccordionTrigger>\n                  <AccordionContent className=\"flex flex-col gap-2 px-4 pb-4 text-muted-foreground\">\n                    <p className=\"text-sm leading-relaxed\">{item.content}</p>\n                    {item.date && (\n                      <time className=\"text-xs text-muted-foreground/60\">\n                        {item.date}\n                      </time>\n                    )}\n                  </AccordionContent>\n                </AccordionItem>\n              ))}\n            </Accordion>\n          </TabsContent>\n        ))}\n      </Tabs>\n    </div>\n  )\n}","target":"components/faq.tsx"}]}