feat: Initial after clean slate

1 files changed, 66 insertions, 0 deletions

diff --git a/apps/web-shared/src/components/alert.svelte b/apps/web-shared/src/components/alert.svelte
new file mode 100644
index 0000000..4771f78
--- /dev/null
+++ b/apps/web-shared/src/components/alert.svelte
@@ -0,0 +1,66 @@
+<script>
+	import {afterUpdate} from "svelte";
+
+	export let title = "";
+	export let message = "";
+	export let type = "info";
+	export let visible = true;
+	export let closeable = false;
+
+	afterUpdate(() => {
+		if (type === "default") {
+			type = "primary";
+		}
+	});
+</script>
+
+<div class="alert alert--{type} padding-sm radius-md"
+     class:alert--is-visible={visible}
+     role="alert">
+    <div class="flex justify-between">
+        <div class="flex flex-row items-center">
+            <svg class="icon icon--sm alert__icon margin-right-xxs"
+                 viewBox="0 0 24 24"
+                 aria-hidden="true">
+                <path d="M12,0C5.383,0,0,5.383,0,12s5.383,12,12,12s12-5.383,12-12S18.617,0,12,0z M14.658,18.284 c-0.661,0.26-2.952,1.354-4.272,0.191c-0.394-0.346-0.59-0.785-0.59-1.318c0-0.998,0.328-1.868,0.919-3.957 c0.104-0.395,0.231-0.907,0.231-1.313c0-0.701-0.266-0.887-0.987-0.887c-0.352,0-0.742,0.125-1.095,0.257l0.195-0.799 c0.787-0.32,1.775-0.71,2.621-0.71c1.269,0,2.203,0.633,2.203,1.837c0,0.347-0.06,0.955-0.186,1.375l-0.73,2.582 c-0.151,0.522-0.424,1.673-0.001,2.014c0.416,0.337,1.401,0.158,1.887-0.071L14.658,18.284z M13.452,8c-0.828,0-1.5-0.672-1.5-1.5 s0.672-1.5,1.5-1.5s1.5,0.672,1.5,1.5S14.28,8,13.452,8z"></path>
+            </svg>
+            {#if title}
+                <p class="text-sm">
+                    <strong class="error-title">{title}</strong>
+                </p>
+            {:else if message}
+                <div class="text-component text-sm break-word">
+                    {@html message}
+                </div>
+            {/if}
+        </div>
+        {#if closeable}
+            <button class="reset alert__close-btn"
+                    on:click={() => visible = false}>
+                <svg class="icon"
+                     viewBox="0 0 20 20"
+                     fill="none"
+                     stroke="currentColor"
+                     stroke-linecap="round"
+                     stroke-linejoin="round"
+                     stroke-width="2">
+                    <title>Close alert</title>
+                    <line x1="3"
+                          y1="3"
+                          x2="17"
+                          y2="17"/>
+                    <line x1="17"
+                          y1="3"
+                          x2="3"
+                          y2="17"/>
+                </svg>
+            </button>
+        {/if}
+    </div>
+
+    {#if message && title}
+        <div class="text-component text-sm break-word padding-top-xs">
+            {@html message}
+        </div>
+    {/if}
+</div>