homeman-deno/components/Dialog.tsx

45 lines
951 B
TypeScript
Raw Normal View History

2024-01-09 21:52:47 -06:00
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>
)
}