Merge pull request #136 from pheralb/next

⚙️ Add warning alert.

README.md

@@ -58,6 +58,9 @@
 
 ## 🚀 Getting Started
 
+> [!IMPORTANT]
+> Before submitting the SVG, **make sure that you have permission** or that the license of the SVG allows you to add it to svgl. If you are not sure, please contact the company or author.
+
 You will need:
 
 - [Node.js 16+ (recommended 18 LTS)](https://nodejs.org/en/).

src/components/notFound.svelte

@@ -1,22 +1,28 @@
 <script lang="ts">
   export let notFoundTerm: string;
-
-  import FileSearch from 'phosphor-svelte/lib/FileMagnifyingGlass';
-  import ArrowUpRight from 'phosphor-svelte/lib/ArrowUpRight';
+  import { PackageOpen, ArrowUpRight } from 'lucide-svelte';
 </script>
 
-<div
-  class="mt-6 flex w-full flex-col items-center justify-center space-y-2 text-gray-600 dark:text-gray-400"
->
-  <FileSearch size={40} />
-  <p class="mt-1 text-xl font-medium">SVG not found</p>
-  <p class="text-lg">"{notFoundTerm}"</p>
-  <a
-    href="https://github.com/pheralb/svgl/issues/new"
-    target="_blank"
-    class="flex items-center space-x-2 rounded-md border border-neutral-300 p-2 duration-100 hover:bg-neutral-200 dark:border-neutral-700 dark:hover:bg-neutral-700/40"
-  >
-    <span>Request SVG</span>
-    <ArrowUpRight size={16} />
-  </a>
+<div class="mt-6 flex w-full flex-col items-center justify-center text-gray-600 dark:text-gray-400">
+  <PackageOpen size={40} class="mb-4" />
+  <p class="text-xl mb-1 font-medium">SVG not found</p>
+  <p class="text-md mb-4 font-mono">"{notFoundTerm}"</p>
+  <div class="flex items-center space-x-1">
+    <a
+      href="https://github.com/pheralb/svgl?tab=readme-ov-file#-getting-started"
+      target="_blank"
+      class="flex items-center space-x-2 rounded-md border border-neutral-300 p-2 duration-100 hover:bg-neutral-200 dark:border-neutral-700 dark:hover:bg-neutral-700/40"
+    >
+      <span>Submit logo</span>
+      <ArrowUpRight size={16} />
+    </a>
+    <a
+      href="https://github.com/pheralb/svgl/issues/new"
+      target="_blank"
+      class="flex items-center space-x-2 rounded-md border border-neutral-300 p-2 duration-100 hover:bg-neutral-200 dark:border-neutral-700 dark:hover:bg-neutral-700/40"
+    >
+      <span>Request SVG</span>
+      <ArrowUpRight size={16} />
+    </a>
+  </div>
 </div>

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}

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>