"use client";

import {
  Button,
  Collapsible,
  CollapsiblePanel,
  CollapsibleTrigger,
} from "@countryclub/ui-react";
import { ChevronsUpDownIcon } from "lucide-react";
import { useState } from "react";

export default function CollapsibleDemo() {
  const [open, setOpen] = useState(false);

  return (
    <Collapsible
      className="flex w-full max-w-sm flex-col gap-2"
      onOpenChange={setOpen}
      open={open}
    >
      <div className="flex items-center justify-between gap-4 px-1">
        <h4 className="font-semibold text-sm">
          A. Whitmore has 3 reservations this weekend
        </h4>
        <CollapsibleTrigger render={<Button size="icon-sm" variant="ghost" />}>
          <ChevronsUpDownIcon />
          <span className="sr-only">Toggle reservations</span>
        </CollapsibleTrigger>
      </div>
      <div className="rounded-lg border px-4 py-2 font-mono text-sm">
        Sat · Tee time · 9:40 AM
      </div>
      <CollapsiblePanel className="flex flex-col gap-2">
        <div className="rounded-lg border px-4 py-2 font-mono text-sm">
          Sat · Veranda dinner · 7:00 PM
        </div>
        <div className="rounded-lg border px-4 py-2 font-mono text-sm">
          Sun · Tennis court 2 · 10:00 AM
        </div>
      </CollapsiblePanel>
    </Collapsible>
  );
}
Collapsible

Import

Default

A. Whitmore has 3 reservations this weekend
