Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: use TabsBar style at TimeSelector #406

Merged
merged 1 commit into from
Aug 2, 2023
Merged

fix: use TabsBar style at TimeSelector #406

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
36 changes: 24 additions & 12 deletions components/TabsBar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
Expand Down
50 changes: 17 additions & 33 deletions routes/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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[];
Expand Down Expand Up @@ -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>
);
}
Expand Down