Collapsible

"use client";

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

const [isOpen, setIsOpen] = useState(false);

<Collapsible
  className="flex w-[350px] flex-col gap-2"
  onOpenChange={setIsOpen}
  open={isOpen}
>
  <div className="flex items-center justify-between gap-4 px-4">
    <h4 className="font-heading text-sm">
      Order #4189
    </h4>
    <CollapsibleTrigger
      render={
        <Button className="size-8" size="icon" variant="ghost">
          <ChevronsUpDownIcon />
          <span className="sr-only">Toggle details</span>
        </Button>
      }
    />
  </div>
  <div className="flex items-center justify-between px-4 px-border-sm px-rounded-sm 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="px-4 px-border-sm px-rounded-sm 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="px-4 px-border-sm px-rounded-sm py-2 text-sm">
      <p className="font-medium">Items</p>
      <p className="text-muted-foreground">2x Studio Headphones</p>
    </div>
  </CollapsibleContent>
</Collapsible>