refactor: getToggledStyles()

denoland · Aug 30, 2023 · a9dd230 · a9dd230
1 parent c94e14d
commit a9dd230
Show file tree

Hide file tree

Showing 4 changed files with 5 additions and 45 deletions.
diff --git a/components/Footer.tsx b/components/Footer.tsx
@@ -9,7 +9,6 @@ import {
 import IconBrandDiscord from "tabler_icons_tsx/brand-discord.tsx";
 import IconBrandGithub from "tabler_icons_tsx/brand-github.tsx";
 import IconRss from "tabler_icons_tsx/rss.tsx";
-import { getToggledStyles } from "@/utils/display.ts";
 
 export default function Footer(props: { url: URL }) {
   return (
@@ -20,11 +19,9 @@ export default function Footer(props: { url: URL }) {
       <nav class={NAV_STYLES}>
         <a
           href="/blog"
-          class={getToggledStyles(
-            LINK_STYLES,
-            ACTIVE_LINK_STYLES,
-            props.url.pathname === "/blog",
-          )}
+          class={props.url.pathname === "/blog"
+            ? ACTIVE_LINK_STYLES
+            : LINK_STYLES}
         >
           Blog
         </a>

diff --git a/utils/constants.ts b/utils/constants.ts
@@ -16,6 +16,6 @@ export const NAV_STYLES =
   "flex flex-wrap justify-start gap-x-8 gap-y-4 items-center justify-between h-full";
 export const LINK_STYLES =
   "text-gray-500 transition duration-300 hover:(text-black dark:text-white)";
-export const ACTIVE_LINK_STYLES = "!text-black !dark:text-white";
+export const ACTIVE_LINK_STYLES = LINK_STYLES + " !text-black !dark:text-white";
 export const HEADING_STYLES = "text-3xl font-bold";
 export const HEADING_WITH_MARGIN_STYLES = HEADING_STYLES + " mb-8";
diff --git a/utils/display.ts b/utils/display.ts
@@ -12,28 +12,3 @@ export function timeAgo(time: number | Date) {
   else if (minutes < 24 * 60) return pluralize(~~(minutes / 60), "hour");
   else return pluralize(~~(minutes / (24 * 60)), "day");
 }
-
-/**
- * Dynamically generates styles depending on whether the given condition is truthy.
- * This is used to visually highlight a link if it matches the current page.
- *
- * @example
- * ```ts
- * import { getToggledStyles } from "@/utils/display.ts";
- *
- * // Returns "text-gray !text-black"
- * const activeLinkStyles = getToggledStyles("text-gray", "!text-black", true);
- *
- * // Returns "text-gray"
- * const inactiveLinkStyles = getToggledStyles("text-gray", "!text-black", false);
- * ```
- */
-export function getToggledStyles(
-  baseStyles: string,
-  toggledStyles: string,
-  cond: boolean,
-) {
-  let styles = baseStyles;
-  if (cond) styles += " " + toggledStyles;
-  return styles;
-}
diff --git a/utils/display_test.ts b/utils/display_test.ts
@@ -1,8 +1,7 @@
 // Copyright 2023 the Deno authors. All rights reserved. MIT license.
-import { getToggledStyles, pluralize, timeAgo } from "./display.ts";
+import { pluralize, timeAgo } from "./display.ts";
 import { DAY, HOUR, MINUTE, SECOND } from "std/datetime/constants.ts";
 import { assertEquals } from "std/testing/asserts.ts";
-import { ACTIVE_LINK_STYLES, LINK_STYLES } from "@/utils/constants.ts";
 
 Deno.test("[display] pluralize()", () => {
   assertEquals(pluralize(0, "item"), "0 items");
@@ -23,14 +22,3 @@ Deno.test("[display] timeAgo()", () => {
   assertEquals(timeAgo(Date.now() - DAY - HOUR * 12), "1 day");
   assertEquals(timeAgo(Date.now() - DAY * 5), "5 days");
 });
-
-Deno.test("[display] getToggledStyles()", () => {
-  assertEquals(
-    getToggledStyles(LINK_STYLES, ACTIVE_LINK_STYLES, false),
-    LINK_STYLES,
-  );
-  assertEquals(
-    getToggledStyles(LINK_STYLES, ACTIVE_LINK_STYLES, true),
-    LINK_STYLES + " " + ACTIVE_LINK_STYLES,
-  );
-});