Collapsible

package showcase

import "github.com/templui/templui/internal/components/collapsible"
import "github.com/templui/templui/internal/components/button"
import "github.com/templui/templui/internal/components/icon"

templ CollapsibleDefault() {
	@collapsible.Collapsible(collapsible.Props{
		Class: "w-[350px] space-y-2",
	}) {
		<div class="flex items-center justify-between space-x-4 px-4">
			<h4 class="text-sm font-semibold">
				{ "@axadrn" } starred 3 repositories
			</h4>
			@collapsible.Trigger() {
				@button.Button(button.Props{
					Variant: button.VariantGhost,
					Size:    button.SizeIcon,
					Class:   "size-8",
				}) {
					@icon.ChevronsUpDown(icon.Props{Class: "size-4"})
					<span class="sr-only">Toggle</span>
				}
			}
		</div>
		<div class="rounded-md border px-4 py-2 font-mono text-sm">
			github.com/a-h/templ
		</div>
		@collapsible.Content(collapsible.ContentProps{
			Class: "space-y-2",
		}) {
			<div class="rounded-md border px-4 py-2 font-mono text-sm">
				github.com/charmbracelet/bubbletea
			</div>
			<div class="rounded-md border px-4 py-2 font-mono text-sm">
				github.com/labstack/echo
			</div>
		}
	}
}