Accordion

import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@booleanpress/ui/accordion"

export default function AccordionBasic() {
  return (
    <Accordion type="single" collapsible className="w-full max-w-md">
      <AccordionItem value="log">
        <AccordionTrigger>What does the delivery log record?</AccordionTrigger>
        <AccordionContent>
          Every email the site sends: the recipient, the subject, the status and the mail server&apos;s reply. Entries are
          kept for 30 days.
        </AccordionContent>
      </AccordionItem>
      <AccordionItem value="resend">
        <AccordionTrigger>Can I resend a failed email?</AccordionTrigger>
        <AccordionContent>
          Yes. Open the entry in the log and choose Resend. The new attempt gets its own entry.
        </AccordionContent>
      </AccordionItem>
      <AccordionItem value="providers">
        <AccordionTrigger>Which mail providers can I connect?</AccordionTrigger>
        <AccordionContent>
          Any SMTP server, and Amazon SES, Mailgun, Postmark and SendGrid through their APIs.
        </AccordionContent>
      </AccordionItem>
    </Accordion>
  )
}

import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@booleanpress/ui/accordion"

export default function AccordionMultiple() {
  return (
    <Accordion type="multiple" defaultValue={["sending"]} className="w-full max-w-md">
      <AccordionItem value="sending">
        <AccordionTrigger>Sending</AccordionTrigger>
        <AccordionContent>
          Mail goes out through the primary connection. When it fails, the backup connection takes over.
        </AccordionContent>
      </AccordionItem>
      <AccordionItem value="tracking">
        <AccordionTrigger>Tracking</AccordionTrigger>
        <AccordionContent>
          Opens and clicks are counted per message. Tracking pixels are off for transactional email.
        </AccordionContent>
      </AccordionItem>
      <AccordionItem value="retention">
        <AccordionTrigger>Retention</AccordionTrigger>
        <AccordionContent>
          Log entries older than 30 days are removed every night at 02:00.
        </AccordionContent>
      </AccordionItem>
    </Accordion>
  )
}

import { useState } from "react"
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@booleanpress/ui/accordion"
import { Button } from "@booleanpress/ui/button"

const PANELS = [
  { value: "smtp", title: "SMTP connection", body: "Host smtp.example.com, port 587, STARTTLS, signed in as mailer@example.com." },
  { value: "sender", title: "Sender", body: "Mail is sent from Acme Support <support@example.com>, replies go to the help desk." },
  { value: "alerts", title: "Failure alerts", body: "After three failed sends in ten minutes, an alert goes to ops@example.com." },
]

export default function AccordionControlled() {
  const [open, setOpen] = useState("smtp")

  return (
    <div className="flex w-full max-w-md flex-col gap-4">
      <div className="flex flex-wrap justify-center gap-2">
        {PANELS.map((panel, index) => (
          <Button
            key={panel.value}
            variant={open === panel.value ? "default" : "secondary"}
            onClick={() => setOpen(panel.value)}
          >
            Panel {index + 1}
          </Button>
        ))}
        <Button variant="destructive" onClick={() => setOpen("")}>
          Close all
        </Button>
      </div>
      <Accordion type="single" collapsible value={open} onValueChange={setOpen}>
        {PANELS.map((panel) => (
          <AccordionItem key={panel.value} value={panel.value}>
            <AccordionTrigger>{panel.title}</AccordionTrigger>
            <AccordionContent>{panel.body}</AccordionContent>
          </AccordionItem>
        ))}
      </Accordion>
    </div>
  )
}

import { MinusIcon, PlusIcon } from "lucide-react"
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@booleanpress/ui/accordion"

const QUESTIONS = [
  { value: "keys", title: "Where do I find my API key?", body: "Under Settings, then API keys. A key is shown once, when you create it." },
  { value: "rotate", title: "How do I rotate a key?", body: "Create a new key, move your sites to it, then revoke the old one." },
  { value: "scopes", title: "What can a key do?", body: "Each key has scopes: send, read logs, or manage connections." },
]

// The trigger is the Tailwind group `accordion-trigger`: each icon shows in one state.
const indicator = (
  <>
    <PlusIcon className="size-3.5 group-data-[state=open]/accordion-trigger:hidden" />
    <MinusIcon className="hidden size-3.5 group-data-[state=open]/accordion-trigger:block" />
  </>
)

export default function AccordionCustomIndicator() {
  return (
    <Accordion type="single" collapsible className="w-full max-w-md">
      {QUESTIONS.map((question) => (
        <AccordionItem key={question.value} value={question.value}>
          <AccordionTrigger indicator={indicator}>{question.title}</AccordionTrigger>
          <AccordionContent>{question.body}</AccordionContent>
        </AccordionItem>
      ))}
    </Accordion>
  )
}

import { CreditCardIcon, LockIcon, MailIcon } from "lucide-react"
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@booleanpress/ui/accordion"
import { Badge } from "@booleanpress/ui/badge"

const SECTIONS = [
  { value: "mail", icon: MailIcon, title: "Mail delivery", badge: { label: "Healthy", variant: "success" }, body: "98.6% of 12,480 messages delivered in the last 7 days." },
  { value: "security", icon: LockIcon, title: "Security", badge: { label: "2 warnings", variant: "warning" }, body: "Two API keys have not been used for 90 days. Revoke them if they are no longer needed." },
  { value: "billing", icon: CreditCardIcon, title: "Billing", badge: { label: "Pro", variant: "secondary" }, body: "The Pro plan renews on 1 November 2026." },
] as const

export default function AccordionTemplate() {
  return (
    <Accordion type="single" collapsible className="w-full max-w-md rounded-md border [&>*:last-child]:border-b-0">
      {SECTIONS.map(({ value, icon: Icon, title, badge, body }) => (
        <AccordionItem key={value} value={value}>
          <AccordionTrigger>
            <span className="flex flex-1 items-center gap-2">
              <Icon className="text-muted-foreground" />
              {title}
              <Badge variant={badge.variant} className="ms-auto">
                {badge.label}
              </Badge>
            </span>
          </AccordionTrigger>
          <AccordionContent>{body}</AccordionContent>
        </AccordionItem>
      ))}
    </Accordion>
  )
}

import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@booleanpress/ui/accordion"

export default function AccordionDisabled() {
  return (
    <div className="flex w-full max-w-md flex-col gap-8">
      <Accordion type="single" collapsible disabled>
        <AccordionItem value="reset">
          <AccordionTrigger>How do I reset my password?</AccordionTrigger>
          <AccordionContent>Choose Forgot password on the sign-in page.</AccordionContent>
        </AccordionItem>
        <AccordionItem value="team">
          <AccordionTrigger>Can I invite my team?</AccordionTrigger>
          <AccordionContent>Yes, from Settings, then Members.</AccordionContent>
        </AccordionItem>
      </Accordion>
      <Accordion type="single" collapsible>
        <AccordionItem value="limit">
          <AccordionTrigger>What happens when I reach the sending limit?</AccordionTrigger>
          <AccordionContent>Mail waits in the queue and goes out when the limit resets at midnight.</AccordionContent>
        </AccordionItem>
        <AccordionItem value="app" disabled>
          <AccordionTrigger>Is there a mobile app?</AccordionTrigger>
          <AccordionContent>Not yet.</AccordionContent>
        </AccordionItem>
      </Accordion>
    </div>
  )
}