implementing snapshots

This commit is contained in:
Emily
2024-07-29 16:07:15 +02:00
parent 7b54c109f0
commit bc27d7cded
6 changed files with 88 additions and 32 deletions

View File

@@ -6,6 +6,8 @@ Lit.init('6643cd08a1854e3b81722ab5');
const debugMode = process.dev;
const { alerts, closeAlert } = useAlert();
const { showDialog, closeDialog, dialogComponent, dialogParams } = useCustomDialog();
</script>
@@ -13,6 +15,25 @@ const { showDialog, closeDialog, dialogComponent, dialogParams } = useCustomDial
<div class="w-dvw h-dvh bg-[#151517] relative">
<div class="fixed top-4 right-8 z-[999] flex flex-col gap-2" v-if="alerts.length > 0">
<div v-for="alert of alerts"
class="w-[30vw] min-w-[20rem] relative bg-[#151515] border-solid border-[2px] border-[#262626] rounded-lg p-6 drop-shadow-lg">
<div class="flex items-start gap-4">
<div> <i :class="alert.icon"></i> </div>
<div class="grow">
<div class="poppins font-semibold">{{ alert.title }}</div>
<div class="poppins">
{{ alert.text }}
</div>
</div>
<div>
<i @click="closeAlert(alert.id)" class="fas fa-close hover:text-[#CCCCCC] cursor-pointer"></i>
</div>
</div>
</div>
</div>
<div v-if="debugMode"
class="absolute bottom-8 left-4 bg-red-400 text-white text-[.9rem] font-bold px-4 py-[.2rem] rounded-lg z-[100]">
<div class="poppins flex sm:hidden"> XS </div>