Accordion

"use client";

import {
  Accordion,
  AccordionItem,
  AccordionPanel,
  AccordionTrigger,
} from "@/siteplane/components/accordion";

const questions = [
  {
    answer:
      "Select “Forgot password” on the sign-in page and enter your email address. We send you a reset link that stays valid for 24 hours.",
    question: "How do I reset my password?",
    value: "password",
  },
  {
    answer:
      "Yes. You can upgrade or downgrade in your billing settings at any time. The change applies from your next billing period.",
    question: "Can I change my subscription plan?",
    value: "plan",
  },
  {
    answer:
      "We accept all major credit cards and bank transfers. Payments are processed securely.",
    question: "Which payment methods do you accept?",
    value: "payment",
  },
];

export default function Example() {
  return (
    <Accordion className="w-full max-w-md" defaultValue={["password"]}>
      {questions.map((item) => (
        <AccordionItem key={item.value} value={item.value}>
          <AccordionTrigger>{item.question}</AccordionTrigger>
          <AccordionPanel>{item.answer}</AccordionPanel>
        </AccordionItem>
      ))}
    </Accordion>
  );
}

"use client";

import {
  Accordion,
  AccordionItem,
  AccordionPanel,
  AccordionTrigger,
} from "@/siteplane/components/accordion";

const sections = [
  {
    content:
      "Choose which project updates reach you by email and which appear as notifications in the app.",
    title: "Notification settings",
    value: "notifications",
  },
  {
    content:
      "Turn on two-factor authentication, review active sessions and sign out of devices you no longer use.",
    title: "Privacy and security",
    value: "privacy",
  },
  {
    content:
      "View your current plan, payment history and upcoming invoices, or update your payment method.",
    title: "Billing and subscription",
    value: "billing",
  },
];

export default function Example() {
  return (
    <Accordion
      className="w-full max-w-md"
      defaultValue={["notifications"]}
      multiple
    >
      {sections.map((section) => (
        <AccordionItem key={section.value} value={section.value}>
          <AccordionTrigger>{section.title}</AccordionTrigger>
          <AccordionPanel>{section.content}</AccordionPanel>
        </AccordionItem>
      ))}
    </Accordion>
  );
}

"use client";

import {
  Accordion,
  AccordionItem,
  AccordionPanel,
  AccordionTrigger,
} from "@/siteplane/components/accordion";

export default function Example() {
  return (
    <Accordion className="w-full max-w-md">
      <AccordionItem value="history">
        <AccordionTrigger>Can I see my account history?</AccordionTrigger>
        <AccordionPanel>
          Yes. Your account history lists every plan change, invoice and support
          request.
        </AccordionPanel>
      </AccordionItem>
      <AccordionItem disabled value="premium">
        <AccordionTrigger>Premium features</AccordionTrigger>
        <AccordionPanel>
          Upgrade your plan to see the features included in Premium.
        </AccordionPanel>
      </AccordionItem>
      <AccordionItem value="email">
        <AccordionTrigger>How do I update my email address?</AccordionTrigger>
        <AccordionPanel>
          Change it in your account settings. We send a confirmation link to the
          new address.
        </AccordionPanel>
      </AccordionItem>
    </Accordion>
  );
}

"use client";

import { useState } from "react";
import {
  Accordion,
  AccordionItem,
  AccordionPanel,
  AccordionTrigger,
} from "@/siteplane/components/accordion";
import { Button } from "@/siteplane/components/button";

const questions = [
  {
    answer:
      "A workspace groups your projects, members and billing in one place.",
    question: "What is a workspace?",
    value: "workspace",
  },
  {
    answer:
      "Anyone you invite by email. Owners decide whether new members can create projects.",
    question: "Who can join my workspace?",
    value: "members",
  },
  {
    answer:
      "Yes. Create another workspace from the account menu and switch between them at any time.",
    question: "Can I have more than one workspace?",
    value: "multiple",
  },
];

export default function Example() {
  const [value, setValue] = useState<string[]>([]);
  return (
    <div className="flex w-full max-w-md flex-col items-start gap-4">
      <Accordion
        className="w-full"
        multiple
        onValueChange={setValue}
        value={value}
      >
        {questions.map((item) => (
          <AccordionItem key={item.value} value={item.value}>
            <AccordionTrigger>{item.question}</AccordionTrigger>
            <AccordionPanel>{item.answer}</AccordionPanel>
          </AccordionItem>
        ))}
      </Accordion>
      <Button
        onClick={() => setValue(questions.map((item) => item.value))}
        variant="outline"
      >
        Expand all
      </Button>
    </div>
  );
}