A new start

packages/frontend/src/lib/components/age-verification-dialog/age-verification-dialog.svelte

@@ -0,0 +1,77 @@
+<script lang="ts">
+import { _ } from "svelte-i18n";
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogHeader,
+	DialogTitle,
+} from "$lib/components/ui/dialog";
+import { Button } from "$lib/components/ui/button";
+import { Separator } from "$lib/components/ui/separator";
+import { onMount } from "svelte";
+
+const AGE_VERIFICATION_KEY = "age-verified";
+
+let isOpen = true;
+
+function handleAgeConfirmation() {
+	localStorage.setItem(AGE_VERIFICATION_KEY, "true");
+	isOpen = false;
+}
+
+onMount(() => {
+	const storedVerification = localStorage.getItem(AGE_VERIFICATION_KEY);
+	if (storedVerification === "true") {
+		isOpen = false;
+	}
+});
+</script>
+
+<Dialog bind:open={isOpen}>
+    <DialogContent
+        class="sm:max-w-md"
+        onInteractOutside={(e) => e.preventDefault()}
+        showCloseButton={false}
+    >
+        <DialogHeader class="space-y-4">
+            <div class="flex items-center justify-between">
+                <div class="flex items-center gap-3">
+                    <div
+                        class="w-10 h-10 shrink-0 grow-0 rounded-full bg-gradient-to-br from-primary to-purple-600 flex items-center justify-center"
+                    >
+                        <span class="text-primary-foreground text-sm"
+                            >{$_("age_verification_dialog.age")}</span
+                        >
+                    </div>
+                    <div class="">
+                        <DialogTitle class="text-left text-xl font-semibold text-primary-foreground"
+                            >{$_("age_verification_dialog.title")}</DialogTitle
+                        >
+                        <DialogDescription class="text-left text-sm">
+                            {$_("age_verification_dialog.description")}
+                        </DialogDescription>
+                    </div>
+                </div>
+            </div>
+        </DialogHeader>
+
+        <Separator class="my-4" />
+
+        <!-- Close Button -->
+        <div class="flex justify-end gap-4">
+            <Button variant="destructive" href={$_("age_verification_dialog.exit_url")} size="sm">
+                {$_("age_verification_dialog.exit")}
+            </Button>
+            <Button
+                variant="default"
+                size="sm"
+                onclick={handleAgeConfirmation}
+                class="cursor-pointer"
+            >
+                <span class="icon-[ri--check-line]"></span>
+                {$_("age_verification_dialog.confirm")}
+            </Button>
+        </div>
+    </DialogContent>
+</Dialog>