File size: 1,299 Bytes
5f24abe | 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 | import { Dialog as Kobalte } from "@kobalte/core/dialog"
import { JSX, Show } from "solid-js"
import "./modal.css"
interface ModalProps {
open: boolean
onClose: () => void
title?: string
variant?: "black"
children: JSX.Element
}
export function Modal(props: ModalProps) {
return (
<Show when={props.open}>
<Kobalte
modal
open={props.open}
preventScroll={false}
onOpenChange={(open) => {
if (!open) props.onClose()
}}
>
<Kobalte.Portal>
<Kobalte.Overlay data-component="modal" data-slot="overlay" onClick={props.onClose}>
<Kobalte.Content
data-slot="content"
data-variant={props.variant}
onClick={(e) => e.stopPropagation()}
onOpenAutoFocus={(e) => {
e.preventDefault()
const target = e.currentTarget as HTMLElement | null
target?.focus({ preventScroll: true })
}}
>
<Show when={props.title}>
<Kobalte.Title data-slot="title">{props.title}</Kobalte.Title>
</Show>
{props.children}
</Kobalte.Content>
</Kobalte.Overlay>
</Kobalte.Portal>
</Kobalte>
</Show>
)
}
|