schoolbox desktop app :)
42willow.github.io
1<script lang="ts">
2 import type { Snippet } from "svelte";
3 import { Dialog, Separator, type WithoutChild } from "bits-ui";
4 import { X } from "@lucide/svelte";
5 import { settings } from "$lib/store";
6
7 type Props = Dialog.RootProps & {
8 trigger: Snippet;
9 title: Snippet;
10 description: Snippet;
11 triggerProps?: WithoutChild<Dialog.TriggerProps>;
12 contentProps?: WithoutChild<Dialog.ContentProps>;
13 // ...other component props if you wish to pass them
14 };
15
16 let {
17 open = $bindable(false),
18 children,
19 triggerProps,
20 contentProps,
21 trigger,
22 title,
23 description,
24 ...restProps
25 }: Props = $props();
26</script>
27
28<Dialog.Root bind:open {...restProps}>
29 <Dialog.Trigger {...triggerProps}>
30 {@render trigger()}
31 </Dialog.Trigger>
32 <Dialog.Portal>
33 <Dialog.Overlay class="fixed inset-0 z-50 bg-ctp-base/80 backdrop-blur-md" />
34 <Dialog.Content
35 class="{settings.state.theme
36 .flavour} fixed top-[50%] left-[50%] z-50 flex w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] flex-col gap-4 rounded-lg bg-ctp-mantle p-4 text-ctp-text outline-3 outline-ctp-overlay0 sm:max-w-[490px] md:w-full"
37 {...contentProps}>
38 <Dialog.Title class="flex w-full items-center justify-center text-lg font-semibold tracking-tight">
39 {@render title()}
40 </Dialog.Title>
41 <Separator.Root class="-mx-4 block h-px bg-ctp-surface0" />
42
43 <Dialog.Description>
44 {@render description()}
45 </Dialog.Description>
46 {@render children?.()}
47 <Dialog.Close class="absolute top-5 right-5 rounded-md transition-transform duration-300 active:scale-[0.9]">
48 <X class="size-5 stroke-ctp-text" />
49 <span class="sr-only">Close</span>
50 </Dialog.Close>
51 </Dialog.Content>
52 </Dialog.Portal>
53</Dialog.Root>