components/collapse/index.tsx

import { ChevronDownIcon } from "@heroicons/react/solid";
import classNames from "classnames";
import { useState } from "react";
import { useIntl } from "react-intl";

export const Collapse = ({
  children,
  title,
  className,
  open: defaultOpen = false,
  onOpenClassName,
  parentClassName,
}: {
  children: React.ReactNode;
  title: string | React.ReactNode;
  className?: string;
  open?: boolean;
  onOpenClassName?: string;
  parentClassName?: string;
}) => {
  const [open, setOpen] = useState(defaultOpen);
  const intl = useIntl();

  return (
    <div className={`${parentClassName} w-full`}>
      <div
        className={`${className} flex items-center justify-between cursor-pointer transition-all duration-200 ${
          open && onOpenClassName
        }`}
        onClick={() => setOpen(!open)}
      >
        {typeof title === "string" ? intl.formatMessage({ id: title }) : title}
        <div>
          <ChevronDownIcon
            className={classNames(
              "w-5 text-white opacity-50 transition-all duration-200",
              {
                "rotate-180": open,
              }
            )}
          />
        </div>
      </div>
      {open && children}
    </div>
  );
};