src/Overall.tsx at main · indexx.dev/slices-teal-relay

forked from chadtmiller.com/slices-teal-relay
Teal.fm frontend powered by slices.network tealfm-slices.wisp.place
tealfm slices
slices-teal-relay / src / Overall.tsx
at main 2.5 kB view raw
 1import { NavLink, Outlet, useLocation, useParams } from "react-router-dom";
 2import ProfileLayout from "./ProfileLayout";
 3
 4const periods = [
 5  { id: "daily", label: "24 hours" },
 6  { id: "weekly", label: "7 days" },
 7  { id: "monthly", label: "30 days" },
 8  { id: "all", label: "All time" },
 9];
10
11export default function Overall() {
12  const { handle, period = "all" } = useParams<
13    { handle: string; period?: string }
14  >();
15  const location = useLocation();
16
17  const activeTab = location.pathname.split("/")[4] || "artists";
18
19  return (
20    //@ts-expect-error: idk
21    <ProfileLayout handle={handle!}>
22      <div className="flex items-center justify-between mb-8">
23        <div className="flex items-center border-b border-zinc-800">
24          <NavLink
25            to={`/profile/${handle}/overall/artists/${period}`}
26            className={({ isActive }) =>
27              `px-4 py-2 text-xs uppercase tracking-wider ${
28                isActive
29                  ? "text-zinc-100 border-b-2 border-zinc-100"
30                  : "text-zinc-500 hover:text-zinc-300"
31              }`}
32          >
33            Artists
34          </NavLink>
35          <NavLink
36            to={`/profile/${handle}/overall/albums/${period}`}
37            className={({ isActive }) =>
38              `px-4 py-2 text-xs uppercase tracking-wider ${
39                isActive
40                  ? "text-zinc-100 border-b-2 border-zinc-100"
41                  : "text-zinc-500 hover:text-zinc-300"
42              }`}
43          >
44            Albums
45          </NavLink>
46          <NavLink
47            to={`/profile/${handle}/overall/tracks/${period}`}
48            className={({ isActive }) =>
49              `px-4 py-2 text-xs uppercase tracking-wider ${
50                isActive
51                  ? "text-zinc-100 border-b-2 border-zinc-100"
52                  : "text-zinc-500 hover:text-zinc-300"
53              }`}
54          >
55            Tracks
56          </NavLink>
57        </div>
58        <div className="flex items-center gap-2">
59          {periods.map((p) => (
60            <NavLink
61              key={p.id}
62              to={`/profile/${handle}/overall/${activeTab}/${p.id}`}
63              className={() =>
64                `px-3 py-1 text-xs rounded-md ${
65                  period === p.id
66                    ? "bg-zinc-800 text-zinc-100"
67                    : "text-zinc-500 hover:bg-zinc-800/50"
68                }`}
69            >
70              {p.label}
71            </NavLink>
72          ))}
73        </div>
74      </div>
75      <Outlet />
76    </ProfileLayout>
77  );
78}