This repository has been archived on 2024-03-13. You can view files and clone it, but cannot push or open issues or pull requests.
timekeeper/components/NarrativeModal.vue

35 lines
797 B
Vue
Raw Normal View History

/* eslint-disable vue/no-v-html */
<template>
<div
class="backdrop absolute top-0 bottom-0 left-0 right-0 flex items-center justify-center"
@click.self="$store.commit('closeModal')"
>
<div
class="modal rounded-lg px-8 pt-8 pb-4 flex flex-col items-center bg-teal-100 text-teal-900"
>
<!-- eslint-disable-next-line vue/no-v-html -->
<div class="" v-html="$store.state.modalText" />
<button
class="border bg-teal-900 text-teal-100 rounded-lg mt-4 px-8 py-2 font-bold"
@click="$store.commit('closeModal')"
>
OK
</button>
</div>
</div>
</template>
<script>
export default {}
</script>
<style>
.backdrop {
background-color: rgba(0, 0, 0, 0.4);
backdrop-filter: blur(2px);
}
.modal {
width: 22rem;
}
</style>