Merge 03a613474e into 0b1776c00e

Fix: cancel the loading state after the react component fetch fails

src/components/copySvg.svelte

@@ -113,6 +113,7 @@
         description: `${error ?? ''}`,
         duration: 5000
       });
+      isLoading = false;
       return;
     }
 

src/components/svgCard.svelte

@@ -52,7 +52,7 @@
   let moreTagsOptions = false;
 
   // Global Images Styles:
-  const globalImageStyles = 'mb-4 mt-2 h-10 select-none';
+  const globalImageStyles = 'mb-4 mt-2 h-10 select-none pointer-events-none';
 </script>
 
 <div
@@ -102,7 +102,11 @@
     <div class="flex items-center space-x-1 justify-center">
       {#if Array.isArray(svgInfo.category)}
         {#each svgInfo.category.slice(0, maxVisibleCategories) as c, index}
-          <a href={`/directory/${c.toLowerCase()}`} class={badgeStyles}>{c}</a>
+          <a
+            href={`/directory/${c.toLowerCase()}`}
+            class={badgeStyles}
+            title={`This icon is part of the ${svgInfo.category} category`}>{c}</a
+          >
         {/each}
 
         {#if svgInfo.category.length > maxVisibleCategories}

src/components/warningRaycast.svelte

@@ -1,49 +0,0 @@
-<script lang="ts">
-  import { browser } from '$app/environment';
-  import { buttonStyles } from '@/ui/styles';
-  import { cn } from '@/utils/cn';
-  import RaycastIcon from './icons/raycastIcon.svelte';
-  import { ArrowUpLeft, ArrowUpRight, X } from 'lucide-svelte';
-  import XIcon from './icons/xIcon.svelte';
-
-  let warning = false;
-  let warningName = 'svgl_warning_raycast_message';
-  const initialValue = browser ? window.localStorage.getItem(warningName) : true;
-</script>
-
-{#if !warning && !initialValue}
-  <div
-    class="flex items-center w-full justify-between md:flex-row flex-col md:space-x-2 space-x-0 space-y-2 md:space-y-0 py-2 px-3 bg-neutral-100/60 dark:bg-neutral-800/40 text-neutral-700 dark:text-neutral-300 border-b border-neutral-200 dark:border-neutral-800"
-  >
-    <div class="flex items-center space-x-2">
-      <RaycastIcon
-        iconSize={22}
-        className="mr-1 flex-shrink-0 text-rose-600 dark:text-rose-500 animate-pulse"
-      />
-      <p>
-        Update your <strong>Raycast</strong> extension to the latest version to use the new SVGL API.
-      </p>
-    </div>
-    <div class="flex items-center space-x-2">
-      <a
-        href="https://x.com/1weiho/status/1828077090824241445"
-        class={cn(buttonStyles, 'h-10 text-sm')}
-        target="_blank"
-      >
-        <XIcon iconSize={14} />
-        <span>How to update</span>
-        <ArrowUpRight size={14} strokeWidth={2} />
-      </a>
-      <button
-        class={cn(buttonStyles, 'h-10 text-sm')}
-        on:click={() => {
-          localStorage.setItem(warningName, 'true');
-          warning = true;
-        }}
-      >
-        <X size={14} strokeWidth={2} />
-        <span>Close</span>
-      </button>
-    </div>
-  </div>
-{/if}

src/data/svgs.ts

@@ -2010,7 +2010,7 @@ export const svgs: iSVG[] = [
   },
   {
     title: 'Stripe',
-    category: 'Software',
+    category: ['Software', 'Payment'],
     route: '/library/stripe.svg',
     url: 'https://stripe.com/'
   },
@@ -2508,12 +2508,6 @@ export const svgs: iSVG[] = [
     },
     url: 'https://www.markdownguide.org/'
   },
-  {
-    title: 'Movie Web',
-    category: 'Entertainment',
-    route: '/library/movie-web.svg',
-    url: 'https://movie-web.app/'
-  },
   {
     title: 'Radix UI',
     category: 'Library',
@@ -2914,5 +2908,11 @@ export const svgs: iSVG[] = [
     category: ['Google', 'Software'],
     route: '/library/Google_Colaboratory.svg',
     url: 'https://colab.research.google.com/'
+  },
+  {
+    title: 'Raspberry PI',
+    category: ['Hardware', 'Software'],
+    route: '/library/raspberry_pi.svg',
+    url: 'https://www.raspberrypi.com/'
   }
 ];

src/routes/+layout.svelte

@@ -30,7 +30,6 @@
 
   // Layout:
   import Navbar from '@/components/navbar.svelte';
-  import WarningRaycast from '@/components/warningRaycast.svelte';
 </script>
 
 <ModeWatcher />
@@ -88,7 +87,6 @@
   </aside>
   <div class="ml-0 md:ml-56 pb-6">
     <Warning />
-    <WarningRaycast />
     <Transition pathname={data.pathname}>
       <slot />
     </Transition>

src/types/categories.ts

@@ -2,6 +2,7 @@ export type tCategory =
   | 'All'
   | 'AI'
   | 'Software'
+  | 'Hardware'
   | 'Library'
   | 'Hosting'
   | 'Framework'