Accordion

import { Accordion } from "@ngrok/mantle/accordion";
import { Badge } from "@ngrok/mantle/badge";
import { Button } from "@ngrok/mantle/button";
import { Card } from "@ngrok/mantle/card";

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