63 lines
1.9 KiB
TypeScript
63 lines
1.9 KiB
TypeScript
import React, { FC, Fragment } from 'react'
|
|
import { Disclosure, Transition } from '@headlessui/react'
|
|
import { ChevronDownIcon } from '@heroicons/react/outline'
|
|
|
|
type Item = {
|
|
title?: string | JSX.Element
|
|
body?: string | JSX.Element
|
|
icon?: JSX.Element
|
|
}
|
|
|
|
type Props = {
|
|
items: Item[]
|
|
}
|
|
|
|
export const Disclosures: FC<Props> = ({
|
|
items
|
|
}) => {
|
|
return (
|
|
<div className="w-full grid grid-cols-1 gap-3">
|
|
<div className="w-full max-w-md p-2 mx-auto bg-white rounded-2xl">
|
|
{items.map((item) => (
|
|
<Disclosure as="div" className="my-2 rounded border">
|
|
{({ open }) => (
|
|
<>
|
|
<Disclosure.Button as={Fragment}>
|
|
<button className="flex p-2 bg-gray-200 w-full justify-between">
|
|
<div className="grid place-items-center">
|
|
{item.icon}
|
|
</div>
|
|
<span className="pl-2">
|
|
{item.title}
|
|
</span>
|
|
<ChevronDownIcon
|
|
className={`${open ? 'transform rotate-180' : ''} w-5 h-5 text-gray-800`}
|
|
/>
|
|
</button>
|
|
</Disclosure.Button>
|
|
<Transition
|
|
show={open}
|
|
enter="transition duration-100 ease-out"
|
|
enterFrom="transform scale-95 opacity-0"
|
|
enterTo="transform scale-100 opacity-100"
|
|
leave="transition duration-75 ease-out"
|
|
leaveFrom="transform scale-100 opacity-100"
|
|
leaveTo="transform scale-95 opacity-0"
|
|
>
|
|
|
|
<Disclosure.Panel
|
|
className="p-2 bg-gray-100"
|
|
>
|
|
{item.body ?? 'Nenhum comentário.'}
|
|
</Disclosure.Panel>
|
|
</Transition>
|
|
</>
|
|
)}
|
|
</Disclosure>
|
|
)
|
|
)}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|