From d6bb70660eb1e7854b65cd32abbb69bf91d52a35 Mon Sep 17 00:00:00 2001
From: pheralb <pablohdez4340@gmail.com>
Date: Fri, 31 Jan 2025 13:19:01 +0000
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Upgrade=20svgCard,=20theme,=20trans?=
 =?UTF-8?q?ition=20&=20warning=20components=20to=20svelte=205?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/svgCard.svelte    | 22 +++++++++++++---------
 src/components/theme.svelte      |  4 +---
 src/components/transition.svelte | 11 +++++++++--
 src/components/warning.svelte    |  4 ++--
 4 files changed, 25 insertions(+), 16 deletions(-)

diff --git a/src/components/svgCard.svelte b/src/components/svgCard.svelte
index 09cc8ab..4ac3bcf 100644
--- a/src/components/svgCard.svelte
+++ b/src/components/svgCard.svelte
@@ -28,22 +28,26 @@
   import { insertSVG as figmaInsertSVG } from '@/figma/insert-svg';
 
   // Props:
-  export let svgInfo: iSVG;
-  export let searchTerm: string;
+  interface Props {
+    svgInfo: iSVG;
+    searchTerm: string;
+  }
 
-  let isInFigma = false;
+  let { svgInfo, searchTerm }: Props = $props();
+
+  let isInFigma = $state(false);
   onMount(() => {
     const searchParams = new URLSearchParams(window.location.search);
     isInFigma = searchParams.get('figma') === '1';
   });
 
   // Wordmark SVG:
-  let wordmarkSvg = false;
-  $: {
+  let wordmarkSvg = $state(false);
+  $effect(() => {
     if (searchTerm) {
       wordmarkSvg = false;
     }
-  }
+  });
 
   const insertSVG = async (url?: string) => {
     const content = (await getSvgContent(url)) as string;
@@ -56,7 +60,7 @@
 
   // Max Categories:
   let maxVisibleCategories = 1;
-  let moreTagsOptions = false;
+  let moreTagsOptions = $state(false);
 
   // Global Styles:
   const globalImageStyles = 'mb-4 mt-2 h-10 select-none pointer-events-none';
@@ -156,7 +160,7 @@
     {#if isInFigma}
       <button
         title="Insert to figma"
-        on:click={() => {
+        onclick={() => {
           const svgHasTheme = typeof svgInfo.route !== 'string';
 
           if (!svgHasTheme) {
@@ -210,7 +214,7 @@
     {#if svgInfo.wordmark !== undefined}
       <button
         title={wordmarkSvg ? 'Show logo SVG' : 'Show wordmark SVG'}
-        on:click={() => {
+        onclick={() => {
           wordmarkSvg = !wordmarkSvg;
         }}
         class={btnStyles}
diff --git a/src/components/theme.svelte b/src/components/theme.svelte
index cbfb0d3..f2119e7 100644
--- a/src/components/theme.svelte
+++ b/src/components/theme.svelte
@@ -1,11 +1,9 @@
 <script lang="ts">
   import { toggleMode, mode } from 'mode-watcher';
-
-  // Icons:
   import { MoonIcon, SunIcon } from 'lucide-svelte';
 </script>
 
-<button on:click={toggleMode} aria-label="Toggle dark mode" class="opacity-80 hover:opacity-100">
+<button onclick={toggleMode} aria-label="Toggle dark mode" class="opacity-80 hover:opacity-100">
   {#if $mode === 'light'}
     <SunIcon size={20} strokeWidth={1.5} />
   {:else}
diff --git a/src/components/transition.svelte b/src/components/transition.svelte
index 4c94fb1..20b910c 100644
--- a/src/components/transition.svelte
+++ b/src/components/transition.svelte
@@ -1,10 +1,17 @@
 <script lang="ts">
+  import type { Snippet } from 'svelte';
   import { fly } from 'svelte/transition';
-  export let pathname: string = '';
+
+  interface TransitionProps {
+    pathname?: string;
+    children?: Snippet;
+  }
+
+  let { pathname = '', children }: TransitionProps = $props();
 </script>
 
 {#key pathname}
   <div in:fly={{ x: 0, y: 23, duration: 450 }}>
-    <slot />
+    {@render children?.()}
   </div>
 {/key}
diff --git a/src/components/warning.svelte b/src/components/warning.svelte
index dd3e224..3a2bab0 100644
--- a/src/components/warning.svelte
+++ b/src/components/warning.svelte
@@ -4,7 +4,7 @@
   import { buttonStyles } from '@/ui/styles';
   import { cn } from '@/utils/cn';
 
-  let warning = false;
+  let warning = $state(false);
   let warningName = 'svgl_warn_message';
   const initialValue = browser ? window.localStorage.getItem(warningName) : true;
 </script>
@@ -33,7 +33,7 @@
     </div>
     <button
       class={cn(buttonStyles, 'h-10 text-sm')}
-      on:click={() => {
+      onclick={() => {
         localStorage.setItem(warningName, 'true');
         warning = true;
       }}