From 038edfa2ae400fbe4aa0f5539108aa8d59fcaef8 Mon Sep 17 00:00:00 2001
From: pheralb <pablohdez4340@gmail.com>
Date: Sat, 20 Apr 2024 23:41:34 +0100
Subject: [PATCH] =?UTF-8?q?=E2=9A=A1=EF=B8=8F=20Remove=20spotlight=20effec?=
 =?UTF-8?q?t=20to=20improve=20performance?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/cardSpotlight.svelte |  55 ------
 src/components/svgCard.svelte       | 259 ++++++++++++++--------------
 2 files changed, 130 insertions(+), 184 deletions(-)
 delete mode 100644 src/components/cardSpotlight.svelte

diff --git a/src/components/cardSpotlight.svelte b/src/components/cardSpotlight.svelte
deleted file mode 100644
index c812204..0000000
--- a/src/components/cardSpotlight.svelte
+++ /dev/null
@@ -1,55 +0,0 @@
-<script lang="ts">
-  let domElement: HTMLElement;
-  let focused = false;
-  let position = { x: 0, y: 0 };
-  let opacity = 0;
-
-  const handleMouseMove = (e: MouseEvent) => {
-    if (!domElement || focused) return;
-
-    const rect = domElement.getBoundingClientRect();
-
-    position = {
-      x: e.clientX - rect.left,
-      y: e.clientY - rect.top
-    };
-  };
-
-  const handleFocus = () => {
-    focused = true;
-    opacity = 1;
-  };
-
-  const handleBlur = () => {
-    focused = false;
-    opacity = 0;
-  };
-
-  const handleMouseEnter = () => {
-    opacity = 1;
-  };
-
-  const handleMouseLeave = () => {
-    opacity = 0;
-  };
-</script>
-
-<!--Se quito el aria-hidden="true" para que se pueda leer el contenido del card con el lector de pantalla  -->
-<article
-  bind:this={domElement}
-  on:mousemove={handleMouseMove}
-  on:focus={handleFocus}
-  on:blur={handleBlur}
-  on:mouseenter={handleMouseEnter}
-  on:mouseleave={handleMouseLeave}
-  class="relative flex items-center justify-center overflow-hidden rounded-md border border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900"
->
-  <div
-    class="pointer-events-none absolute transform-gpu -inset-px opacity-0 transition duration-300"
-    style={`
-			opacity: ${opacity};
-			background: radial-gradient(600px circle at ${position.x}px ${position.y}px, rgba(97, 97, 97, 0.1), transparent 40%);
-		`}
-  />
-  <slot />
-</article>
diff --git a/src/components/svgCard.svelte b/src/components/svgCard.svelte
index 91f859a..45654e7 100644
--- a/src/components/svgCard.svelte
+++ b/src/components/svgCard.svelte
@@ -1,16 +1,14 @@
 <script lang="ts">
-  import type { iSVG } from '../types/svg';
-  import { toast } from 'svelte-sonner';
+  import type { iSVG } from '@/types/svg';
 
   // Utils:
   import { cn } from '@/utils/cn';
   import { getSvgContent } from '@/utils/getSvgContent';
 
   // Icons:
-  import { CopyIcon, LinkIcon, ChevronsRight, Baseline, Sparkles } from 'lucide-svelte';
+  import { LinkIcon, ChevronsRight, Baseline, Sparkles } from 'lucide-svelte';
 
   // Components & styles:
-  import CardSpotlight from './cardSpotlight.svelte';
   import DownloadSvg from './downloadSvg.svelte';
   import CopySvg from './copySvg.svelte';
   import { badgeStyles } from '@/ui/styles';
@@ -39,134 +37,137 @@
   // Icon Stroke & Size:
   let iconStroke = 1.8;
   let iconSize = 16;
+
+  // Global Images Styles:
+  const globalImageStyles = 'mb-4 mt-2 h-10 select-none';
 </script>
 
