File size: 1,460 Bytes
4304c6d |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 |
import { useState } from 'react'
import { ChevronDownIcon, ChevronRightIcon } from '@heroicons/react/24/outline'
import classNames from 'classnames'
export type IItem = {
key: string
name: string
}
type ICollapse = {
title: string | undefined
items: IItem[]
renderItem: (item: IItem) => React.ReactNode
onSelect?: (item: IItem) => void
wrapperClassName?: string
}
const Collapse = ({
title,
items,
renderItem,
onSelect,
wrapperClassName,
}: ICollapse) => {
const [open, setOpen] = useState(false)
const toggle = () => setOpen(!open)
return (
<div className={classNames('border border-gray-200 bg-gray-50 rounded-lg', wrapperClassName)}>
<div className='flex items-center justify-between leading-[18px] px-3 py-2 text-xs font-medium text-gray-800 cursor-pointer' onClick={toggle}>
{title}
{
open
? <ChevronDownIcon className='w-3 h-3 text-gray-400' />
: <ChevronRightIcon className='w-3 h-3 text-gray-400' />
}
</div>
{
open && (
<div className='py-2 border-t border-t-gray-100'>
{
items.map(item => (
<div key={item.key} onClick={() => onSelect && onSelect(item)}>
{renderItem(item)}
</div>
))
}
</div>
)
}
</div>
)
}
export default Collapse
|