Accordion

import {
	Accordion,
	AccordionContent,
	AccordionHeading,
	AccordionItem,
	AccordionTrigger,
	AccordionTriggerIcon,
} from "@ngrok/mantle/accordion";
import { Badge } from "@ngrok/mantle/badge";
import { Button } from "@ngrok/mantle/button";
import { Card, CardBody } from "@ngrok/mantle/card";

<Accordion type="multiple" defaultValue={["on_tcp_connect", "on_http_response"]}>
	<AccordionItem value="on_tcp_connect">
		<AccordionHeading className="mx-4 flex items-center gap-2" asChild>
			<h2>
				<AccordionTrigger>
					<span className="font-mono text-sm font-medium">on_tcp_connect</span>
					<Badge appearance="muted" color="neutral" className="rounded-full">
						3
					</Badge>
					<AccordionTriggerIcon />
				</AccordionTrigger>
				<Separator orientation="horizontal" className="flex-1" />
				<Button type="button" appearance="link" icon={<Plus />}>
					Add Rule
				</Button>
			</h2>
		</AccordionHeading>
		<AccordionContent>
			<Card>
				<CardBody>Proident irure consequat Lorem incididunt ullamco.</CardBody>
			</Card>
		</AccordionContent>
	</AccordionItem>
	<AccordionItem value="on_http_request">
		<AccordionHeading className="mx-4 flex items-center gap-2" asChild>
			<h2>
				<AccordionTrigger>
					<span className="font-mono text-sm font-medium">on_http_request</span>
					<Badge appearance="muted" color="neutral" className="rounded-full">
						2
					</Badge>
					<AccordionTriggerIcon />
				</AccordionTrigger>
				<Separator orientation="horizontal" className="flex-1" />
				<Button type="button" appearance="link" icon={<Plus />}>
					Add Rule
				</Button>
			</h2>
		</AccordionHeading>
		<AccordionContent>
			<Card>
				<CardBody>Excepteur amet laboris occaecat anim minim reprehenderit.</CardBody>
			</Card>
		</AccordionContent>
	</AccordionItem>
	<AccordionItem value="on_http_response">
		<AccordionHeading className="mx-4 flex items-center gap-2" asChild>
			<h2>
				<AccordionTrigger>
					<span className="font-mono text-sm font-medium">on_http_response</span>
					<Badge appearance="muted" color="neutral" className="rounded-full">
						0
					</Badge>
					<AccordionTriggerIcon />
				</AccordionTrigger>
				<Separator orientation="horizontal" className="flex-1" />
				<Button type="button" appearance="link" icon={<Plus />}>
					Add Rule
				</Button>
			</h2>
		</AccordionHeading>
		<AccordionContent>
			<p className="text-center">This phase does not have any rules defined</p>
		</AccordionContent>
	</AccordionItem>
</Accordion>