sucker.severian.dev/src/components/ui/collapsible-infobox.tsx

import { useState } from "react";
import { ChevronDown, ChevronUp } from "lucide-react";
import { Button } from "@/components/ui/button";

export interface CollapsibleInfoboxProps {
  title: string;
  children: React.ReactNode;
  defaultOpen?: boolean;
  className?: string;
}

export function CollapsibleInfobox({
  title,
  children,
  defaultOpen = false,
  className = "",
}: CollapsibleInfoboxProps) {
  const [open, setOpen] = useState(defaultOpen);
  return (
    <div
      className={`bg-blue-50 dark:bg-blue-950 border border-blue-200 dark:border-blue-800 rounded-lg p-4 mb-4 ${className}`}
    >
      <div
        className="flex items-center justify-between cursor-pointer"
        onClick={() => setOpen((v) => !v)}
      >
        <span className="text-lg font-semibold text-blue-800 dark:text-blue-200">
          {title}
        </span>
        <Button
          variant="ghost"
          size="sm"
          className="w-9 p-0"
          tabIndex={-1}
          type="button"
          onClick={(e) => {
            e.stopPropagation();
            setOpen((v) => !v);
          }}
        >
          {open ? (
            <ChevronUp className="h-4 w-4" />
          ) : (
            <ChevronDown className="h-4 w-4" />
          )}
          <span className="sr-only">Toggle {title}</span>
        </Button>
      </div>
      {open && <div className="mt-2">{children}</div>}
    </div>
  );
}