From 29ed8025edceec9532349a26b1b4a3e2dab4cb2b Mon Sep 17 00:00:00 2001
From: sealday <sealday@gmail.com>
Date: Sat, 6 Apr 2024 15:57:26 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=92=A8=E8=AF=A2=E6=9F=A5=E8=AF=A2?=
 =?UTF-8?q?=E5=A4=9A=E4=B8=AA=E6=AD=8C=E6=89=8B=E7=9A=84=E6=AD=8C=E8=AF=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/songs/actions.tsx     | 17 +++++++++++++++++
 app/songs/page.tsx        | 27 +++++++++++----------------
 app/songs/search-form.tsx | 39 +++++++++++++++++++++++++++++++++++++++
 lib/actions/lyrics.ts     |  2 +-
 4 files changed, 68 insertions(+), 17 deletions(-)
 create mode 100644 app/songs/actions.tsx
 create mode 100644 app/songs/search-form.tsx

diff --git a/app/songs/actions.tsx b/app/songs/actions.tsx
new file mode 100644
index 0000000..d2f3f0e
--- /dev/null
+++ b/app/songs/actions.tsx
@@ -0,0 +1,17 @@
+import {
+  InternetProviderLyricSearchResponse,
+  getSearchResults,
+} from "@/lib/actions/lyrics";
+
+export async function searchSongs(
+  _currentState: InternetProviderLyricSearchResponse[],
+  formData: FormData
+): Promise<InternetProviderLyricSearchResponse[]> {
+  const list = await getSearchResults({
+    name: formData.get("name") as string,
+  });
+  if (list) {
+    return list;
+  }
+  return [];
+}
diff --git a/app/songs/page.tsx b/app/songs/page.tsx
index 24b99a8..839defe 100644
--- a/app/songs/page.tsx
+++ b/app/songs/page.tsx
@@ -1,37 +1,32 @@
+import SearchForm from "./search-form";
+
 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>
+            <h2 className="text-xl font-bold mb-4">已收藏</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>
+                <span>冬天的秘密 - 周传雄</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>
+                <span>其实都没有 - 张盼盼</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">
+            <h2 className="text-xl font-bold mb-4">搜索</h2>
+            <SearchForm className="mb-4" />
+            {/* <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">
@@ -44,7 +39,7 @@ export default function Page() {
                   Add
                 </button>
               </div>
-            </div>
+            </div> */}
           </div>
         </div>
       </div>
diff --git a/app/songs/search-form.tsx b/app/songs/search-form.tsx
new file mode 100644
index 0000000..cdbaa2f
--- /dev/null
+++ b/app/songs/search-form.tsx
@@ -0,0 +1,39 @@
+"use client";
+
+import { useFormState } from "react-dom";
+import { searchSongs } from "./actions";
+
+export default function SearchForm({
+  className,
+}: {
+  className?: string | undefined;
+}) {
+  const [items, dispatch] = useFormState(searchSongs, []);
+  return (
+    <form className={className} action={dispatch}>
+      <input
+        name="name"
+        type="text"
+        placeholder="Search songs..."
+        className="w-full border rounded-md px-4 py-2"
+      />
+      {items ? (
+        <div className="bg-white rounded shadow-md p-4">
+          {items.map((item) => (
+            <div
+              className="flex justify-between items-center py-2 border-b"
+              key={item.id}
+            >
+              <span>
+                {item.name} - {item.artist}
+              </span>
+              <button className="text-green-500 hover:text-green-700">
+                Add
+              </button>
+            </div>
+          ))}
+        </div>
+      ) : null}
+    </form>
+  );
+}
diff --git a/lib/actions/lyrics.ts b/lib/actions/lyrics.ts
index 28f9681..b39d0ee 100644
--- a/lib/actions/lyrics.ts
+++ b/lib/actions/lyrics.ts
@@ -12,7 +12,7 @@ enum LyricSource {
   NETEASE = "NetEase",
 }
 
-interface InternetProviderLyricSearchResponse {
+export interface InternetProviderLyricSearchResponse {
   artist: string;
   id: string;
   name: string;