feat: Create cart store

pruebas/02-bazar-universal/dano2906/src/components/ProductCard.astro

@@ -1,20 +1,23 @@
 ---
     import { Image } from "astro:assets";
-    import productImage from "@assets/placeholder-product-image.png"
+    import AddCartButton from "@components/AddCartButton.jsx";
+    import productImage from "../../public/placeholder-product-image.png"
     const {product} = Astro.props
-    const {title,description,price,category,images,rating} = product
+    const {id,title,description,price,category,rating} = product
 ---
 
-<article class="w-full h-auto p-3 flex flex-col items-center justify-center gap-y-1 bg-gradient-to-br from-blue-300 via-pink-300 to-orange-300 shadow-lg rounded-lg hover:opacity-75">
+<article class="w-full h-auto p-3 flex flex-col items-start justify-start gap-y-1 bg-gradient-to-br from-blue-300 via-pink-300 to-orange-300 shadow-lg rounded-lg">
     <div>
-        <Image src={productImage} alt={title} width={192} height={192} class="rounded-lg"/>
+        <Image src={productImage} alt={title} width={192} height={192} class="mx-auto rounded-lg" transition:name="img"/>
     </div>
-    <div class="flex flex-col items-start justify-start">
-        <h2 class="text-2xl font-tilt font-bold text-purple-950">{title}</h2>
-        <p class="text-lg font-tilt font-light text-purple-950">{description}</p>
-        <span class="text-sm font-tilt font-normal text-purple-950">{category}</span>
-        <span class="text-sm font-tilt font-light text-purple-950">Price: ${price}</span>
-        <span class="text-sm font-tilt font-light text-purple-950">Rating: {rating}/5</span>
-    </div>
-
+    <a href=`/items/${id}` class="hover:opacity-75">
+        <div class="flex flex-col items-start justify-start">
+            <h2 class="text-2xl font-tilt font-bold text-purple-950" transition:name="title">{title}</h2>
+            <p class="text-lg font-tilt font-light text-purple-950 [text-wrap:balance]" transition:name="desc">{description}</p>
+            <span class="text-sm font-tilt font-normal text-purple-950" transition:name="category">{category}</span>
+            <span class="text-sm font-tilt font-light text-purple-950" transition:name="price">Price: ${price}</span>
+            <span class="text-sm font-tilt font-light text-purple-950" transition:name="rating">Rating: {rating}/5</span>
+        </div>
+    </a>  
+    <AddCartButton id={id} client:load/>      
 </article>

pruebas/02-bazar-universal/dano2906/src/components/ProductsResultSection.astro

@@ -10,9 +10,7 @@ const {paginatedData: products,nextPage,prevPage,isLastPage,quantity} = await re
     <h1 class="text-lg sm:text-3xl font-tilt font-bold text-purple-950">Cantidad de productos encontrados: {quantity}</h1>
     <ul class="p-2 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-y-2 sm:gap-2">
         {products.map((product)=>(
-            <a href=`/items/${product.id}`>
-                <ProductCard product={product}/>
-            </a>
+            <ProductCard product={product}/>
         ))}
     </ul>
     <a href=`/items?search=${query}&page=${prevPage}`>Pagina anterior</a>

pruebas/02-bazar-universal/dano2906/src/store/cartStore.js

@@ -0,0 +1,27 @@
+import { create } from 'zustand'
+import { persist } from 'zustand/middleware'
+
+export const useCartStore = create(persist(
+  (set, get) => ({
+    cart: [],
+    add: (id) => {
+      if (!get().cart.some(instance => instance === id)) {
+        set((state) => ({
+          cart: [...state.cart, id]
+        }))
+      }
+    },
+    remove: (id) => (
+      set((state) => ({
+        cart: state.cart.filter(instance => instance !== id)
+      }))
+    ),
+    clean: () => (
+      set(() => ({
+        cart: []
+      }))
+    )
+  }), {
+    name: 'cart'
+  }
+))