From 3adfa1ccf5ec6a86da13119609fe7bbc43b3ed99 Mon Sep 17 00:00:00 2001
From: ZXY101 <tennershaun@gmail.com>
Date: Thu, 3 Aug 2023 14:42:24 +0200
Subject: [PATCH] Add snackbar util

---
 src/lib/components/Snackbar.svelte | 31 ++++++++++++++++++++++++++++++
 src/lib/theme.ts                   | 13 +++++++++++++
 src/lib/util/snackbar.ts           | 18 +++++++++++++++++
 src/routes/+layout.svelte          |  2 ++
 4 files changed, 64 insertions(+)
 create mode 100644 src/lib/components/Snackbar.svelte
 create mode 100644 src/lib/util/snackbar.ts

diff --git a/src/lib/components/Snackbar.svelte b/src/lib/components/Snackbar.svelte
new file mode 100644
index 0000000..67a9cae
--- /dev/null
+++ b/src/lib/components/Snackbar.svelte
@@ -0,0 +1,31 @@
+<script lang="ts">
+	import { colorAlpha, colors } from '$lib/theme';
+	import { snackbarStore } from '$lib/util/snackbar';
+	import { fade, fly } from 'svelte/transition';
+</script>
+
+{#if $snackbarStore?.message && $snackbarStore?.visible}
+	<div
+		in:fly={{ y: 200, duration: 500 }}
+		out:fade={{ duration: 500 }}
+		style:--background={colorAlpha(colors.primaryAccentColor, 0.9)}
+		style:--border={colors.secondaryColor}
+		class="toast"
+	>
+		{$snackbarStore?.message}
+	</div>
+{/if}
+
+<style>
+	.toast {
+		background-color: var(--background);
+		position: fixed;
+		right: 10px;
+		bottom: 10px;
+		padding: 20px;
+		border-radius: 6px;
+		border: 1px solid var(--border);
+		min-width: 250px;
+		display: flex;
+	}
+</style>
diff --git a/src/lib/theme.ts b/src/lib/theme.ts
index 17457d6..5bfd88b 100644
--- a/src/lib/theme.ts
+++ b/src/lib/theme.ts
@@ -11,3 +11,16 @@ export const colors = {
 	dangerAccentColor: '#ddaeb2',
 	dangerActivecolor: '#b69092'
 };
+
+export function colorAlpha(hex: string, alpha: number) {
+	const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+
+	if (result) {
+		const { r, g, b } = {
+			r: parseInt(result[1], 16),
+			g: parseInt(result[2], 16),
+			b: parseInt(result[3], 16)
+		}
+		return `rgba(${r},${g},${b},${alpha})`
+	}
+}
\ No newline at end of file
diff --git a/src/lib/util/snackbar.ts b/src/lib/util/snackbar.ts
new file mode 100644
index 0000000..838b6c2
--- /dev/null
+++ b/src/lib/util/snackbar.ts
@@ -0,0 +1,18 @@
+import { writable } from "svelte/store";
+
+type Snackbar = {
+  visible: boolean;
+  message: string;
+};
+export const snackbarStore = writable<Snackbar | undefined>(undefined);
+
+export function showSnackbar(message: string, duration = 3000) {
+  snackbarStore.set({
+    visible: true,
+    message
+  });
+
+  setTimeout(() => {
+    snackbarStore.set(undefined);
+  }, duration);
+}
\ No newline at end of file
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index d11617d..2dab866 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,9 +1,11 @@
 <script lang="ts">
 	import NavBar from '$lib/components/NavBar.svelte';
+	import Snackbar from '$lib/components/Snackbar.svelte';
 	import '../app.css';
 </script>
 
 <NavBar />
+<Snackbar />
 
 <div>
 	<slot />