Add new icon components for Collections (#313)

sneakycrow · Sep 17, 2024 · 965199b · 965199b
1 parent 5b5c17a
commit 965199b
Show file tree

Hide file tree

Showing 6 changed files with 78 additions and 13 deletions.
diff --git a/src/lib/components/Collections.svelte b/src/lib/components/Collections.svelte
@@ -1,12 +1,15 @@
 <script lang="ts">
-  import Icon from "@iconify/svelte";
+  import type { ComponentType } from "svelte";
+  import Writing from "./icons/Writing.svelte";
+  import Album from "./icons/Album.svelte";
+  import Palette from "./icons/Palette.svelte";
+  import GameController from "./icons/GameController.svelte";
   type Link = {
     copy: string;
     url: string;
     description: string;
     class: string;
     iconColor: string;
-    icon: string;
     comingSoon?: boolean;
   };
   const links: Link[] = [
@@ -15,32 +18,28 @@
       url: "/blog",
       description: "brain juice, mostly",
       class: "lg:hover:text-yellow-500",
-      iconColor: "text-yellow-500 opacity-75",
-      icon: "tabler:writing"
+      iconColor: "text-yellow-500 opacity-75"
     },
     {
       copy: "listening",
       url: "/music",
       description: "totally radical tunes",
       class: "lg:hover:text-green-500",
-      iconColor: "text-green-500 opacity-75",
-      icon: "material-symbols:album"
+      iconColor: "text-green-500 opacity-75"
     },
     {
       copy: "creating",
       url: "/art",
       description: "I like to make pretty things sometimes",
       class: "lg:hover:text-red-500",
-      iconColor: "text-red-500 opacity-75",
-      icon: "tabler:palette"
+      iconColor: "text-red-500 opacity-75"
     },
     {
       copy: "playing",
       url: "/games",
       description: "where my dreams become virtual reality",
       class: "lg:hover:text-blue-500",
       iconColor: "text-blue-500 opacity-75",
-      icon: "f7:gamecontroller-fill",
       comingSoon: true
     }
   ];
@@ -50,6 +49,22 @@
   // Make the icons smaller on mobile
   const LG_BREAKPOINT = 1024;
   $: iconSize = outerWidth < LG_BREAKPOINT ? ICON_MIN_SIZE : ICON_MAX_SIZE;
+
+  // A function for getting the appropriate icon based on the copy
+  const getIcon = (copy: string): ComponentType => {
+    switch (copy.toLowerCase()) {
+      case "writing":
+        return Writing;
+      case "listening":
+        return Album;
+      case "creating":
+        return Palette;
+      case "playing":
+        return GameController;
+      default:
+        throw new Error(`No icon found for copy: ${copy}`);
+    }
+  };
 </script>
 
 <svelte:window bind:outerWidth />
@@ -59,18 +74,29 @@
       <a
         href={link.comingSoon ? "#" : link.url}
         class={`${
-          link.comingSoon ? "text-gray-500 dark:text-gray-300" : "text-black dark:text-white"
+          link.comingSoon ? "text-black/50 dark:text-white/25" : "text-black dark:text-white"
         } text-2xl lg:text-5xl font-bold uppercase flex flex-nowrap space-x-2 leading-none items-center justify-center ${
           link.class
         }`}
       >
-        <Icon icon={link.icon} height={iconSize} width={iconSize} class={link.iconColor} />
+        <svelte:component
+          this={getIcon(link.copy)}
+          height={iconSize}
+          width={iconSize}
+          class={link.iconColor}
+        />
         <span>{link.copy}</span>
       </a>
       <div class="flex flex-col mb-4">
