Collapsible

A collapsible component for hiding and showing content.

@darenmalfait

Omnis cum inventore harum exercitationem illum.

'use client'

import {
	Button,
	Collapsible,
	CollapsibleTrigger,
	CollapsibleContent,
} from '@nerdfish/ui'
import { ChevronsUpDown } from 'lucide-react'
import * as React from 'react'

export function CollapsibleExample() {
	const [isOpen, setIsOpen] = React.useState(false)

	return (
		<Collapsible
			open={isOpen}
			onOpenChange={setIsOpen}
			className="w-[350px] space-y-2"
		>
			<div className="space-x-md flex items-center justify-between px-4">
				<h4 className="text-sm font-semibold">@darenmalfait</h4>
				<CollapsibleTrigger asChild>
					<Button
						variant="ghost"
						size="sm"
						className="flex w-9 justify-center p-0"
					>
						<ChevronsUpDown className="size-4" />
						<span className="sr-only">Toggle</span>
					</Button>
				</CollapsibleTrigger>
			</div>
			<div className="rounded-container border border-gray-200 px-4 py-3 font-mono text-sm dark:border-gray-700">
				Omnis cum inventore harum exercitationem illum.
			</div>
			<CollapsibleContent className="space-y-2">
				<div className="rounded-container border border-gray-200 px-4 py-3 font-mono text-sm dark:border-gray-700">
					Explicabo aut debitis vitae at quo.
				</div>
				<div className="rounded-container border border-gray-200 px-4 py-3 font-mono text-sm dark:border-gray-700">
					Non tempora provident.
				</div>
			</CollapsibleContent>
		</Collapsible>
	)
}

Usage

import {
	Collapsible,
	CollapsibleTrigger,
	CollapsibleContent,
} from '@nerdfish/ui'
import Image from 'next/image'

<Collapsible>
	<CollapsibleTrigger>Can I use this in my project?</CollapsibleTrigger>
	<CollapsibleContent>
		Yes. Free to use for personal and commercial projects. No attribution
		required.
	</CollapsibleContent>
</Collapsible>