38 lines
		
	
	
		
			1.1 KiB
		
	
	
	
		
			TypeScript
		
	
	
	
	
	
			
		
		
	
	
			38 lines
		
	
	
		
			1.1 KiB
		
	
	
	
		
			TypeScript
		
	
	
	
	
	
| import { listSongs } from "./actions";
 | |
| import SearchForm from "./search-form";
 | |
| 
 | |
| export default async function Page() {
 | |
|   const songs = await listSongs();
 | |
|   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">已收藏</h2>
 | |
|             <ul className="bg-white rounded shadow-md p-4">
 | |
|               {songs.map((song, i) => (
 | |
|                 <li
 | |
|                   className="flex justify-between items-center py-2 border-b"
 | |
|                   key={i}
 | |
|                 >
 | |
|                   <span>
 | |
|                     {song.name} - {song.artist}
 | |
|                   </span>
 | |
|                   <button className="text-red-500 hover:text-red-700">
 | |
|                     删除
 | |
|                   </button>
 | |
|                 </li>
 | |
|               ))}
 | |
|             </ul>
 | |
|           </div>
 | |
| 
 | |
|           <div>
 | |
|             <h2 className="text-xl font-bold mb-4">搜索</h2>
 | |
|             <SearchForm className="mb-4" />
 | |
|           </div>
 | |
|         </div>
 | |
|       </div>
 | |
|     </section>
 | |
|   );
 | |
| }
 |