danmu-sim/app/songs/page.tsx

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>
  );
}