use merge utility everywhere

LorisSigrist · Oct 24, 2023 · 06ece72 · 06ece72
1 parent 2a61d6d
commit 06ece72
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 20 deletions.
diff --git a/site/src/lib/ui/Code/CopyButton.svelte b/site/src/lib/ui/Code/CopyButton.svelte
@@ -1,21 +1,25 @@
 <script>
+  import { merge } from "$lib/utils/class-merge";
   import ClipboardIcon from "virtual:icons/heroicons/clipboard";
 
   export let copied = false;
 </script>
 
 <button
-  class="group/button text-sm absolute right-4 top-2.5 overflow-hidden rounded-full py-1 pl-2 pr-3 text-2xs font-medium opacity-0 backdrop-blur transition focus:opacity-100 group-hover:opacity-100
-{copied
-    ? 'bg-emerald-400/10 ring-1 ring-inset ring-emerald-400/20'
-    : 'bg-white/5 hover:bg-white/7.5 dark:bg-white/2.5 dark:hover:bg-white/5'}"
+  class={merge(
+    "group/button text-sm absolute right-4 top-2.5 overflow-hidden rounded-full py-1 pl-2 pr-3 text-2xs font-medium opacity-0 backdrop-blur transition focus:opacity-100 group-hover:opacity-100",
+    copied
+      ? "bg-emerald-400/10 ring-1 ring-inset ring-emerald-400/20"
+      : "bg-white/5 hover:bg-white/7.5 dark:bg-white/2.5 dark:hover:bg-white/5"
+  )}
   on:click
 >
   <span
     aria-hidden={copied}
-    class="pointer-events-none flex items-center gap-0.5 text-zinc-400 transition duration-300 {copied
-      ? '-translate-y-1.5 opacity-0'
-      : ''}"
+    class={merge(
+      "pointer-events-none flex items-center gap-0.5 text-zinc-400 transition duration-300",
+      copied && "translate-y-1.5 opacity-0"
+    )}
   >
     <ClipboardIcon
       className="h-5 w-5 fill-zinc-500/20 stroke-zinc-500 transition-colors group-hover/button:stroke-zinc-400"
@@ -25,9 +29,9 @@
 
   <span
     aria-hidden={!copied}
-    class="pointer-events-none absolute inset-0 flex items-center justify-center text-emerald-400 transition duration-300 {!copied
-      ? 'translate-y-1.5 opacity-0'
-      : ''}"
+    class={merge("pointer-events-none absolute inset-0 flex items-center justify-center text-emerald-400 transition duration-300",
+      !copied && "-translate-y-1.5 opacity-0"
+    )}
   >
     Copied!
   </span>

diff --git a/site/src/lib/ui/nav/Sidebar/SidebarLink.svelte b/site/src/lib/ui/nav/Sidebar/SidebarLink.svelte
@@ -1,4 +1,5 @@
 <script>
+  import { merge } from "$lib/utils/class-merge";
   import { cubicInOut } from "svelte/easing";
   import { crossfade } from "svelte/transition";
   export let active = false;
@@ -13,9 +14,10 @@
 </script>
 
 <a
-  class="{active
-    ? 'font-semibold'
-    : ''} text-gray-700 relative outline-orange-400 hover:bg-orange-50 py-2 rounded-md"
+  class={merge(
+    "text-gray-700 relative outline-orange-400 hover:bg-orange-50 py-2 rounded-md",
+    active && "font-semibold"
+  )}
   {href}
 >
   <slot />
@@ -24,8 +26,8 @@
     <!--Active Indicator-->
     <span
       class="absolute top-1/2 left-0 w-1.5 h-1.5 -translate-y-1/2 -translate-x-4 rounded-full bg-orange-500"
-      in:send={{ key: 'sidebar-link-active-indicator' }}
-      out:receive={{ key: 'sidebar-link-active-indicator' }}
+      in:send={{ key: "sidebar-link-active-indicator" }}
+      out:receive={{ key: "sidebar-link-active-indicator" }}
     />
   {/if}
 </a>
diff --git a/site/src/lib/utils/class-merge.js b/site/src/lib/utils/class-merge.js
@@ -1,8 +1,7 @@
 /**
  * Merges classes together & ignores any falsy values
- * @param  {(string | false | null)[]} classes 
- * @returns 
+ *
+ * @param  {(string | false | null)[]} classes
+ * @returns
  */
-export function merge(...classes) {
-    return classes.filter(Boolean).join(' ');
-}
+export const merge = (...classes) => classes.filter(Boolean).join(" ");