Accordion

1import { Accordion } from "@ngrok/mantle/accordion";2import { Badge } from "@ngrok/mantle/badge";3import { Button } from "@ngrok/mantle/button";4import { Card } from "@ngrok/mantle/card";5 6<Accordion.Root type="multiple" defaultValue={["on_tcp_connect", "on_http_response"]}>7	<Accordion.Item value="on_tcp_connect">8		<Accordion.Heading className="mx-4 flex items-center gap-2" asChild>9			<h2>10				<Accordion.Trigger>11					<span className="font-mono text-sm font-medium">on_tcp_connect</span>12					<Badge appearance="muted" color="neutral" className="rounded-full">13						314					</Badge>15					<Accordion.TriggerIcon />16				</Accordion.Trigger>17				<Separator orientation="horizontal" className="flex-1" />18				<Button type="button" appearance="link" icon={<PlusIcon />}>19					Add Rule20				</Button>21			</h2>22		</Accordion.Heading>23		<Accordion.Content>24			<Card.Root>25				<Card.Body>Proident irure consequat Lorem incididunt ullamco.</Card.Body>26			</Card.Root>27		</Accordion.Content>28	</Accordion.Item>29	<Accordion.Item value="on_http_request">30		<Accordion.Heading className="mx-4 flex items-center gap-2" asChild>31			<h2>32				<Accordion.Trigger>33					<span className="font-mono text-sm font-medium">on_http_request</span>34					<Badge appearance="muted" color="neutral" className="rounded-full">35						236					</Badge>37					<Accordion.TriggerIcon />38				</Accordion.Trigger>39				<Separator orientation="horizontal" className="flex-1" />40				<Button type="button" appearance="link" icon={<PlusIcon />}>41					Add Rule42				</Button>43			</h2>44		</Accordion.Heading>45		<Accordion.Content>46			<Card.Root>47				<Card.Body>Excepteur amet laboris occaecat anim minim reprehenderit.</Card.Body>48			</Card.Root>49		</Accordion.Content>50	</Accordion.Item>51	<Accordion.Item value="on_http_response">52		<Accordion.Heading className="mx-4 flex items-center gap-2" asChild>53			<h2>54				<Accordion.Trigger>55					<span className="font-mono text-sm font-medium">on_http_response</span>56					<Badge appearance="muted" color="neutral" className="rounded-full">57						058					</Badge>59					<Accordion.TriggerIcon />60				</Accordion.Trigger>61				<Separator orientation="horizontal" className="flex-1" />62				<Button type="button" appearance="link" icon={<PlusIcon />}>63					Add Rule64				</Button>65			</h2>66		</Accordion.Heading>67		<Accordion.Content>68			<p className="text-center">This phase does not have any rules defined</p>69		</Accordion.Content>70	</Accordion.Item>71</Accordion.Root>;