🛠️ Fixed eslint errors

src/components/codeBlock.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import type { Component, Snippet, SvelteComponent } from "svelte";
+  import type { Component } from "svelte";
 
   import { cn } from "@/utils/cn";
   import CopyIcon from "@lucide/svelte/icons/copy";
@@ -18,7 +18,6 @@
   let timeoutId: ReturnType<typeof setTimeout> | null = null;
 
   const handleCopy = async () => {
-    try {
     await clipboard(code);
 
     if (timeoutId) {
@@ -30,9 +29,6 @@
       copied = false;
       timeoutId = null;
     }, copyDuration);
-    } catch (error) {
-      copied = false;
-    }
   };
 
   $effect(() => {

src/components/layout/showCategories.svelte

@@ -19,7 +19,7 @@
   });
 </script>
 
-{#each categories.sort() as category}
+{#each categories.sort() as category (category)}
   <a
     href={`/directory/${category.toLowerCase()}`}
     data-sveltekit-preload-data

src/components/selectPkgManager.svelte

@@ -27,7 +27,7 @@
     {/if}
   </Select.Trigger>
   <Select.Content sideOffset={1.5}>
-    {#each Object.entries(managers) as [value, { Icon, label }]}
+    {#each Object.entries(managers) as [value, { Icon, label }] (value)}
       <Select.Item
         {value}
         onclick={() => pkgManager.set(value as PackageManager)}

src/components/svgs/setupShadcnRegistry.svelte

@@ -18,7 +18,7 @@
 
 <Dialog.Root>
   <Dialog.Trigger>
-    {@render children?.()}
+    {@render children()}
   </Dialog.Trigger>
   <Dialog.Content class="text-sm">
     <Dialog.Header>
@@ -33,6 +33,6 @@
     </p>
     <CodeBlock code={registryCode} />
     <p class="mt-2">2. Then use the following command to add SVGs:</p>
-    <CodeBlock code={`npx shadcn@latest add @svgl/[svg-name]`} />
+    <CodeBlock code="npx shadcn@latest add @svgl/[svg-name]" />
   </Dialog.Content>
 </Dialog.Root>

src/components/svgs/svgCard.svelte

@@ -143,7 +143,7 @@
     </p>
     <div class="flex items-center justify-center space-x-1">
       {#if Array.isArray(svgInfo.category)}
-        {#each svgInfo.category.slice(0, maxVisibleCategories) as c, index}
+        {#each svgInfo.category.slice(0, maxVisibleCategories) as c (c)}
           <a
             href={`/directory/${c.toLowerCase()}`}
             class={badgeVariants({
@@ -176,7 +176,7 @@
             </Popover.Trigger>
             <Popover.Content class="flex w-auto flex-col space-y-2">
               <p class="font-medium">More tags:</p>
-              {#each svgInfo.category.slice(maxVisibleCategories) as c}
+              {#each svgInfo.category.slice(maxVisibleCategories) as c (c)}
                 <a
                   href={`/directory/${c.toLowerCase()}`}
                   class={cn(buttonVariants({ variant: "outline" }), "w-full")}

src/components/ui/button/button.svelte

@@ -3,7 +3,7 @@
     HTMLAnchorAttributes,
     HTMLButtonAttributes,
   } from "svelte/elements";
-  import { type VariantProps, tv } from "tailwind-variants";
+  import type { VariantProps } from "tailwind-variants";
   import type { WithElementRef } from "@/types/components";
 
   import { cn } from "@/utils/cn";

src/routes/+page.svelte

@@ -105,7 +105,7 @@
   </PageHeader>
   <Container className="my-6">
     <Grid>
-      {#each displaySvgs as svg}
+      {#each displaySvgs as svg (svg.id)}
         <SvgCard svgInfo={svg} />
       {/each}
     </Grid>

src/routes/directory/[category]/+page.svelte

@@ -27,7 +27,7 @@
 
   // States:
   let searchTerm = $state<string>(data.searchTerm || "");
-  let filteredSvgs = $state<iSVG[]>(data.filteredSvgs);
+  let filteredSvgs = $derived<iSVG[]>(data.filteredSvgs);
 
   const searchSvgs = () => {
     if (!searchTerm) {
@@ -120,7 +120,7 @@
   </PageHeader>
   <Container className="my-6">
     <Grid>
-      {#each filteredSvgs as svg}
+      {#each filteredSvgs as svg (svg.id)}
         <SvgCard svgInfo={svg} />
       {/each}
     </Grid>