feat: basic admin interface

2026-10-08 13:41:02 -05:00
parent 7b0800882a
commit f6e1bc1f47
27 changed files with 4095 additions and 49 deletions
@@ -0,0 +1,34 @@
+<script setup lang="ts">
+defineProps<{
+    title?: string;
+    message?: string;
+    confirmLabel?: string;
+    danger?: boolean;
+}>();
+
+const emit = defineEmits(['confirm', 'cancel']);
+</script>
+
+<template>
+    <div class="flex flex-col gap-4.5 p-6 w-screen md:w-110 max-w-full h-full md:h-auto" role="alertdialog"
+        aria-labelledby="confirm-title" aria-describedby="confirm-message">
+        <h2 id="confirm-title" class="text-lg font-semibold">{{ title ?? 'Are you sure?' }}</h2>
+
+        <p v-if="message" id="confirm-message" class="text-sm leading-normal text-[var(--text-secondary)]">
+            {{ message }}
+        </p>
+
+        <footer class="flex justify-between gap-2 mt-auto">
+            <button type="button"
+                class="flex items-center h-10 px-4 rounded-md border border-[var(--color-border)] text-[var(--text-secondary)] @hover:bg-[var(--color-hover)] transition-[background-color] duration-200"
+                @click="emit('cancel')">
+                Cancel
+            </button>
+            <button type="button" class="flex items-center h-10 px-4 rounded-md font-semibold"
+                :class="danger ? 'bg-red-600 text-white' : 'bg-[var(--color-accent)] text-[var(--color-accent-text)]'"
+                @click="emit('confirm', true)">
+                {{ confirmLabel ?? 'Confirm' }}
+            </button>
+        </footer>
+    </div>
+</template>