✨ Improve `SVG not found` component with category context and update search placeholder

src/components/svgs/svgNotFound.svelte

@@ -2,20 +2,40 @@
   import { globals } from "@/globals";
 
   import { buttonVariants } from "@/components/ui/button";
+  import SearchIcon from "@lucide/svelte/icons/search";
   import ArrowUpRight from "@lucide/svelte/icons/arrow-up-right";
   import BoxesIcon from "@/components/ui/moving-icons/boxes-icon.svelte";
 
   interface Props {
     svgTitle: string;
+    category?: string;
   }
 
-  let { svgTitle }: Props = $props();
+  let { svgTitle, category }: Props = $props();
 </script>
 
 <div class="flex w-full flex-col items-center justify-center space-y-4">
   <BoxesIcon size={48} strokeWidth={1} />
-  <p>"{svgTitle}" not found</p>
+  <h2 class="text-xl font-semibold">SVG not found</h2>
+  {#if category}
+    <p class="text-neutral-600 dark:text-neutral-400">
+      "{svgTitle}" not found in "{category}" category
+    </p>
+  {:else}
+    <p class="text-neutral-600 dark:text-neutral-400">
+      "{svgTitle}" not found
+    </p>
+  {/if}
   <div class="flex items-center justify-center space-x-2">
+    {#if category}
+      <a
+        href={`/?search=${svgTitle}`}
+        class={buttonVariants({ variant: "outline" })}
+      >
+        <SearchIcon size={14} strokeWidth={1.5} />
+        <span>Search globally</span>
+      </a>
+    {/if}
     <a
       target="_blank"
       href={globals.requestSvgUrl}