54 lines
1.8 KiB
TypeScript
54 lines
1.8 KiB
TypeScript
|
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>
|
||
|
|
);
|
||
|
|
}
|