kin/web/frontend/src/components/Modal.vue

19 lines
712 B
Vue
Raw Normal View History

<script setup lang="ts">
defineProps<{ title: string }>()
const emit = defineEmits<{ close: [] }>()
</script>
<template>
<div class="fixed inset-0 z-50 flex items-center justify-center bg-black/60" @click.self="emit('close')">
<div class="bg-gray-900 border border-gray-700 rounded-lg w-full max-w-lg mx-4 shadow-2xl">
<div class="flex items-center justify-between px-5 py-3 border-b border-gray-800">
<h3 class="text-sm font-semibold text-gray-200">{{ title }}</h3>
<button @click="emit('close')" class="text-gray-500 hover:text-gray-300 text-lg leading-none">&times;</button>
</div>
<div class="px-5 py-4">
<slot />
</div>
</div>
</div>
</template>