danmu-sim/app/danmu/page.tsx
2024-04-07 03:23:34 +08:00

71 lines
2.2 KiB
TypeScript

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