feat: Add shopping cart to catalog page with sidebar

src/components/catalog/Cart.vue

@@ -0,0 +1,83 @@
+<template>
+  <v-card>
+    <v-card-title class="d-flex align-center">
+      <v-icon class="mr-2">mdi-cart</v-icon>
+      Carrito
+      <v-chip v-if="cartCount" color="primary" class="ml-2">{{ cartCount }}</v-chip>
+    </v-card-title>
+    
+    <v-divider></v-divider>
+    
+    <v-card-text v-if="cartItems.length === 0" class="text-center grey--text">
+      El carrito está vacío
+    </v-card-text>
+    
+    <v-list v-else density="compact" max-height="300" class="overflow-y-auto">
+      <v-list-item v-for="item in cartItems" :key="item.id">
+        <template v-slot:prepend>
+          <v-avatar size="40" rounded>
+            <v-img :src="item.img" cover></v-img>
+          </v-avatar>
+        </template>
+        
+        <v-list-item-title>{{ item.name }}</v-list-item-title>
+        <v-list-item-subtitle>
+          {{ item.quantity }} x {{ currency(item.price) }}
+        </v-list-item-subtitle>
+        
+        <template v-slot:append>
+          <div class="d-flex align-center">
+            <strong>{{ currency(item.price * item.quantity) }}</strong>
+            <v-btn 
+              icon="mdi-delete" 
+              size="small" 
+              variant="text" 
+              color="red"
+              class="ml-2"
+              @click="$emit('remove', item.id)"
+            ></v-btn>
+          </div>
+        </template>
+      </v-list-item>
+    </v-list>
+    
+    <v-divider v-if="cartItems.length > 0"></v-divider>
+    
+    <v-card-text v-if="cartItems.length > 0">
+      <div class="d-flex justify-space-between align-center">
+        <strong>Total:</strong>
+        <strong class="text-h6">{{ currency(cartTotal) }}</strong>
+      </div>
+    </v-card-text>
+    
+    <v-card-actions v-if="cartItems.length > 0">
+      <v-btn color="primary" block @click="$emit('checkout')">
+        Finalizar Compra
+      </v-btn>
+    </v-card-actions>
+  </v-card>
+</template>
+
+<script>
+export default {
+  name: 'Cart',
+  props: {
+    cartItems: {
+      type: Array,
+      default: () => []
+    },
+    currency: {
+      type: Function,
+      required: true
+    }
+  },
+  computed: {
+    cartCount() {
+      return this.cartItems.reduce((sum, item) => sum + item.quantity, 0);
+    },
+    cartTotal() {
+      return this.cartItems.reduce((sum, item) => sum + (item.price * item.quantity), 0);
+    }
+  }
+}
+</script>