Shadcn Collapsible for React

Collapsible
├── CollapsibleTrigger
├── CollapsibleContent
└── CollapsibleIndicator

import { ChevronsUpDownIcon } from "lucide-react";
import { useState } from "react";
import { Button } from "@/components/ui/button";
import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from "@/components/ui/collapsible";

const CollapsibleDemo = () => {
  const [isOpen, setIsOpen] = useState(false);
  const handleOpenChange = (details: { open: boolean }) => {
    setIsOpen(details.open);
  };

  return (
    <Collapsible
      className="flex w-[350px] flex-col gap-2"
      onOpenChange={handleOpenChange}
      open={isOpen}
    >
      <div className="flex items-center justify-between gap-4 px-4">
        <h4 className="font-semibold text-sm">Order #4189</h4>
        <CollapsibleTrigger asChild>
          <Button className="size-8" size="icon-md" variant="ghost">
            <ChevronsUpDownIcon aria-hidden="true" />
            <span className="sr-only">Toggle details</span>
          </Button>
        </CollapsibleTrigger>
      </div>
      <div className="flex items-center justify-between rounded-md border px-4 py-2 text-sm">
        <span className="text-muted-foreground">Status</span>
        <span className="font-medium">Shipped</span>
      </div>
      <CollapsibleContent className="flex flex-col gap-2">
        <div className="rounded-md border px-4 py-2 text-sm">
          <p className="font-medium">Shipping address</p>
          <p className="text-muted-foreground">100 Market St, San Francisco</p>
        </div>
        <div className="rounded-md border px-4 py-2 text-sm">
          <p className="font-medium">Items</p>
          <p className="text-muted-foreground">2x Studio Headphones</p>
        </div>
      </CollapsibleContent>
    </Collapsible>
  );
};