danmu-sim/app/danmu/page.tsx

import { getToken } from "@/lib/actions/token";
import Controls from "./controls";
import Danmu from "./danmu";
import { listLives } from "@/lib/actions/live";
import { listSongs } from "../songs/actions";

export default async function Page() {
  const token = await getToken();
  const lives = await listLives();
  const songs = await listSongs();
  return (
    <div className="flex flex-col md:flex-row">
      <section className="basis-1/3 card">
        <div className="h-[50vh] md:h-[80vh] overflow-auto card bg-base-100 card-bordered  m-8">
          <div className="card-body">
            <div className="card-title">直播间列表</div>
            <ul>
              {lives.map((live, i) => (
                <li key={i}>
                  <label>
                    {live.name} - {live.room_id}
                    <input
                      className="raido radio-primary"
                      type="radio"
                      name="live"
                    />
                  </label>
                </li>
              ))}
            </ul>
          </div>
        </div>
      </section>
      <section className="basis-1/3 card">
        <div className="h-[50vh] md:h-[80vh] overflow-auto card bg-base-100 card-bordered  m-8">
          <div className="card-body">
            <div className="card-title">收藏的歌曲</div>
            <ul>
              {songs.map((song, i) => (
                <li key={i}>
                  <label>
                    {song.name} - {song.artist}
                    <input
                      className="raido radio-primary"
                      type="radio"
                      name="song"
                    />
                  </label>
                </li>
              ))}
            </ul>
          </div>
        </div>
      </section>
      <section className="basis-1/3 card">
        <div className="card-body">
          <div className="mockup-browser border">
            <div className="mockup-browser-toolbar">
              <div className="input">红豆</div>
            </div>
            <div className="divide-y divide-gray-300">
              <Controls />
              <Danmu token={token} />
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}