{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"faq-14","type":"registry:block","title":"Faq 14","description":"","dependencies":["lucide-react"],"registryDependencies":["https://www.diarmuradi.com/r/styles/base-nova/accordion.json","https://www.diarmuradi.com/r/styles/base-nova/button.json","https://www.diarmuradi.com/r/styles/base-nova/fancy-button.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 { Button } from \"@/components/ui/button\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/components/ui/tabs\"\nimport { FancyButton } from \"@/components/fancy-button\"\nimport { CreditCardIcon, MailIcon, ThumbsDownIcon, ThumbsUpIcon, UserIcon } from 'lucide-react'\n\ntype Category = \"account\" | \"billing\" | \"support\"\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    },\n    {\n      id: \"a2\",\n      trigger: \"Can I change my email address?\",\n      content: \"Yes, you can update your email in account settings.\",\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    },\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    },\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    },\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    },\n    {\n      id: \"b2\",\n      trigger: \"Do you offer refunds?\",\n      content: \"We offer a 30-day money-back guarantee for new subscriptions.\",\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    },\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    },\n    {\n      id: \"s2\",\n      trigger: \"How long does response take?\",\n      content: \"We typically respond within 1-2 hours during business hours.\",\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    },\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\" />\n    ),\n  },\n  {\n    label: \"Billing\",\n    value: \"billing\",\n    icon: (\n      <CreditCardIcon  className=\"size-4\" />\n    ),\n  },\n  {\n    label: \"Support\",\n    value: \"support\",\n    icon: (\n      <MailIcon  className=\"size-4\" />\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-4xl flex-col gap-8\">\n      <header className=\"flex flex-col gap-3\">\n        <p className=\"text-sm text-muted-foreground\">Help by team</p>\n        <div className=\"flex flex-col gap-2\">\n          <h1 className=\"text-3xl font-semibold tracking-tight sm:text-4xl md:text-5xl\">\n            Account, billing, or support\n          </h1>\n          <p className=\"text-muted-foreground\">\n            Choose a team on the left, then open the matching questions.\n          </p>\n        </div>\n      </header>\n\n      <Tabs\n        defaultValue={defaultTab}\n        orientation=\"vertical\"\n        className=\"flex w-full flex-col gap-6 md:flex-row md:gap-10\"\n      >\n        <TabsList className=\"flex h-auto w-full flex-row gap-1 bg-transparent p-0 md:w-44 md:flex-col\">\n          {TABS.map(({ value, label, icon }) => (\n            <TabsTrigger\n              key={value}\n              value={value}\n              className=\"h-auto w-full justify-start gap-2 rounded-lg px-3 py-2 text-sm text-muted-foreground shadow-none after:hidden data-active:bg-muted! data-active:font-medium data-active:text-foreground group-data-[variant=default]/tabs-list:data-active:shadow-none!\"\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=\"min-w-0 flex-1\">\n            <Accordion className=\"gap-1\" defaultValue={[items[value][0]?.id]}>\n              {items[value].map((item) => (\n                <AccordionItem\n                  key={item.id}\n                  value={item.id}\n                  className=\"border-none transition-all duration-200 data-open:rounded-2xl data-open:bg-card data-open:shadow-elevated-sm\"\n                >\n                  <AccordionTrigger className=\"px-4 py-3.5 text-left hover:no-underline\">\n                    {item.trigger}\n                  </AccordionTrigger>\n                  <AccordionContent className=\"flex flex-col gap-3 px-4 pb-4 text-muted-foreground\">\n                    <p className=\"text-sm leading-relaxed\">{item.content}</p>\n                    <div className=\"flex gap-2\">\n                      <Button variant=\"outline\" size=\"sm\">\n                        <ThumbsUpIcon  className=\"size-3.5\" />\n                        Helpful\n                      </Button>\n                      <Button variant=\"outline\" size=\"sm\">\n                        <ThumbsDownIcon  className=\"size-3.5\" />\n                        Not helpful\n                      </Button>\n                    </div>\n                  </AccordionContent>\n                </AccordionItem>\n              ))}\n            </Accordion>\n          </TabsContent>\n        ))}\n      </Tabs>\n\n      <FancyButton size=\"lg\" className=\"w-fit\">\n        Reach support\n      </FancyButton>\n    </div>\n  )\n}","target":"components/faq.tsx"}]}