feat: 咨询查询多个歌手的歌词

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 [];
+}

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>
+            <h2 className="text-xl font-bold mb-4">搜索</h2>
-            <div className="mb-4">
+            <SearchForm className="mb-4" />
-              <input
+            {/* <div className="bg-white rounded shadow-md p-4">
-                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">
@@ -44,7 +39,7 @@ export default function Page() {
                   Add
                 </button>
               </div>
-            </div>
+            </div> */}
           </div>
         </div>
       </div>

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

lib/actions/lyrics.ts

@@ -12,7 +12,7 @@ enum LyricSource {
   NETEASE = "NetEase",
 }
 
-interface InternetProviderLyricSearchResponse {
+export interface InternetProviderLyricSearchResponse {
   artist: string;
   id: string;
   name: string;