metacubexd/src/components/Collpase.tsx

52 lines
1.3 KiB
TypeScript
Raw Normal View History

2023-08-30 23:02:55 +08:00
import { JSX, ParentComponent } from 'solid-js'
import { twMerge } from 'tailwind-merge'
type Props = {
title: JSX.Element
content: JSX.Element
isOpen: boolean | undefined
onCollapse: (collapsed: boolean) => void
}
const Collapse: ParentComponent<Props> = (props) => {
const { title, content, onCollapse } = props
const getCollapseClassName = () => {
2023-08-30 23:36:25 +08:00
const openedClassName = 'collapse-open'
const closedClassName = 'collapse-close'
return props.isOpen ? openedClassName : closedClassName
2023-08-30 23:02:55 +08:00
}
2023-08-30 23:36:25 +08:00
2023-08-30 23:02:55 +08:00
const getCollapseContentClassName = () => {
2023-08-30 23:36:25 +08:00
const openedClassName = 'opacity-100'
const closedClassName = 'opacity-0'
2023-08-30 23:36:25 +08:00
return props.isOpen ? openedClassName : closedClassName
2023-08-30 23:02:55 +08:00
}
return (
<div
class={twMerge(
getCollapseClassName(),
2023-08-31 00:00:50 +08:00
'collapse collapse-arrow overflow-visible border-secondary bg-base-200',
2023-08-30 23:02:55 +08:00
)}
>
2023-08-31 20:02:07 +08:00
<input
type="checkbox"
onChange={(e) => onCollapse(e.target.checked)}
checked={props.isOpen}
/>
<div class="collapse-title text-xl font-medium">{title}</div>
2023-08-30 23:02:55 +08:00
<div
class={twMerge(
getCollapseContentClassName(),
2023-08-31 00:00:50 +08:00
'collapse-content grid auto-rows-min grid-cols-2 gap-2 transition-opacity duration-1000 lg:grid-cols-3 xl:grid-cols-4',
2023-08-30 23:02:55 +08:00
)}
>
{content}
</div>
</div>
)
}
export default Collapse