t1c.dev
forked from
rocksky.app/rocksky
A decentralized music tracking and discovery platform built on AT Protocol 🎵
Replace Link with anchor and tweak UI styles
Remove @tanstack/react-router Link; use <a> with href derived from
row.uri (strip "app.rocksky." host). Uppercase table headers,
adjust opacity to 85%, and format listeners with thousand separators.
tsiry-sandratraina.com
+12
-20
apps/web/src/pages/charts/weekly/Weekly.tsx
+12
-20
apps/web/src/pages/charts/weekly/Weekly.tsx
···
1
1
import { TableBuilder, TableBuilderColumn } from "baseui/table-semantic";
2
2
import { useTopArtistsQuery } from "../../../hooks/useLibrary";
3
-
import { Link } from "@tanstack/react-router";
4
3
import Artist from "../../../components/Icons/Artist";
5
4
import { getLastDays } from "../../../lib/date";
6
5
import dayjs from "dayjs";
···
53
52
style: {
54
53
backgroundColor: "var(--color-background) !important",
55
54
color: "var(--color-text) !important",
56
-
opacity: "90%",
55
+
opacity: "85%",
57
56
},
58
57
},
59
58
TableBodyRow: {
···
76
75
},
77
76
}}
78
77
>
79
-
<TableBuilderColumn header="Artist">
78
+
<TableBuilderColumn header="ARTIST">
80
79
{(row: ArtistRow) => (
81
80
<div className="flex flex-row items-center">
82
81
<div>
···
84
83
{row.index + 1}
85
84
</div>
86
85
</div>
87
-
<Link
88
-
to="/$did/artist/$rkey"
89
-
params={{
90
-
did: row.uri?.split("at://")[1]?.split("/")[0] || "",
91
-
rkey: row.uri?.split("/").pop() || "",
92
-
}}
86
+
<a
87
+
href={`/${row.uri?.split("at://")[1]?.replace("app.rocksky.", "")}`}
88
+
className="no-underline !text-[var(--color-text)]"
93
89
>
94
90
{!!row.picture && (
95
91
<img
···
106
102
</div>
107
103
</div>
108
104
)}
109
-
</Link>
105
+
</a>
110
106
<div>
111
-
<Link
112
-
to="/$did/artist/$rkey"
113
-
params={{
114
-
did: row.uri?.split("at://")[1]?.split("/")[0] || "",
115
-
rkey: row.uri?.split("/").pop() || "",
116
-
}}
107
+
<a
108
+
href={`/${row.uri?.split("at://")[1]?.replace("app.rocksky.", "")}`}
117
109
className="no-underline !text-[var(--color-text)]"
118
110
>
119
111
{row.name}
120
-
</Link>
112
+
</a>
121
113
</div>
122
114
</div>
123
115
)}
124
116
</TableBuilderColumn>
125
-
<TableBuilderColumn header="Listeners">
117
+
<TableBuilderColumn header="LISTENERS">
126
118
{(row: ArtistRow) => (
127
119
<div className="flex flex-row items-center">
128
-
{numeral(row.uniqueListeners).format("0.0")}
120
+
{numeral(row.uniqueListeners).format("0,0")}
129
121
</div>
130
122
)}
131
123
</TableBuilderColumn>
132
-
<TableBuilderColumn header="Scrobbles">
124
+
<TableBuilderColumn header="SCROBBLES">
133
125
{(row: ArtistRow) => (
134
126
<div className="flex flex-row items-center">
135
127
{numeral(row.scrobbles).format("0,0")}