t1c.dev
forked from
rocksky.app/rocksky
A decentralized music tracking and discovery platform built on AT Protocol 🎵
tsiry-sandratraina.com
1import { v4 } from "uuid";
2import Header from "../components/Header";
3import type { Profile } from "../types/profile";
4import type { Track } from "../types/track";
5import dayjs from "dayjs";
6
7export type TopTracksEmbedPageProps = {
8 profile: Profile;
9 tracks: Track[];
10};
11
12export function TopTracksEmbedPage(props: TopTracksEmbedPageProps) {
13 const end = dayjs();
14 const start = end.subtract(7, "day");
15 const range = `${start.format("DD MMM YYYY")} — ${end.format("DD MMM YYYY")}`;
16
17 return (
18 <div className="p-[15px]">
19 <Header profile={props.profile} />
20 <h2 className="m-[0px]">Top Tracks</h2>
21 <div className="text-[14px] mt-[3px] mb-[20px]">{range}</div>
22 <div className="w-full overflow-x-auto">
23 <table className="table-borderless table">
24 <tbody>
25 {props.tracks.map((track, index) => (
26 <tr key={v4()}>
27 <td className="pl-[0px] pr-[0px]">
28 <div className="flex flex-row items-center">
29 <div className="mr-[10px] min-w-[30px]">{index + 1}</div>
30 <a
31 href={`https://rocksky.app/${track.uri?.split("at://")[1]?.replace("app.rocksky.", "")}`}
32 target="_blank"
33 className="flex flex-row items-center no-underline text-inherit"
34 >
35 {track.albumArt && (
36 <img
37 className="max-w-[60px] max-h-[60px] mr-[20px] rounded-[5px]"
38 src={track.albumArt!}
39 />
40 )}
41 {!track.albumArt && (
42 <div className="w-[60px] h-[60px] bg-[var(--color-avatar-background)] flex items-center justify-center mr-[20px]">
43 <div className="h-[30px] w-[30px]"></div>
44 </div>
45 )}
46 <div>
47 <div>{track.title}</div>
48 <a
49 href={`https://rocksky.app/${track.artistUri?.split("at://")[1]?.replace("app.rocksky.", "")}`}
50 target="_blank"
51 className="no-underline text-inherit"
52 >
53 <div className="font-rockford-light opacity-60">
54 {track.albumArtist}
55 </div>
56 </a>
57 </div>
58 </a>
59 </div>
60 </td>
61 </tr>
62 ))}
63 </tbody>
64 </table>
65 </div>
66 </div>
67 );
68}