From 7c8763cc7645cafb4548ef8e339183964b66635d Mon Sep 17 00:00:00 2001
From: hashrock <hashrock@users.noreply.github.com>
Date: Wed, 2 Aug 2023 09:47:31 +0900
Subject: [PATCH] fix: use TabsBar style at TimeSelector (#406)

I like TabsBar style that we're using on the dashboard, so I replaced
with it.
It looks different from Header Nav, and I think the selection state is
easy to see. wdyt?

Before:
<img width="826" alt="image"
src="https://github.com/denoland/saaskit/assets/3132889/3dfa093a-5a3c-4b0d-b37f-71487eb77737">

After:
<img width="834" alt="image"
src="https://github.com/denoland/saaskit/assets/3132889/e8c92cd1-cbe6-4a24-b3c5-6a26af58862c">

<img width="827" alt="image"
src="https://github.com/denoland/saaskit/assets/3132889/b4f38ca4-2148-4be8-9d50-149aae490cbe">
---
 components/TabsBar.tsx | 36 ++++++++++++++++++++----------
 routes/index.tsx       | 50 ++++++++++++++----------------------------
 2 files changed, 41 insertions(+), 45 deletions(-)

diff --git a/components/TabsBar.tsx b/components/TabsBar.tsx
index f273592d639d..d2c1dcaa83cd 100644
--- a/components/TabsBar.tsx
+++ b/components/TabsBar.tsx
@@ -2,24 +2,36 @@
 import { LINK_STYLES } from "@/utils/constants.ts";
 import { cx } from "@twind/core";
 
+export function TabItem(
+  props: { path: string; innerText: string; active: boolean },
+) {
+  return (
+    <a
+      href={props.path}
+      class={cx(
+        "px-4 py-2 rounded-lg",
+        props.active
+          ? "bg-gray-100 text-black dark:(bg-gray-800 text-white)"
+          : "",
+        LINK_STYLES,
+      )}
+    >
+      {props.innerText}
+    </a>
+  );
+}
+
 export default function TabsBar(
   props: { links: { path: string; innerText: string }[]; currentPath: string },
 ) {
   return (
     <div class="flex flex-row w-full mb-8">
       {props.links.map((link) => (
-        <a
-          href={link.path}
-          class={cx(
-            "px-4 py-2 rounded-lg",
-            link.path === props.currentPath
-              ? "bg-gray-100 text-black dark:(bg-gray-800 text-white)"
-              : "",
-            LINK_STYLES,
-          )}
-        >
-          {link.innerText}
-        </a>
+        <TabItem
+          path={link.path}
+          innerText={link.innerText}
+          active={link.path === props.currentPath}
+        />
       ))}
     </div>
   );
diff --git a/routes/index.tsx b/routes/index.tsx
index c71d0f4d0419..e948434d92e9 100644
--- a/routes/index.tsx
+++ b/routes/index.tsx
@@ -14,9 +14,8 @@ import {
   type User,
 } from "@/utils/db.ts";
 import { DAY, WEEK } from "std/datetime/constants.ts";
-import { getToggledStyles } from "@/utils/display.ts";
-import { ACTIVE_LINK_STYLES, LINK_STYLES } from "@/utils/constants.ts";
 import Head from "@/components/Head.tsx";
+import { TabItem } from "@/components/TabsBar.tsx";
 
 interface HomePageData extends State {
   itemsUsers: User[];
@@ -62,38 +61,23 @@ export const handler: Handlers<HomePageData, State> = {
 function TimeSelector(props: { url: URL }) {
   const timeAgo = props.url.searchParams.get("time-ago");
   return (
-    <div class="flex justify-center my-4 gap-8">
+    <div class="flex justify-center my-4 gap-2">
       {/* These links do not preserve current URL queries. E.g. if ?page=2, that'll be removed once one of these links is clicked */}
-      <a
-        class={getToggledStyles(
-          LINK_STYLES,
-          ACTIVE_LINK_STYLES,
-          timeAgo === null || timeAgo === "week",
-        )}
-        href="/?time-ago=week"
-      >
-        Last Week
-      </a>
-      <a
-        class={getToggledStyles(
-          LINK_STYLES,
-          ACTIVE_LINK_STYLES,
-          timeAgo === "month",
-        )}
-        href="/?time-ago=month"
-      >
-        Last Month
-      </a>
-      <a
-        class={getToggledStyles(
-          LINK_STYLES,
-          ACTIVE_LINK_STYLES,
-          timeAgo === "all",
-        )}
-        href="/?time-ago=all"
-      >
-        All time
-      </a>
+      <TabItem
+        path="/?time-ago=week"
+        innerText="Last Week"
+        active={timeAgo === null || timeAgo === "week"}
+      />
+      <TabItem
+        path="/?time-ago=month"
+        innerText="Last Month"
+        active={timeAgo === "month"}
+      />
+      <TabItem
+        path="/?time-ago=all"
+        innerText="All time"
+        active={timeAgo === "all"}
+      />
     </div>
   );
 }