Komponente des Einkaufswagens

<div class="font-sans antialiased text-gray-800 dark:text-gray-200 bg-gray-50 dark:bg-gray-900 min-h-screen p-4 sm:p-6 lg:p-8">
  <div class="max-w-7xl mx-auto bg-white dark:bg-gray-800 shadow-xl rounded-lg overflow-hidden lg:flex lg:flex-row-reverse">
    <!-- Order Summary / Cart Totals -->
    <div class="lg:w-1/3 p-6 sm:p-8 bg-orange-50 dark:bg-gray-700 border-b lg:border-b-0 lg:border-l border-orange-100 dark:border-gray-600">
      <h2 class="text-2xl font-bold text-orange-800 dark:text-orange-200 mb-6 sm:mb-8">Order Summary</h2>
      <div class="space-y-4 mb-6">
        <div class="flex justify-between items-center text-gray-700 dark:text-gray-300">
          <span>Subtotal</span>
          <span>$385.00</span>
        </div>
        <div class="flex justify-between items-center text-gray-700 dark:text-gray-300">
          <span>Shipping & Handling</span>
          <span>$15.00</span>
        </div>
        <div class="flex justify-between items-center text-gray-700 dark:text-gray-300">
          <span>Taxes (5%)</span>
          <span>$19.25</span>
        </div>
      </div>
      <div class="border-t border-orange-200 dark:border-gray-600 pt-4 flex justify-between items-center text-xl font-semibold text-orange-900 dark:text-orange-100">
        <span>Order Total</span>
        <span>$419.25</span>
      </div>

      <div class="mt-8">
        <label for="promo_code" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Have a promo code?</label>
        <div class="flex">
          <input type="text" id="promo_code" class="flex-grow p-3 border border-orange-300 dark:border-gray-600 rounded-l-md focus:ring-orange-500 focus:border-orange-500 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 outline-none" placeholder="Enter code">
          <button class="px-4 py-3 bg-orange-700 hover:bg-orange-800 dark:bg-orange-600 dark:hover:bg-orange-700 text-white rounded-r-md transition duration-200 ease-in-out">
            Apply
          </button>
        </div>
      </div>

      <button class="mt-8 w-full bg-orange-800 hover:bg-orange-900 dark:bg-orange-700 dark:hover:bg-orange-800 text-white font-bold py-3 px-6 rounded-md transition duration-200 ease-in-out shadow-md hover:shadow-lg">
        Proceed to Checkout
      </button>
      <p class="mt-4 text-sm text-center text-gray-600 dark:text-gray-400">
        Secure payment via SSL.
      </p>
    </div>

    <!-- Cart Items -->
    <div class="lg:w-2/3 p-6 sm:p-8">
      <h2 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-6 sm:mb-8">Your Shopping Cart (<span id="item_count">2</span> items)</h2>

      <div class="space-y-6">
        <!-- Cart Item 1 -->
        <div class="flex flex-col sm:flex-row items-start sm:items-center py-4 border-b border-gray-200 dark:border-gray-700 last:border-b-0">
          <div class="flex-shrink-0 w-24 h-24 sm:w-32 sm:h-32 mr-4 rounded-lg overflow-hidden bg-gray-100 dark:bg-gray-700">
            <img src="https://picsum.photos/id/60/300/300" alt="Product Image" class="w-full h-full object-cover">
          </div>
          <div class="flex-grow mt-4 sm:mt-0">
            <h3 class="text-lg font-medium text-gray-900 dark:text-gray-100 mb-1">Elegant Silk Scarf</h3>
            <p class="text-gray-600 dark:text-gray-400 text-sm mb-2">Color: Burgundy Red, Size: One Size</p>
            <div class="flex items-center gap-4">
              <div class="flex items-center border border-gray-300 dark:border-gray-600 rounded-md">
                <button class="px-3 py-1 text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-l-md transition duration-150 ease-in-out">-</button>
                <span class="px-3 py-1 border-x border-gray-300 dark:border-gray-600 text-gray-900 dark:text-gray-100">1</span>
                <button class="px-3 py-1 text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-r-md transition duration-150 ease-in-out">+</button>
              </div>
              <p class="font-semibold text-lg text-orange-700 dark:text-orange-400">$120.00</p>
            </div>
            <div class="flex items-center mt-3 text-sm">
              <button class="text-orange-600 dark:text-orange-400 hover:text-orange-800 dark:hover:text-orange-500 transition duration-150 ease-in-out mr-4">Edit</button>
              <button class="text-red-500 dark:text-red-400 hover:text-red-700 dark:hover:text-red-500 transition duration-150 ease-in-out">Remove</button>
            </div>
          </div>
        </div>

        <!-- Cart Item 2 -->
        <div class="flex flex-col sm:flex-row items-start sm:items-center py-4 border-b border-gray-200 dark:border-gray-700 last:border-b-0">
          <div class="flex-shrink-0 w-24 h-24 sm:w-32 sm:h-32 mr-4 rounded-lg overflow-hidden bg-gray-100 dark:bg-gray-700">
            <img src="https://picsum.photos/id/166/300/300" alt="Product Image" class="w-full h-full object-cover">
          </div>
          <div class="flex-grow mt-4 sm:mt-0">
            <h3 class="text-lg font-medium text-gray-900 dark:text-gray-100 mb-1">Artisan Leather Handbag</h3>
            <p class="text-gray-600 dark:text-gray-400 text-sm mb-2">Color: Autumn Brown, Size: Medium</p>
            <div class="flex items-center gap-4">
              <div class="flex items-center border border-gray-300 dark:border-gray-600 rounded-md">
                <button class="px-3 py-1 text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-l-md transition duration-150 ease-in-out">-</button>
                <span class="px-3 py-1 border-x border-gray-300 dark:border-gray-600 text-gray-900 dark:text-gray-100">1</span>
                <button class="px-3 py-1 text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-r-md transition duration-150 ease-in-out">+</button>
              </div>
              <p class="font-semibold text-lg text-orange-700 dark:text-orange-400">$265.00</p>
            </div>
            <div class="flex items-center mt-3 text-sm">
              <button class="text-orange-600 dark:text-orange-400 hover:text-orange-800 dark:hover:text-orange-500 transition duration-150 ease-in-out mr-4">Edit</button>
              <button class="text-red-500 dark:text-red-400 hover:text-red-700 dark:hover:text-red-500 transition duration-150 ease-in-out">Remove</button>
            </div>
          </div>
        </div>
      </div>

      <div class="mt-8 flex flex-col sm:flex-row justify-between items-center">
        <a href="#" class="text-orange-700 dark:text-orange-400 hover:underline flex items-center mb-4 sm:mb-0">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M9.707 16.707a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414l6-6a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l4.293 4.293a1 1 0 010 1.414z" clip-rule="evenodd" />
          </svg>
          Continue Shopping
        </a>
        <button class="px-6 py-3 bg-red-600 hover:bg-red-700 dark:bg-red-500 dark:hover:bg-red-600 text-white rounded-md transition duration-200 ease-in-out shadow-md hover:shadow-lg">
          Clear Cart
        </button>
      </div>
    </div>
  </div>
</div>