Listen to and share the music in the Atmosphere.
musicsky.up.railway.app/
nextjs
atproto
music
typescript
react
feat: improve the rendering of songs
+34
-20
+22
-11
src/app/(main)/[handle]/page.tsx
+22
-11
src/app/(main)/[handle]/page.tsx
···
13
13
<Suspense fallback={<Skeleton className="w-full h-24" />}>
14
14
<Info params={params} />
15
15
</Suspense>
16
-
<Suspense
17
-
fallback={
18
-
<>
19
-
{Array.from({ length: 5 }).map((_, index) => (
20
-
<Skeleton key={index} className="w-full h-24 rounded-full" />
21
-
))}
22
-
</>
23
-
}
24
-
>
25
-
<SongsList params={params} />
26
-
</Suspense>
16
+
<div className="flex flex-col gap-4">
17
+
<Suspense
18
+
fallback={
19
+
<>
20
+
{Array.from({ length: 5 }).map((_, index) => (
21
+
<div key={index} className="flex flex-row gap-4">
22
+
<div className="w-full flex flex-row gap-4">
23
+
<Skeleton className="size-24 rounded-md" />
24
+
<div className="flex flex-col gap-2">
25
+
<Skeleton className="w-48 h-6" />
26
+
<Skeleton className="w-32 h-4" />
27
+
<Skeleton className="w-24 h-4" />
28
+
</div>
29
+
</div>
30
+
</div>
31
+
))}
32
+
</>
33
+
}
34
+
>
35
+
<SongsList params={params} />
36
+
</Suspense>
37
+
</div>
27
38
</main>
28
39
);
29
40
}
+1
-7
src/app/(main)/[handle]/songs-list.tsx
+1
-7
src/app/(main)/[handle]/songs-list.tsx
···
82
82
notFound();
83
83
}
84
84
const songs = await getSongs(pds, did);
85
-
return (
86
-
<div className="flex flex-col gap-4">
87
-
{songs.map((song) => (
88
-
<Song key={song.title} {...song} />
89
-
))}
90
-
</div>
91
-
);
85
+
return songs.map((song) => <Song key={song.title} {...song} />);
92
86
}
+11
-2
src/components/song/song.tsx
+11
-2
src/components/song/song.tsx
···
33
33
<div className="flex flex-row gap-4">
34
34
<div className="w-full flex flex-row gap-4">
35
35
{coverArt && (
36
-
<Image src={coverArt} alt={title} width={100} height={100} />
36
+
<Image
37
+
className="rounded-md size-24"
38
+
src={coverArt}
39
+
alt={title}
40
+
width={100}
41
+
height={100}
42
+
/>
37
43
)}
38
44
<div className="flex flex-col">
39
45
<h2 className="text-xl font-semibold">{title}</h2>
40
46
{genre && <h3>{genre}</h3>}
41
47
{description && <p>{description}</p>}
42
-
<p>{duration}</p>
48
+
<p>
49
+
{Math.floor(duration / 60)}:
50
+
{String(duration % 60).padStart(2, "0")}
51
+
</p>
43
52
</div>
44
53
</div>
45
54
<DropdownMenu>