40 lines
1.2 KiB
TypeScript
40 lines
1.2 KiB
TypeScript
import { deleteSong, listSongs } from "./actions";
|
|
import DeleteSongButton from "./delete-song-button";
|
|
import SearchForm from "./search-form";
|
|
|
|
export default async function Page() {
|
|
const songs = await listSongs();
|
|
return (
|
|
<section className="bg-gray-100">
|
|
<div className="container mx-auto px-4 py-8">
|
|
<div className="grid grid-cols-2 gap-8">
|
|
<div>
|
|
<h2 className="text-xl font-bold mb-4">已收藏</h2>
|
|
<ul className="bg-white rounded shadow-md p-4">
|
|
{songs.map((song, i) => (
|
|
<li
|
|
className="flex justify-between items-center py-2 border-b"
|
|
key={i}
|
|
>
|
|
<span>
|
|
{song.name} - {song.artist}
|
|
</span>
|
|
<DeleteSongButton
|
|
className="text-red-500 hover:text-red-700"
|
|
id={song.id}
|
|
/>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
|
|
<div>
|
|
<h2 className="text-xl font-bold mb-4">搜索</h2>
|
|
<SearchForm className="mb-4" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|