From f8430031702c48fbfb86fcc615250939fb6c41bd Mon Sep 17 00:00:00 2001
From: pheralb <pablohdez4340@gmail.com>
Date: Mon, 18 Dec 2023 01:57:56 +0000
Subject: [PATCH] =?UTF-8?q?=E2=9A=99=EF=B8=8F=20Create=20warning=20alert.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/warning.svelte | 34 ++++++++++++++++++++++++++++++++++
 src/routes/+layout.svelte     |  3 ++-
 2 files changed, 36 insertions(+), 1 deletion(-)
 create mode 100644 src/components/warning.svelte

diff --git a/src/components/warning.svelte b/src/components/warning.svelte
new file mode 100644
index 0000000..e59bce8
--- /dev/null
+++ b/src/components/warning.svelte
@@ -0,0 +1,34 @@
+<script lang="ts">
+  import { AlertTriangleIcon } from 'lucide-svelte';
+  import { browser } from '$app/environment';
+
+  let warning = false;
+  const initialValue = browser ? window.localStorage.getItem('warning') : true;
+</script>
+
+{#if !warning && !initialValue}
+  <div
+    class="flex items-center md:flex-row flex-col md:space-x-2 space-x-0 p-3 bg-neutral-100 dark:bg-neutral-800/40 text-neutral-700 dark:text-neutral-300"
+  >
+    <AlertTriangleIcon size={18} strokeWidth={2} class="mr-2 text-yellow-500" />
+    <p>
+      Use each svg responsibly. The svgs provides the link to the product or company that owns it,
+      <strong>please contact them</strong> if you are going to use their logo. If you are the owner
+      of an svg and do not want it to appear here, please
+      <a
+        target="_blank"
+        class="underline underline-offset-2"
+        href="https://github.com/pheralb/svgl/issues/new">create an issue</a
+      > on Github.
+    </p>
+    <button
+      class="ml-auto flex items-center space-x-2 rounded-md p-2 duration-100 hover:bg-neutral-200 dark:hover:bg-neutral-700/40"
+      on:click={() => {
+        localStorage.setItem('warning', 'true');
+        warning = true;
+      }}
+    >
+      Accept
+    </button>
+  </div>
+{/if}
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index c180dde..db00a09 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -20,6 +20,7 @@
 
   // Components for all pages:
   import Transition from '@/components/transition.svelte';
+  import Warning from '@/components/warning.svelte';
 
   // Layout:
   import Navbar from '@/components/navbar.svelte';
@@ -65,7 +66,6 @@
           </a>
         {/each}
       </nav>
-      <div></div>
       <a
         href="https://twitter.com/pheralb_"
         target="_blank"
@@ -83,6 +83,7 @@
     </div>
   </aside>
   <div class="ml-0 md:ml-56 pb-6">
+    <Warning />
     <Transition pathname={data.pathname}>
       <slot />
     </Transition>