Files
flotilla/src/lib/components/Dialog.svelte
T
2025-09-11 14:47:06 -07:00

30 lines
813 B
Svelte

<script lang="ts">
import {noop} from "@welshman/lib"
import {fade, fly} from "@lib/transition"
interface Props {
onClose?: any
fullscreen?: boolean
children?: import("svelte").Snippet
}
const {onClose = noop, fullscreen = false, children}: Props = $props()
const extraClass = $derived(
!fullscreen &&
"card2 bg-alt max-h-[90vh] w-[90vw] overflow-auto text-base-content sm:w-[520px] shadow-xl",
)
</script>
<div class="center fixed inset-0 z-modal">
<button
aria-label="Close dialog"
class="absolute inset-0 cursor-pointer bg-[#ccc] opacity-75 dark:bg-black"
transition:fade={{duration: 300}}
onclick={onClose}>
</button>
<div class="scroll-container relative {extraClass}" transition:fly={{duration: 300}}>
{@render children?.()}
</div>
</div>