minor: new nav system (#5)

Co-authored-by: Madison Grubb <madison@elastiflow.com>
Reviewed-on: #5

app/components/DeleteUserConfirmModal.vue

@@ -0,0 +1,46 @@
+<template>
+  <BaseModal
+    :show="!!user"
+    aria-labelledby="delete-user-title"
+    @close="$emit('close')"
+  >
+    <div
+      v-if="user"
+      class="kestrel-card-modal w-full max-w-sm p-4"
+    >
+      <h3
+        id="delete-user-title"
+        class="mb-2 text-sm font-medium text-kestrel-text"
+      >
+        Delete user?
+      </h3>
+      <p class="mb-4 text-sm text-kestrel-muted">
+        Are you sure you want to delete <strong class="text-kestrel-text">{{ user.identifier }}</strong>? They will not be able to sign in again.
+      </p>
+      <div class="flex justify-end gap-2">
+        <button
+          type="button"
+          class="kestrel-btn-secondary"
+          @click="$emit('close')"
+        >
+          Cancel
+        </button>
+        <button
+          type="button"
+          class="rounded border border-red-500/60 bg-red-500/10 px-3 py-1.5 text-sm text-red-400 hover:bg-red-500/20"
+          @click="$emit('confirm')"
+        >
+          Delete
+        </button>
+      </div>
+    </div>
+  </BaseModal>
+</template>
+
+<script setup>
+defineProps({
+  user: { type: Object, default: null },
+})
+
+defineEmits(['close', 'confirm'])
+</script>