fix: style

bo/src/components/customer/Cart1.vue

@@ -0,0 +1,66 @@
+<template>
+  <div class="container mx-auto mt-15">
+    <div
+      class="bg-(--second-light) dark:bg-(--main-dark) rounded-lg border border-(--border-light) dark:border-(--border-dark) overflow-hidden">
+      <h2
+        class="text-lg font-semibold text-black dark:text-white p-4 border-b border-(--border-light) dark:border-(--border-dark)">
+        {{ t('Cart Items') }}
+      </h2>
+
+      <div v-if="cartStore.items.length > 0" class="divide-y divide-(--border-light) dark:divide-(--border-dark)">
+        <div v-for="item in cartStore.items" :key="item.id" class="flex items-center justify-between p-4 gap-4">
+          <div class="flex items-center gap-10 flex-1">
+            <div
+              class="w-20 bg-(--second-light) dark:bg-(--main-dark) rounded flex items-center justify-center overflow-hidden">
+              <img v-if="item.image" :src="item.image" :alt="item.name" class="w-full h-full object-cover" />
+              <UIcon v-else name="mdi:package-variant" class="text-xl text-gray-400" />
+            </div>
+            <div class="flex-1 min-w-0">
+              <p class="text-black dark:text-white text-sm font-medium truncate">{{ item.name }}</p>
+              <p class="text-gray-500 dark:text-gray-400 text-sm">
+                {{ t('Qty') }}: {{ item.quantity }} × ${{ item.price.toFixed(2) }}
+              </p>
+            </div>
+          </div>
+          <div class="text-right flex-shrink-0">
+            <p class="text-black dark:text-white font-medium">${{ (item.price * item.quantity).toFixed(2) }}</p>
+          </div>
+        </div>
+      </div>
+
+      <div v-else class="p-8 text-center">
+        <UIcon name="mdi:cart-outline" class="text-5xl text-gray-300 dark:text-gray-600 mb-4 mx-auto" />
+        <p class="text-gray-500 dark:text-gray-400">{{ t('Your cart is empty') }}</p>
+      </div>
+      <div v-if="cartStore.items.length > 0"
+        class="p-4 border-t border-(--border-light) dark:border-(--border-dark) bg-(--second-light) dark:bg-(--main-dark) flex gap-4 justify-end items-center">
+        <UButton color="primary" @click="handleContinueToCheckout"
+          class="bg-(--accent-blue-light) dark:bg-(--accent-blue-dark) text-white hover:bg-(--accent-blue-dark) dark:hover:bg-(--accent-blue-light)">
+          {{ t('Continue to Checkout') }}
+        </UButton>
+        <UButton variant="outline" color="neutral" @click="handleCancel"
+          class="text-black dark:text-white border-(--border-light) dark:border-(--border-dark) hover:bg-gray-100 dark:hover:bg-gray-700">
+          {{ t('Cancel') }}
+        </UButton>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useCartStore } from '@/stores/cart'
+import { useI18n } from 'vue-i18n'
+import { useRouter } from 'vue-router'
+
+const cartStore = useCartStore()
+const { t } = useI18n()
+const router = useRouter()
+
+function handleCancel() {
+  router.back()
+}
+
+function handleContinueToCheckout() {
+  router.push({ name: 'cart' })
+}
+</script>