56 lines
2.1 KiB
TypeScript
Executable File
56 lines
2.1 KiB
TypeScript
Executable File
/* -------------------------------------------------------------------------- */
|
|
/* Imports */
|
|
/* -------------------------------------------------------------------------- */
|
|
import React from "react";
|
|
import { Disclosure as Disclose } from "@headlessui/react";
|
|
import { ReactComponent as SelectIcon } from "../assets/svg/arrow-down.svg";
|
|
import classNames from "classnames";
|
|
/* -------------------------------------------------------------------------- */
|
|
/* Component props */
|
|
/* -------------------------------------------------------------------------- */
|
|
type Props = {
|
|
children?: React.ReactNode;
|
|
className?: string;
|
|
caption?: string;
|
|
};
|
|
/* -------------------------------------------------------------------------- */
|
|
/* styles */
|
|
/* -------------------------------------------------------------------------- */
|
|
const ButtonStyle = `
|
|
flex w-full
|
|
justify-between
|
|
items-center
|
|
py-2 text-left
|
|
text-base
|
|
font-medium
|
|
text-black-400
|
|
`;
|
|
/* -------------------------------------------------------------------------- */
|
|
/* Component implementation */
|
|
/* -------------------------------------------------------------------------- */
|
|
export default function Disclosure({ children, className, caption }: Props) {
|
|
return (
|
|
<div className={classNames("top-16 ", className)}>
|
|
<div className="mx-auto w-full bg-white py-2">
|
|
<Disclose as="div">
|
|
{({ open }) => (
|
|
<>
|
|
<Disclose.Button className={`${ButtonStyle}`}>
|
|
<span>{caption}</span>
|
|
<SelectIcon
|
|
className={`${
|
|
open ? "rotate-180 transform" : ""
|
|
} h-4 w-5 fill-black hover:fill-black stroke-black`}
|
|
/>
|
|
</Disclose.Button>
|
|
<Disclose.Panel className="py-2 text-sm text-gray-500 ">
|
|
{children}
|
|
</Disclose.Panel>
|
|
</>
|
|
)}
|
|
</Disclose>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|