53 lines
1.5 KiB
TypeScript
53 lines
1.5 KiB
TypeScript
import { useLocation, useNavigate } from "react-router";
|
|
import { Trans } from "@lingui/react/macro";
|
|
import { useAuth } from "../hooks/useAuth.ts";
|
|
import { type FeedTab, VALID_TABS } from "../config/feedTabs.ts";
|
|
|
|
export function FeedTabBar() {
|
|
const location = useLocation();
|
|
const navigate = useNavigate();
|
|
const { user } = useAuth();
|
|
|
|
const rawTab = new URLSearchParams(location.search).get("tab") ?? "hot";
|
|
const tab: FeedTab = VALID_TABS.has(rawTab) ? (rawTab as FeedTab) : "hot";
|
|
|
|
function setTab(t: FeedTab) {
|
|
navigate(`/?tab=${t}`, { replace: true });
|
|
}
|
|
|
|
return (
|
|
<div className="feed-sort">
|
|
<button
|
|
type="button"
|
|
className={`feed-sort-btn${tab === "hot" ? " active" : ""}`}
|
|
onClick={() => setTab("hot")}
|
|
>
|
|
<Trans>Hot</Trans>
|
|
</button>
|
|
<button
|
|
type="button"
|
|
className={`feed-sort-btn${tab === "new" ? " active" : ""}`}
|
|
onClick={() => setTab("new")}
|
|
>
|
|
<Trans>New</Trans>
|
|
</button>
|
|
<button
|
|
type="button"
|
|
className={`feed-sort-btn${tab === "journal" ? " active" : ""}`}
|
|
onClick={() => setTab("journal")}
|
|
>
|
|
<Trans>Journal</Trans>
|
|
</button>
|
|
{user && (
|
|
<button
|
|
type="button"
|
|
className={`feed-sort-btn${tab === "followed" ? " active" : ""}`}
|
|
onClick={() => setTab("followed")}
|
|
>
|
|
<Trans>Followed</Trans>
|
|
</button>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|