From 0a2f580f30bb3de27df3c14b4c44cc5a3e2cd5ef Mon Sep 17 00:00:00 2001
From: Alessio Davoli <davoli.alessio@webdeploy.it>
Date: Sat, 22 Jul 2023 19:50:42 +0200
Subject: [PATCH] Add toast

---
 frontend/src/lib/components/Toast.svelte | 46 ++++++++++++++++++++++++
 1 file changed, 46 insertions(+)
 create mode 100644 frontend/src/lib/components/Toast.svelte

diff --git a/frontend/src/lib/components/Toast.svelte b/frontend/src/lib/components/Toast.svelte
new file mode 100644
index 0000000..994af44
--- /dev/null
+++ b/frontend/src/lib/components/Toast.svelte
@@ -0,0 +1,46 @@
+<script>
+	import { onDestroy, onMount } from 'svelte';
+	export let message = "L'applicazione è pronta per funzionare offline!";
+	let show = false;
+	let nodeRef;
+
+	onMount(() => {
+		show = true;
+		setTimeout(() => {
+			show = false;
+			setTimeout(() => {
+				nodeRef.parentNode.removeChild(nodeRef);
+			}, 5000);
+		}, 5000);
+	});
+
+	onDestroy(() => {
+		show = false;
+	});
+</script>
+
+<div bind:this={nodeRef} id="toast" class:show>
+	<img src="/icons/checkmark.svg" alt="check" />
+	<div>{message}</div>
+</div>
+
+<style>
+	.show {
+		transform: translateY(0vh) !important;
+	}
+	#toast {
+		transform: translateY(10vh);
+		transition: transform ease 0.4s;
+		position: fixed;
+		height: 10vh;
+		display: flex;
+		bottom: 0;
+		z-index: 4;
+		left: 0;
+		width: 100%;
+		justify-content: center;
+		background-color: #f6ae04;
+		color: black;
+		place-items: center;
+	}
+</style>