29 lines
637 B
TypeScript
29 lines
637 B
TypeScript
|
import { VNode } from 'preact'
|
||
|
|
import { useEffect, useRef } from 'preact/hooks'
|
||
|
|
|
||
|
|
export default function MoreBox({ children }: { children: VNode | VNode[] }) {
|
||
|
|
const dialog = useRef<HTMLDialogElement>(null)
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
dialog.current?.addEventListener('click', (event) => {
|
||
|
|
if (event.target === dialog.current) {
|
||
|
|
dialog.current?.close()
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}, [])
|
||
|
|
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
<button
|
||
|
|
class='islands__more_box__button'
|
||
|
|
onClick={() => dialog.current?.showModal()}
|
||
|
|
>
|
||
|
|
<i class='ri-more-2-line'></i>
|
||
|
|
</button>
|
||
|
|
<dialog class='islands__more_box__dialog' ref={dialog}>
|
||
|
|
{children}
|
||
|
|
</dialog>
|
||
|
|
</>
|
||
|
|
)
|
||
|
|
}
|