-<CardSpotlight>
-  <div class="flex flex-col items-center justify-center rounded-md p-4">
-    <!-- Image -->
-    {#if wordmarkSvg == true}
-      <img
-        class="hidden dark:block mb-4 mt-2 h-10 select-none"
-        src={typeof svgInfo.wordmark !== 'string'
-          ? svgInfo.wordmark?.dark || ''
-          : svgInfo.wordmark || ''}
-        alt={svgInfo.title}
-        title={svgInfo.title}
-        loading="lazy"
-      />
-      <img
-        class="block dark:hidden mb-4 mt-2 h-10 select-none"
-        src={typeof svgInfo.wordmark !== 'string'
-          ? svgInfo.wordmark?.light || ''
-          : svgInfo.wordmark || ''}
-        alt={svgInfo.title}
-        title={svgInfo.title}
-        loading="lazy"
-      />
-    {:else}
-      <img
-        class={cn('hidden dark:block mb-4 mt-2 h-10 select-none')}
-        src={typeof svgInfo.route !== 'string' ? svgInfo.route.dark : svgInfo.route}
-        alt={svgInfo.title}
-        title={svgInfo.title}
-        loading="lazy"
-      />
-      <img
-        class={cn('block dark:hidden mb-4 mt-2 h-10 select-none')}
-        src={typeof svgInfo.route !== 'string' ? svgInfo.route.light : svgInfo.route}
-        alt={svgInfo.title}
-        title={svgInfo.title}
-        loading="lazy"
-      />
-    {/if}
-    <!-- Title -->
-    <div class="mb-3 flex flex-col space-y-1 items-center justify-center">
-      <p class="truncate text-[15px] font-medium text-balance text-center select-all">
-        {svgInfo.title}
-      </p>
-      <div class="flex items-center space-x-1 justify-center">
-        {#if Array.isArray(svgInfo.category)}
-          {#each svgInfo.category.sort() as c, index}
-            <a href={`/directory/${c.toLowerCase()}`} class={badgeStyles}>{c} </a>
-          {/each}
-        {:else}
-          <a href={`/directory/${svgInfo.category.toLowerCase()}`} class={badgeStyles}>
-            {svgInfo.category}
-          </a>
-        {/if}
-      </div>
-    </div>
-    <!-- Actions -->
-    <div class="flex items-center space-x-1">
-      {#if isInFigma}
-        <button
-          title="Insert to figma"
-          on:click={() => {
-            const svgHasTheme = typeof svgInfo.route !== 'string';
-
-            if (!svgHasTheme) {
-              insertSVG(
-                typeof svgInfo.route === 'string'
-                  ? svgInfo.route
-                  : "Something went wrong. Couldn't copy the SVG."
-              );
-              return;
-            }
-
-            const dark = document.documentElement.classList.contains('dark');
-
-            insertSVG(
-              typeof svgInfo.route !== 'string'
-                ? dark
-                  ? svgInfo.route.dark
-                  : svgInfo.route.light
-                : svgInfo.route
-            );
-          }}
-          class="flex items-center space-x-2 rounded-md p-2 duration-100 hover:bg-neutral-200 dark:hover:bg-neutral-700/40"
-        >
-          <ChevronsRight size={iconSize} strokeWidth={iconStroke} />
-        </button>
-      {/if}
-
-      {#if wordmarkSvg}
-        <CopySvg {iconSize} {iconStroke} {svgInfo} isInFigma={false} isWordmarkSvg={true} />
+<div
+  class="flex flex-col items-center justify-center rounded-md p-4 border border-neutral-200 dark:border-neutral-800 hover:bg-neutral-300/50 dark:hover:bg-neutral-800/20 transition-colors duration-100 group"
+>
+  <!-- Image -->
+  {#if wordmarkSvg == true}
+    <img
+      class={cn('hidden dark:block', globalImageStyles)}
+      src={typeof svgInfo.wordmark !== 'string'
+        ? svgInfo.wordmark?.dark || ''
+        : svgInfo.wordmark || ''}
+      alt={svgInfo.title}
+      title={svgInfo.title}
+      loading="lazy"
+    />
+    <img
+      class={cn('block dark:hidden', globalImageStyles)}
+      src={typeof svgInfo.wordmark !== 'string'
+        ? svgInfo.wordmark?.light || ''
+        : svgInfo.wordmark || ''}
+      alt={svgInfo.title}
+      title={svgInfo.title}
+      loading="lazy"
+    />
+  {:else}
+    <img
+      class={cn('hidden dark:block', globalImageStyles)}
+      src={typeof svgInfo.route !== 'string' ? svgInfo.route.dark : svgInfo.route}
+      alt={svgInfo.title}
+      title={svgInfo.title}
+      loading="lazy"
+    />
+    <img
+      class={cn('block dark:hidden', globalImageStyles)}
+      src={typeof svgInfo.route !== 'string' ? svgInfo.route.light : svgInfo.route}
+      alt={svgInfo.title}
+      title={svgInfo.title}
+      loading="lazy"
+    />
+  {/if}
+  <!-- Title -->
+  <div class="mb-3 flex flex-col space-y-1 items-center justify-center">
+    <p class="truncate text-[15px] font-medium text-balance text-center select-all">
+      {svgInfo.title}
+    </p>
+    <div class="flex items-center space-x-1 justify-center">
+      {#if Array.isArray(svgInfo.category)}
+        {#each svgInfo.category.sort() as c, index}
+          <a href={`/directory/${c.toLowerCase()}`} class={badgeStyles}>{c} </a>
+        {/each}
       {:else}
-        <CopySvg {iconSize} {iconStroke} {svgInfo} isInFigma={false} isWordmarkSvg={false} />
-      {/if}
-
-      <DownloadSvg
-        {svgInfo}
-        isDarkTheme={() => {
-          const dark = document.documentElement.classList.contains('dark');
-          return dark;
-        }}
-      />
-
-      <a
-        href={svgInfo.url}
-        title="Website"
-        target="_blank"
-        rel="noopener noreferrer"
-        class="flex items-center space-x-2 rounded-md p-2 duration-100 hover:bg-neutral-200 dark:hover:bg-neutral-700/40"
-      >
-        <LinkIcon size={iconSize} strokeWidth={iconStroke} />
-      </a>
-      {#if svgInfo.wordmark !== undefined}
-        <button
-          title={wordmarkSvg ? 'Show logo SVG' : 'Show wordmark SVG'}
-          on:click={() => {
-            wordmarkSvg = !wordmarkSvg;
-          }}
-          class="flex items-center space-x-2 rounded-md p-2 duration-100 hover:bg-neutral-200 dark:hover:bg-neutral-700/40"
-        >
-          {#if wordmarkSvg}
-            <Sparkles size={iconSize} strokeWidth={iconStroke} />
-          {:else}
-            <Baseline size={iconSize} strokeWidth={iconStroke} />
-          {/if}
-        </button>
+        <a href={`/directory/${svgInfo.category.toLowerCase()}`} class={badgeStyles}>
+          {svgInfo.category}
+        </a>
       {/if}
     </div>
   </div>
-</CardSpotlight>
+  <!-- Actions -->
+  <div class="flex items-center space-x-1">
+    {#if isInFigma}
+      <button
+        title="Insert to figma"
+        on:click={() => {
+          const svgHasTheme = typeof svgInfo.route !== 'string';
+
+          if (!svgHasTheme) {
+            insertSVG(
+              typeof svgInfo.route === 'string'
+                ? svgInfo.route
+                : "Something went wrong. Couldn't copy the SVG."
+            );
+            return;
+          }
+
+          const dark = document.documentElement.classList.contains('dark');
+
+          insertSVG(
+            typeof svgInfo.route !== 'string'
+              ? dark
+                ? svgInfo.route.dark
+                : svgInfo.route.light
+              : svgInfo.route
+          );
+        }}
+        class="flex items-center space-x-2 rounded-md p-2 duration-100 hover:bg-neutral-200 dark:hover:bg-neutral-700/40"
+      >
+        <ChevronsRight size={iconSize} strokeWidth={iconStroke} />
+      </button>
+    {/if}
+
+    {#if wordmarkSvg}
+      <CopySvg {iconSize} {iconStroke} {svgInfo} isInFigma={false} isWordmarkSvg={true} />
+    {:else}
+      <CopySvg {iconSize} {iconStroke} {svgInfo} isInFigma={false} isWordmarkSvg={false} />
+    {/if}
+
+    <DownloadSvg
+      {svgInfo}
+      isDarkTheme={() => {
+        const dark = document.documentElement.classList.contains('dark');
+        return dark;
+      }}
+    />
+
+    <a
+      href={svgInfo.url}
+      title="Website"
+      target="_blank"
+      rel="noopener noreferrer"
+      class="flex items-center space-x-2 rounded-md p-2 duration-100 hover:bg-neutral-200 dark:hover:bg-neutral-700/40"
+    >
+      <LinkIcon size={iconSize} strokeWidth={iconStroke} />
+    </a>
+    {#if svgInfo.wordmark !== undefined}
+      <button
+        title={wordmarkSvg ? 'Show logo SVG' : 'Show wordmark SVG'}
+        on:click={() => {
+          wordmarkSvg = !wordmarkSvg;
+        }}
+        class="flex items-center space-x-2 rounded-md p-2 duration-100 hover:bg-neutral-200 dark:hover:bg-neutral-700/40"
+      >
+        {#if wordmarkSvg}
+          <Sparkles size={iconSize} strokeWidth={iconStroke} />
+        {:else}
+          <Baseline size={iconSize} strokeWidth={iconStroke} />
+        {/if}
+      </button>
+    {/if}
+  </div>
+</div>