Expandable Row

import { ExpandableRow } from "@/components/ui/expandable-row";

export default function Example() {
  return <ExpandableRow />;
}

"use client";

import { forwardRef, useState } from "react";
import { cn } from "@/lib/utils";

const ExpandableRow = forwardRef(({ className, header, children, ...props }, ref) => {
  const [open, setOpen] = useState(false);
  return (
    <div ref={ref} className={cn("border-b", className)} {...props}>
      <button onClick={() => setOpen(!open)} className="flex w-full items-center justify-between p-4 text-sm hover:bg-accent/50">
        {header}
        <svg className={cn("h-4 w-4 transition-transform", open && "rotate-180")} fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" /></svg>
      </button>
      {open && <div className="border-t bg-muted/30 p-4 text-sm">{children}</div>}
    </div>
  );
});
ExpandableRow.displayName = "ExpandableRow";

export { ExpandableRow };