45 lines
951 B
TypeScript
45 lines
951 B
TypeScript
|
import { createRef, JSX } from 'preact'
|
||
|
|
import { Button } from '@homeman/components/Button.tsx'
|
||
|
|
import { useEffect } from 'preact/hooks'
|
||
|
|
|
||
|
|
interface Props extends JSX.HTMLAttributes<HTMLDialogElement> {
|
||
|
|
headerTitle: string
|
||
|
|
show?: boolean
|
||
|
|
}
|
||
|
|
|
||
|
|
export function Dialog(
|
||
|
|
{ show, headerTitle, children, className, ...props }: Props,
|
||
|
|
) {
|
||
|
|
const self = createRef<HTMLDialogElement>()
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
if (show) {
|
||
|
|
self.current?.showModal()
|
||
|
|
} else {
|
||
|
|
self.current?.close()
|
||
|
|
}
|
||
|
|
return () => {
|
||
|
|
// cleanup
|
||
|
|
}
|
||
|
|
}, [show])
|
||
|
|
|
||
|
|
return (
|
||
|
|
<dialog
|
||
|
|
{...props}
|
||
|
|
class={`rounded drop-shadow-lg backdrop:bg-stone-500/90 ${className}`}
|
||
|
|
ref={self}
|
||
|
|
>
|
||
|
|
<header class='p-4 flex w-full items-center border-b-2 border-stone-500/20'>
|
||
|
|
<h1 class='text-xl grow'>{headerTitle}</h1>
|
||
|
|
<Button
|
||
|
|
onClick={() => self.current?.close()}
|
||
|
|
class='text-xl p-4 border-b-2 mr-4'
|
||
|
|
>
|
||
|
|
✕
|
||
|
|
</Button>
|
||
|
|
</header>
|
||
|
|
{children}
|
||
|
|
</dialog>
|
||
|
|
)
|
||
|
|
}
|