-        <p class="text-lg text-black dark:text-white">{link.description}</p>
+        <p
+          class={`text-lg italic ${
+            link.comingSoon ? "text-black/50 dark:text-white/50" : "text-black dark:text-white/80"
+          }`}
+        >
+          {link.description}
+        </p>
         {#if link.comingSoon}
-          <p class="text-lg uppercase text-gray-500 font-semibold my-4">Coming Soon</p>
+          <p class="text-lg uppercase text-white/25 font-semibold my-4">Coming Soon</p>
         {/if}
       </div>
     </div>

diff --git a/src/lib/components/icons/Album.svelte b/src/lib/components/icons/Album.svelte
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" {...$$props}>
+  <path
+    fill="currentColor"
+    d="M12 16.5q1.875 0 3.188-1.312T16.5 12t-1.312-3.187T12 7.5T8.813 8.813T7.5 12t1.313 3.188T12 16.5m0-3.5q-.425 0-.712-.288T11 12t.288-.712T12 11t.713.288T13 12t-.288.713T12 13m0 9q-2.075 0-3.9-.788t-3.175-2.137T2.788 15.9T2 12t.788-3.9t2.137-3.175T8.1 2.788T12 2t3.9.788t3.175 2.137T21.213 8.1T22 12t-.788 3.9t-2.137 3.175t-3.175 2.138T12 22"
+  />
+</svg>
diff --git a/src/lib/components/icons/GameController.svelte b/src/lib/components/icons/GameController.svelte
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 56 56" {...$$props}>
+  <path
+    fill="currentColor"
+    d="M7.39 46.806c2.658 0 4.481-.97 6.11-2.987l3.511-4.248c.505-.601 1.087-.892 1.669-.892h18.64c.582 0 1.164.29 1.65.892l3.51 4.248c1.649 2.017 3.453 2.987 6.13 2.987c4.422 0 7.39-2.948 7.39-7.487c0-1.94-.466-4.17-1.203-6.673c-1.183-3.976-3.258-9.388-5.256-13.578c-1.649-3.492-2.503-5.082-6.615-6.013c-3.666-.834-8.729-1.397-14.936-1.397s-11.27.563-14.916 1.397c-4.113.93-4.966 2.521-6.634 6.013c-1.979 4.19-4.054 9.602-5.237 13.578C.446 35.148 0 37.38 0 39.32c0 4.539 2.948 7.487 7.39 7.487m4.908-21.473c0-.97.582-1.57 1.61-1.57h3.472v-3.395c0-.99.582-1.59 1.552-1.59c.95 0 1.513.6 1.513 1.59v3.394h3.297c1.086 0 1.727.601 1.727 1.571c0 1.009-.64 1.63-1.727 1.63h-3.297v3.394c0 .99-.563 1.61-1.513 1.61c-.97 0-1.552-.62-1.552-1.61v-3.394h-3.472c-1.028 0-1.61-.621-1.61-1.63m24.77-3.026c0-1.59 1.242-2.812 2.793-2.812c1.572 0 2.794 1.222 2.794 2.812c0 1.572-1.222 2.774-2.794 2.774c-1.551 0-2.793-1.203-2.793-2.774m-5.703 5.742c0-1.59 1.223-2.813 2.794-2.813s2.773 1.222 2.773 2.813c0 1.571-1.202 2.793-2.773 2.793a2.76 2.76 0 0 1-2.794-2.793"
+  />
+</svg>
diff --git a/src/lib/components/icons/Palette.svelte b/src/lib/components/icons/Palette.svelte
@@ -0,0 +1,16 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" {...$$props}>
+  <g
+    fill="none"
+    stroke="currentColor"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    stroke-width="2"
+  >
+    <path
+      d="M12 21a9 9 0 0 1 0-18c4.97 0 9 3.582 9 8c0 1.06-.474 2.078-1.318 2.828S17.693 15 16.5 15H14a2 2 0 0 0-1 3.75A1.3 1.3 0 0 1 12 21"
+    />
+    <path
+      d="M7.5 10.5a1 1 0 1 0 2 0a1 1 0 1 0-2 0m4-3a1 1 0 1 0 2 0a1 1 0 1 0-2 0m4 3a1 1 0 1 0 2 0a1 1 0 1 0-2 0"
+    />
+  </g>
+</svg>
diff --git a/src/lib/components/icons/Writing.svelte b/src/lib/components/icons/Writing.svelte
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" {...$$props}>
+  <path
+    fill="none"
+    stroke="currentColor"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    stroke-width="2"
+    d="M20 17V5c0-1.121-.879-2-2-2s-2 .879-2 2v12l2 2zM16 7h4m-2 12H5a2 2 0 1 1 0-4h4a2 2 0 1 0 0-4H6"
+  />
+</svg>
diff --git a/src/lib/server/spotify.ts b/src/lib/server/spotify.ts
@@ -295,6 +295,7 @@ export const getRecentTracksWithAccount = async (account: Account): Promise<Trac
           refreshToken: newTokens.refreshToken
         }
       });
+      console.log("Successfully refreshed token and updated DB. Retrying request");
       // Retry the request with the new tokens
       return getRecentTracksWithAccount({
         ...account,