beatufitull front end for ozone modration ,, wit catpucoin and ebergarden !
ozone
moderation
1<script lang="ts">
2 import { X } from 'lucide-svelte';
3 import type { Snippet } from 'svelte';
4 import { cubicOut, cubicIn } from 'svelte/easing';
5 import { fade, scale } from 'svelte/transition';
6
7 let {
8 isOpen = false,
9 title = '',
10 onClose = () => {},
11 children
12 }: {
13 isOpen?: boolean;
14 title?: string | Snippet;
15 onClose?: () => void;
16 children: Snippet;
17 } = $props();
18
19 function handleBackdropClick() {
20 onClose();
21 }
22 function handleKeydown(e: KeyboardEvent) {
23 if (e.key === 'Escape') onClose();
24 }
25</script>
26
27<svelte:window onkeydown={handleKeydown} />
28
29{#if isOpen}
30 <div
31 class="fixed inset-0 z-40 bg-black/30"
32 transition:fade={{ duration: 150 }}
33 onclick={handleBackdropClick}
34 role="presentation"
35 tabindex="-1"
36 ></div>
37{/if}
38
39{#if isOpen}
40 <div
41 class="fixed inset-0 z-50 flex items-center justify-center"
42 style="
43 padding-top: max(1rem, env(safe-area-inset-top));
44 padding-right: max(1rem, env(safe-area-inset-right));
45 padding-bottom: max(1rem, env(safe-area-inset-bottom));
46 padding-left: max(1rem, env(safe-area-inset-left));
47 "
48 >
49 <div
50 in:scale={{ duration: 240, start: 0.88, easing: cubicOut }}
51 out:scale={{ duration: 120, start: 0.95, easing: cubicIn }}
52 class="relative flex h-full max-h-full w-full max-w-3xl flex-col overflow-hidden rounded-lg border border-ctp-surface1 bg-ctp-base shadow-lg md:h-auto md:max-h-[calc(100vh-2rem)]"
53 role="dialog"
54 aria-modal="true"
55 tabindex="0"
56 >
57 <div class="flex items-center justify-between border-b border-ctp-surface1 p-4">
58 {#if typeof title === 'string'}
59 <h2 class="text-lg font-bold text-ctp-text">
60 {title}
61 </h2>
62 {:else}
63 {@render title()}
64 {/if}
65 <button
66 onclick={onClose}
67 class="cursor-pointer rounded-lg p-1 transition-colors hover:bg-ctp-surface1"
68 aria-label="Close modal"
69 >
70 <X size={20} class="text-ctp-text" />
71 </button>
72 </div>
73 <div class="overflow-y-auto p-4">
74 {@render children?.()}
75 </div>
76 </div>
77 </div>
78{/if}