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
import { TableBuilder, TableBuilderColumn } from "baseui/table-semantic";
2
import { useTopArtistsQuery } from "../../../hooks/useLibrary";
3
-
import { Link } from "@tanstack/react-router";
4
import Artist from "../../../components/Icons/Artist";
5
import { getLastDays } from "../../../lib/date";
6
import dayjs from "dayjs";
···
53
style: {
54
backgroundColor: "var(--color-background) !important",
55
color: "var(--color-text) !important",
56
-
opacity: "90%",
57
},
58
},
59
TableBodyRow: {
···
76
},
77
}}
78
>
79
-
<TableBuilderColumn header="Artist">
80
{(row: ArtistRow) => (
81
<div className="flex flex-row items-center">
82
<div>
···
84
{row.index + 1}
85
</div>
86
</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
-
}}
93
>
94
{!!row.picture && (
95
<img
···
106
</div>
107
</div>
108
)}
109
-
</Link>
110
<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
-
}}
117
className="no-underline !text-[var(--color-text)]"
118
>
119
{row.name}
120
-
</Link>
121
</div>
122
</div>
123
)}
124
</TableBuilderColumn>
125
-
<TableBuilderColumn header="Listeners">
126
{(row: ArtistRow) => (
127
<div className="flex flex-row items-center">
128
-
{numeral(row.uniqueListeners).format("0.0")}
129
</div>
130
)}
131
</TableBuilderColumn>
132
-
<TableBuilderColumn header="Scrobbles">
133
{(row: ArtistRow) => (
134
<div className="flex flex-row items-center">
135
{numeral(row.scrobbles).format("0,0")}
···
1
import { TableBuilder, TableBuilderColumn } from "baseui/table-semantic";
2
import { useTopArtistsQuery } from "../../../hooks/useLibrary";
3
import Artist from "../../../components/Icons/Artist";
4
import { getLastDays } from "../../../lib/date";
5
import dayjs from "dayjs";
···
52
style: {
53
backgroundColor: "var(--color-background) !important",
54
color: "var(--color-text) !important",
55
+
opacity: "85%",
56
},
57
},
58
TableBodyRow: {
···
75
},
76
}}
77
>
78
+
<TableBuilderColumn header="ARTIST">
79
{(row: ArtistRow) => (
80
<div className="flex flex-row items-center">
81
<div>
···
83
{row.index + 1}
84
</div>
85
</div>
86
+
<a
87
+
href={`/${row.uri?.split("at://")[1]?.replace("app.rocksky.", "")}`}
88
+
className="no-underline !text-[var(--color-text)]"
89
>
90
{!!row.picture && (
91
<img
···
102
</div>
103
</div>
104
)}
105
+
</a>
106
<div>
107
+
<a
108
+
href={`/${row.uri?.split("at://")[1]?.replace("app.rocksky.", "")}`}
109
className="no-underline !text-[var(--color-text)]"
110
>
111
{row.name}
112
+
</a>
113
</div>
114
</div>
115
)}
116
</TableBuilderColumn>
117
+
<TableBuilderColumn header="LISTENERS">
118
{(row: ArtistRow) => (
119
<div className="flex flex-row items-center">
120
+
{numeral(row.uniqueListeners).format("0,0")}
121
</div>
122
)}
123
</TableBuilderColumn>
124
+
<TableBuilderColumn header="SCROBBLES">
125
{(row: ArtistRow) => (
126
<div className="flex flex-row items-center">
127
{numeral(row.scrobbles).format("0,0")}