feat: Add shopping cart to catalog page with sidebar

src/components/catalog/Card.vue

@@ -0,0 +1,107 @@
+<template>
+  <v-card>
+    <v-row no-gutters align="center" class="w-100">
+      <v-col cols="12" md="3" class="d-flex">
+        <v-img :src="product.img" class="product-img" contain></v-img>
+      </v-col>
+
+      <v-col cols="12" md="6">
+        <v-card-title>{{ product.name }}</v-card-title>
+        <v-card-subtitle>{{ product.description }}</v-card-subtitle>
+        <div class="prices mt-2">
+          <div class="price-line">
+            Precio unitario: <strong>{{ currency(product.price) }}</strong>
+          </div>
+          <div class="price-line">
+            Precio total:
+            <strong>{{ currency(product.price * product.quantity) }}</strong>
+          </div>
+        </div>
+      </v-col>
+
+      <v-col cols="12" md="3" class="d-flex align-center justify-end">
+        <div class="quantity-controls">
+          <v-btn small text class="qty-btn" @click="decrease(product)"
+            ><v-icon small>mdi-minus</v-icon></v-btn
+          >
+          <v-text-field
+            v-model.number="product.quantity"
+            type="number"
+            min="0"
+            class="quantity-input"
+            dense
+            outlined
+            hide-details
+            aria-label="Cantidad"
+          />
+          <v-btn small text class="qty-btn" @click="handleIncrease"
+            ><v-icon small>mdi-plus</v-icon></v-btn>
+        </div>
+      </v-col>
+    </v-row>
+  </v-card>
+</template>
+
+<script>
+export default {
+  props: {
+    product: {
+      type: Object,
+      required: true
+    },
+    increase: {
+      type: Function,
+      required: true
+    },
+    decrease: {
+      type: Function,
+      required: true
+    },
+    currency: {
+      type: Function,
+      required: true
+    }
+  },
+  methods: {
+    handleIncrease() {
+      this.increase(this.product);
+      this.$emit('add-to-cart', this.product);
+    }
+  }
+}
+</script>
+
+<style scoped>
+.product-img {
+  width: 150px;
+  height: 100px;
+  border-radius: 6px;
+  object-fit: cover;
+}
+.quantity-controls {
+  display: inline-flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 8px;
+}
+.prices .price-line {
+  margin-bottom: 4px;
+}
+.quantity-input {
+  max-width: 90px;
+}
+.quantity-input input {
+  text-align: center;
+}
+.qty-btn {
+  min-width: 36px !important;
+  height: 36px !important;
+  border-radius: 18px !important;
+}
+@media (max-width: 600px) {
+  .product-img {
+    width: 120px;
+    height: 80px;
+  }
+}
+</style>