ウィッシュリストコンポーネント

<div class="min-h-screen bg-gray-900 text-white p-5">
    <h1 class="text-2xl font-bold mb-5">Wishlist</h1>
    <div class="overflow-x-auto">
        <table class="min-w-full bg-gray-800 rounded-lg shadow-lg">
            <thead>
                <tr class="bg-gray-700 text-gray-200">
                    <th class="py-2 px-4">Item</th>
                    <th class="py-2 px-4">Description</th>
                    <th class="py-2 px-4">Price</th>
                    <th class="py-2 px-4">Actions</th>
                </tr>
            </thead>
            <tbody>
                <tr class="border-b border-gray-600">
                    <td class="py-4 px-4 flex items-center">
                        <img src="https://picsum.photos/50/50" alt="Item 1" class="rounded mr-3">
                        Item 1
                    </td>
                    <td class="py-4 px-4">This is a description of item 1.</td>
                    <td class="py-4 px-4">$19.99</td>
                    <td class="py-4 px-4">
                        <button class="bg-blue-600 text-white py-1 px-3 rounded hover:bg-blue-500">Add to Cart</button>
                        <button class="bg-red-600 text-white py-1 px-3 rounded hover:bg-red-500">Remove</button>
                    </td>
                </tr>
                <tr class="border-b border-gray-600">
                    <td class="py-4 px-4 flex items-center">
                        <img src="https://picsum.photos/50/51" alt="Item 2" class="rounded mr-3">
                        Item 2
                    </td>
                    <td class="py-4 px-4">This is a description of item 2.</td>
                    <td class="py-4 px-4">$29.99</td>
                    <td class="py-4 px-4">
                        <button class="bg-blue-600 text-white py-1 px-3 rounded hover:bg-blue-500">Add to Cart</button>
                        <button class="bg-red-600 text-white py-1 px-3 rounded hover:bg-red-500">Remove</button>
                    </td>
                </tr>
                <tr class="border-b border-gray-600">
                    <td class="py-4 px-4 flex items-center">
                        <img src="https://picsum.photos/50/52" alt="Item 3" class="rounded mr-3">
                        Item 3
                    </td>
                    <td class="py-4 px-4">This is a description of item 3.</td>
                    <td class="py-4 px-4">$39.99</td>
                    <td class="py-4 px-4">
                        <button class="bg-blue-600 text-white py-1 px-3 rounded hover:bg-blue-500">Add to Cart</button>
                        <button class="bg-red-600 text-white py-1 px-3 rounded hover:bg-red-500">Remove</button>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="mt-5 flex justify-between">
        <button class="bg-green-600 text-white py-2 px-5 rounded hover:bg-green-500">Move All to Cart</button>
        <button class="bg-gray-600 text-white py-2 px-5 rounded hover:bg-gray-500">Clear Wishlist</button>
    </div>
</div>