import { Collapsible } from "@smartacteam/ambient-web/collapsible";<Collapsible.Root>
<Collapsible.Trigger>Can I use this in my project?</Collapsible.Trigger>
<Collapsible.Panel>
Yes. Free to use for personal and commercial projects. No attribution
required.
</Collapsible.Panel>
</Collapsible.Root>"use client";
import { useState } from "react";
import { Button } from "@smartacteam/ambient-web/button";
import { Collapsible } from "@smartacteam/ambient-web/collapsible";
import { CentralIcon } from "@smartacteam/ambient-web/icon";
export function CollapsibleDemo() {
const [isOpen, setIsOpen] = useState(false);
return (
<Collapsible.Root
open={isOpen}
onOpenChange={setIsOpen}
className="flex w-87.5 flex-col gap-2"
>
<div className="flex items-center justify-between gap-4 pl-4">
<h4 className="text-sm font-bold">@andrescv starred 3 repositories</h4>
<Collapsible.Trigger
render={
<Button className="size-8">
<CentralIcon
fill="outlined"
name="IconChevronGrabberVertical"
radius="2"
stroke="1.5"
/>
<span className="sr-only">Toggle</span>
</Button>
}
/>
</div>
<div className="rounded-md border border-stroke-default px-4 py-2 font-mono text-sm">
@smartacteam/ambient-ui
</div>
<Collapsible.Panel animate>
<div className="flex flex-col gap-2">
<div className="rounded-md border border-stroke-default px-4 py-2 font-mono text-sm">
@smartacteam/ui-sandbox
</div>
<div className="rounded-md border border-stroke-default px-4 py-2 font-mono text-sm">
@smartacteam/ai
</div>
</div>
</Collapsible.Panel>
</Collapsible.Root>
);
}