feat: 直播列表

app/about/page.tsx

@@ -0,0 +1,61 @@
+import aboutSvg from '@/app/about/about.svg';
+import Image from 'next/image';
+
+export default function Page() {
+  return (
+    <section className="text-gray-600 body-font">
+      <div className="container px-5 py-24 mx-auto flex flex-col">
+        <div className="lg:w-4/6 mx-auto">
+          <div className="rounded-lg h-64 overflow-hidden">
+            <Image
+              alt="content"
+              width={1200}
+              height={500}
+              className="object-cover object-center h-full w-full"
+              src={aboutSvg}
+            />
+          </div>
+          <div className="flex flex-col sm:flex-row mt-10">
+            <div className="sm:w-1/3 text-center sm:pr-8 sm:py-8">
+              <div className="w-20 h-20 rounded-full inline-flex items-center justify-center bg-gray-200 text-gray-400">
+                <img
+                  alt="custom"
+                  src="https://secure.gravatar.com/avatar/a3def24f9e6b3df5e7d7008107ddf3a0?d=identicon&s=512"
+                />
+              </div>
+              <div className="flex flex-col items-center text-center justify-center">
+                <h2 className="font-medium title-font mt-4 text-gray-900 text-lg">
+                  个人信息
+                </h2>
+                <div className="w-12 h-1 bg-indigo-500 rounded mt-2 mb-4"></div>
+                <p className="text-base">在 daoyoucloud.com 你可以联系到我</p>
+              </div>
+            </div>
+            <div className="sm:w-2/3 sm:pl-8 sm:py-8 sm:border-l border-gray-200 sm:border-t-0 border-t mt-4 pt-4 sm:mt-0 text-center sm:text-left">
+              <p className="leading-relaxed text-lg mb-4">
+                只需在搜索框中输入你感兴趣的歌曲名称或歌手，即可找到相关的歌词。然后，选择你喜欢的歌词段落，将其发送为弹幕，即可在视频播放时实现动态同步。这种互动方式不仅有助于分享感受，还能让观众更深入地了解你所喜爱的音乐。
+              </p>
+              <p className="leading-relaxed text-lg mb-4">
+                只需在搜索框中输入你感兴趣的歌曲名称或歌手，即可找到相关的歌词。然后，选择你喜欢的歌词段落，将其发送为弹幕，即可在视频播放时实现动态同步。这种互动方式不仅有助于分享感受，还能让观众更深入地了解你所喜爱的音乐。
+              </p>
+              <a href="#" className="text-indigo-500 inline-flex items-center">
+                联系我
+                <svg
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  className="w-4 h-4 ml-2"
+                  viewBox="0 0 24 24"
+                >
+                  <path d="M5 12h14M12 5l7 7-7 7"></path>
+                </svg>
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}

app/layout.tsx

@@ -1,9 +1,10 @@
 import type { Metadata } from "next";
 import { Inter } from "next/font/google";
 import "./globals.css";
-import SignoutButton from "./components/signout-button";
+import SignoutButton from "@/components/signout-button";
-import Logo from "./components/logo";
+import Logo from "@/components/logo";
-import BackButton from "./components/back-button";
+import BackButton from "@/components/back-button";
+import Link from "next/link";
 
 const inter = Inter({ subsets: ["latin"] });
 
@@ -30,18 +31,21 @@ export default function RootLayout({
               <span className="ml-3 text-xl">音乐弹幕</span>
             </a>
             <nav className="md:ml-auto md:mr-auto flex flex-wrap items-center text-base justify-center">
-              <a href="#" className="mr-5 hover:text-gray-900">
+              <Link href="/" className="mr-5 hover:text-gray-900">
+                首页
+              </Link>
+              <Link href="/songs" className="mr-5 hover:text-gray-900">
                 歌词曲库
-              </a>
+              </Link>
-              <a href="#" className="mr-5 hover:text-gray-900">
+              <Link href="/live" className="mr-5 hover:text-gray-900">
                 直播间列表
-              </a>
+              </Link>
-              <a href="#" className="mr-5 hover:text-gray-900">
+              <Link href="/danmu" className="mr-5 hover:text-gray-900">
                 弹幕 AI
-              </a>
+              </Link>
-              <a href="#" className="mr-5 hover:text-gray-900">
+              <Link href="/about" className="mr-5 hover:text-gray-900">
                 关于
-              </a>
+              </Link>
             </nav>
             <div className="join">
               <BackButton className="btn join-item" />
@@ -49,7 +53,7 @@ export default function RootLayout({
             </div>
           </div>
         </header>
-        <main>{children}</main>
+        <main className="min-h-[40vh]">{children}</main>
         <footer className="text-gray-600 body-font">
           <div className="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-nowrap flex-wrap flex-col">
             <div className="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left">

app/live/page.tsx

@@ -0,0 +1,3 @@
+export default function Page() {
+  return <section>直播间列表</section>;
+}

app/songs/page.tsx

@@ -0,0 +1,53 @@
+export default function Page() {
+  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">My Collection</h2>
+            <ul className="bg-white rounded shadow-md p-4">
+              <li className="flex justify-between items-center py-2 border-b">
+                <span>Song 1</span>
+                <button className="text-red-500 hover:text-red-700">
+                  Remove
+                </button>
+              </li>
+              <li className="flex justify-between items-center py-2 border-b">
+                <span>Song 2</span>
+                <button className="text-red-500 hover:text-red-700">
+                  Remove
+                </button>
+              </li>
+            </ul>
+          </div>
+
+          <div>
+            <h2 className="text-xl font-bold mb-4">Search Songs</h2>
+            <div className="mb-4">
+              <input
+                type="text"
+                placeholder="Search songs..."
+                className="w-full border rounded-md px-4 py-2"
+              />
+            </div>
+
+            <div className="bg-white rounded shadow-md p-4">
+              <div className="flex justify-between items-center py-2 border-b">
+                <span>Song 3</span>
+                <button className="text-green-500 hover:text-green-700">
+                  Add
+                </button>
+              </div>
+              <div className="flex justify-between items-center py-2 border-b">
+                <span>Song 4</span>
+                <button className="text-green-500 hover:text-green-700">
+                  Add
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}