-
- To get started, edit the page.tsx file. -
-- Looking for a starting point or more instructions? Head over to{" "} - - Templates - {" "} - or the{" "} - - Learning - {" "} - center. -
+
+
+
+
+ {/* Etiqueta Superior */}
+
+ Esenciales Latinos
+
+
+ {/* Titular Principal */}
+
+ Sabor auténtico,
+ + origen natural. + {/* Subrayado orgánico decorativo opcional */} + + +
+
+ {/* Botones de Acción */}
+
+
+
+
+
+
+ {/* Imagen Principal con Decoración */}
+
+ {/* Círculo de fondo decorativo */}
+
+
+ {/* Imagen (Usamos un placeholder de alta calidad por ahora) */}
+
+
+ );
+}
\ No newline at end of file
diff --git a/src/components/sections/InfoSection.tsx b/src/components/sections/InfoSection.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/shop/CatalogBrowser.tsx b/src/components/shop/CatalogBrowser.tsx
new file mode 100644
index 0000000..7949b94
--- /dev/null
+++ b/src/components/shop/CatalogBrowser.tsx
@@ -0,0 +1,150 @@
+"use client";
+
+import { useState, useMemo } from "react";
+import { Product, Category } from "@/types";
+import ProductCard from "@/components/ui/ProductCard";
+import { getProductImageUrl } from "@/lib/supabase";
+import { cn } from "@/lib/utils";
+
+interface CatalogBrowserProps {
+ initialProducts: Product[];
+ categories: Category[];
+}
+
+export default function CatalogBrowser({ initialProducts, categories }: CatalogBrowserProps) {
+ // AHORA: activeCategory guarda el ID ('all' o el UUID de la categoría)
+ const [activeCategory, setActiveCategory] = useState("all");
+ const [sortOrder, setSortOrder] = useState("Destacados");
+
+ // 1. Preparamos el menú (añadimos la opción "Todo" con ID 'all')
+ const menuCategories = useMemo(() => {
+ return [
+ { id: 'all', name: 'Todo' },
+ ...categories
+ ];
+ }, [categories]);
+
+ // 2. Lógica de Filtrado y Ordenación
+ const filteredProducts = useMemo(() => {
+ let result = [...initialProducts];
+
+ // FILTRADO POR ID (Mucho más seguro)
+ if (activeCategory !== "all") {
+ result = result.filter((p) => p.category_id === activeCategory);
+ }
+
+ // Ordenar
+ if (sortOrder === "Precio: Menor a Mayor") {
+ result.sort((a, b) => a.price - b.price);
+ } else if (sortOrder === "Precio: Mayor a Menor") {
+ result.sort((a, b) => b.price - a.price);
+ } else if (sortOrder === "Novedades") {
+ result.sort((a, b) => new Date(b.created_at).getTime() - new Date(a.created_at).getTime());
+ }
+
+ return result;
+ }, [initialProducts, activeCategory, sortOrder]);
+
+ // Helper para obtener el nombre de la categoría de un producto
+ const getCategoryName = (catId: string) => {
+ const category = categories.find((c) => c.id === catId);
+ return category ? category.name : "General";
+ };
+
+ return (
+ <>
+
+
+
+ {/* FILTROS STICKY */}
+
+ {filteredProducts.length > 0 ? (
+
+
+ );
+}
\ No newline at end of file
diff --git a/src/components/ui/Button.tsx b/src/components/ui/Button.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/ui/Marquee.tsx b/src/components/ui/Marquee.tsx
new file mode 100644
index 0000000..c2a7792
--- /dev/null
+++ b/src/components/ui/Marquee.tsx
@@ -0,0 +1,17 @@
+// src/components/ui/Marquee.tsx
+export default function Marquee() {
+ return (
+ ()(
+ persist(
+ (set, get) => ({
+ items: [],
+ isOpen: false,
+
+ addItem: (product, quantity = 1) => {
+ const currentItems = get().items;
+ const existingItem = currentItems.find((item) => item.id === product.id);
+
+ if (existingItem) {
+ // Si ya existe, sumamos la cantidad
+ const updatedItems = currentItems.map((item) =>
+ item.id === product.id
+ ? { ...item, quantity: item.quantity + quantity }
+ : item
+ );
+ set({ items: updatedItems, isOpen: true }); // Abrimos el carrito al añadir
+ } else {
+ // Si es nuevo, lo añadimos
+ set({ items: [...currentItems, { ...product, quantity }], isOpen: true });
+ }
+ },
+
+ removeItem: (id) => {
+ set({ items: get().items.filter((item) => item.id !== id) });
+ },
+
+ updateQuantity: (id, quantity) => {
+ if (quantity < 1) return;
+ set({
+ items: get().items.map((item) =>
+ item.id === id ? { ...item, quantity } : item
+ ),
+ });
+ },
+
+ clearCart: () => set({ items: [] }),
+
+ // Control de UI del Drawer
+ toggleCart: () => set({ isOpen: !get().isOpen }),
+ openCart: () => set({ isOpen: true }),
+ closeCart: () => set({ isOpen: false }),
+
+ getTotalPrice: () => {
+ return get().items.reduce((total, item) => total + item.price * item.quantity, 0);
+ },
+
+ getTotalItems: () => {
+ return get().items.reduce((total, item) => total + item.quantity, 0);
+ },
+ }),
+ {
+ name: 'surtilatino-cart', // Nombre en LocalStorage
+ storage: createJSONStorage(() => localStorage),
+ }
+ )
+);
\ No newline at end of file
diff --git a/src/types/database.types.ts b/src/types/database.types.ts
new file mode 100644
index 0000000..e69de29
diff --git a/src/types/index.ts b/src/types/index.ts
new file mode 100644
index 0000000..8510856
--- /dev/null
+++ b/src/types/index.ts
@@ -0,0 +1,25 @@
+export interface Product {
+ id: string;
+ created_at: string;
+ name: string;
+ description: string | null;
+ price: number;
+ stock: number;
+ category_id: string;
+ image_url: string | null; // El path dentro del bucket
+ is_active: boolean;
+ stripe_product_id?: string;
+ stripe_price_id?: string;
+}
+
+export interface Category {
+ id: string;
+ name: string; // Ej: "Frutas & Verduras"
+ slug: string; // Ej: "frutas-verduras" (útil para URLs)
+ description?: string;
+}
+
+export interface CartItem extends Product {
+ quantity: number;
+}
+
diff --git a/structure.sh b/structure.sh
new file mode 100644
index 0000000..2d471ac
--- /dev/null
+++ b/structure.sh
@@ -0,0 +1,33 @@
+# 1. Crear estructura de directorios dentro de src
+mkdir -p src/components/layout # Navbar, Footer
+mkdir -p src/components/ui # Botones, Tarjetas, Elementos base
+mkdir -p src/components/sections # Hero, Grids de productos, Banners
+mkdir -p src/lib # Cliente Supabase, utilidades (clsx)
+mkdir -p src/store # Estado global (Zustand)
+mkdir -p src/types # Definiciones de TypeScript (DB, Productos)
+mkdir -p src/hooks # Hooks personalizados (si fueran necesarios)
+
+# 2. Crear archivos para la Lógica y Configuración
+touch src/lib/supabase.ts # Inicialización del cliente Supabase
+touch src/lib/utils.ts # Helper para clases css (tailwind-merge)
+touch src/store/cart-store.ts # Store de carrito (Zustand)
+touch src/types/database.types.ts # Tipos generados de Supabase
+touch src/types/index.ts # Tipos globales de la app
+
+# 3. Crear archivos de Componentes (Vacíos por ahora)
+# Layout
+touch src/components/layout/Navbar.tsx
+touch src/components/layout/Footer.tsx
+
+# Secciones Principales (Home)
+touch src/components/sections/Hero.tsx
+touch src/components/sections/FeaturedGrid.tsx
+touch src/components/sections/InfoSection.tsx
+
+# Componentes de UI (Estilo Boutique)
+touch src/components/ui/ProductCard.tsx
+touch src/components/ui/Button.tsx
+touch src/components/ui/SectionHeader.tsx
+
+# 4. Mensaje de confirmación
+echo "✅ Estructura 'Surtilatino Minimal' generada correctamente."
\ No newline at end of file
+
+ Favoritos
+
-
+ Favoritos
de la semana.
+
+
+
+ {products.length} productos disponibles +
+ + Ver catálogo completo + +
-
-
+
);
-}
+}
\ No newline at end of file
diff --git a/src/app/product/[id]/page.tsx b/src/app/product/[id]/page.tsx
new file mode 100644
index 0000000..7fa0105
--- /dev/null
+++ b/src/app/product/[id]/page.tsx
@@ -0,0 +1,149 @@
+// src/app/product/[id]/page.tsx
+import { notFound } from "next/navigation";
+import Link from "next/link";
+import { ArrowLeft, Truck, ShieldCheck } from "lucide-react";
+import { supabase, getProductImageUrl } from "@/lib/supabase";
+import { Product } from "@/types";
+import ProductCard from "@/components/ui/ProductCard";
+import ProductActions from "@/components/product/ProductActions";
+
+// 1. Función para obtener el producto actual
+async function getProduct(id: string) {
+ const { data, error } = await supabase
+ .from('products')
+ .select('*')
+ .eq('id', id)
+ .single();
+
+ if (error || !data) return null;
+ return data as Product;
+}
+
+// 2. Función para obtener productos relacionados
+async function getRelatedProducts(category: string, currentId: string) {
+ const { data } = await supabase
+ .from('products')
+ .select('*')
+ .eq('category', category)
+ .neq('id', currentId)
+ .eq('is_active', true)
+ .limit(3);
+
+ return (data as Product[]) || [];
+}
+
+// 3. DEFINICIÓN DEL COMPONENTE (Aquí estaba el error de tipos)
+// En lugar de una interfaz separada, tipamos inline para evitar conflictos con Next.js 15
+export default async function ProductPage(props: {
+ params: Promise<{ id: string }>
+}) {
+ // Await obligatorio en Next.js 15 antes de acceder a params
+ const params = await props.params;
+ const { id } = params;
+
+ const product = await getProduct(id);
+
+ if (!product) {
+ notFound();
+ }
+
+ const relatedProducts = await getRelatedProducts(product.category, product.id);
+ const imageUrl = getProductImageUrl(product.image_url);
+
+ return (
+
+ {products.map((product, index) => (
+
+ ) : (
+ /* Estado Vacío (Empty State) Minimalista */
+
+
+ )}
+
+
+ {/* Frase Editorial */}
+ Aún no hemos subido productos.
+Vuelve pronto para ver nuestras novedades.
+
+
-
+ + "No vendemos solo ingredientes. Vendemos la nostalgia alegría de cocinar como en casa." +
+Familia Mercado, desde 2010
+ {/* Navegación Breadcrumb */}
+
+
+
+ )}
+
+
+ );
+}
\ No newline at end of file
diff --git a/src/app/shop/page.tsx b/src/app/shop/page.tsx
new file mode 100644
index 0000000..4c8ed85
--- /dev/null
+++ b/src/app/shop/page.tsx
@@ -0,0 +1,52 @@
+// src/app/shop/page.tsx
+import { supabase } from "@/lib/supabase";
+import { Product, Category } from "@/types";
+import CatalogBrowser from "@/components/shop/CatalogBrowser";
+
+export const revalidate = 0; // Datos siempre frescos
+
+// 1. Tu función para traer categorías
+async function getCategories() {
+ const { data, error } = await supabase
+ .from('categories')
+ .select('*')
+ .order('name', { ascending: true });
+
+ if (error) {
+ console.error('Error cargando categorías:', error.message);
+ return [];
+ }
+
+ return data as Category[];
+}
+
+// 2. Función para traer productos
+async function getAllProducts() {
+ const { data, error } = await supabase
+ .from('products')
+ .select('*')
+ .eq('is_active', true)
+ .order('created_at', { ascending: false });
+
+ if (error) {
+ console.error("Error fetching shop products:", error);
+ return [];
+ }
+
+ return data as Product[];
+}
+
+export default async function ShopPage() {
+ // 3. Ejecutamos ambas peticiones a la vez (Parallel Data Fetching)
+ const [products, categories] = await Promise.all([
+ getAllProducts(),
+ getCategories()
+ ]);
+
+ return (
+
+
+
+
+
+
+ {/* COLUMNA IZQUIERDA: Imagen Heroica */}
+
+
+ {/* Relacionados */}
+ {relatedProducts.length > 0 && (
+
+
+
+ {/* COLUMNA DERECHA: Detalles */}
+
+ 
+ {/* Badge de Stock */}
+ {product.stock < 5 && product.stock > 0 && (
+
+ Últimas {product.stock} unidades
+
+ )}
+
+
+
+ {product.category}
+
+
+
+ + {product.name} +
+ +
+
+ {new Intl.NumberFormat('es-ES', { style: 'currency', currency: 'EUR' }).format(product.price)}
+
+ {product.stock > 0 ? (
+
+
+ En Stock
+
+ ) : (
+ Agotado
+ )}
+
+
+
+
+
+ {/* Componente Interactivo */}
+ {product.description || "Sin descripción disponible para este producto."}
+
+
+
+
+
+
+ También te podría gustar
+
+ {relatedProducts.map((prod, idx) => (
+
+
+ {/* Pasamos ambas listas al componente cliente */}
+
+ );
+}
\ No newline at end of file
diff --git a/src/components/layout/CartDrawer.tsx b/src/components/layout/CartDrawer.tsx
new file mode 100644
index 0000000..b61c3c8
--- /dev/null
+++ b/src/components/layout/CartDrawer.tsx
@@ -0,0 +1,143 @@
+"use client";
+
+import { useCartStore } from "@/store/cart-store";
+import { X, Minus, Plus, Trash2, ArrowRight } from "lucide-react";
+import { useEffect, useState } from "react";
+import Image from "next/image";
+import { getProductImageUrl } from "@/lib/supabase";
+import { cn } from "@/lib/utils";
+
+export default function CartDrawer() {
+ const {
+ items,
+ isOpen,
+ closeCart,
+ removeItem,
+ updateQuantity,
+ getTotalPrice
+ } = useCartStore();
+
+ const [mounted, setMounted] = useState(false);
+
+ // Evitar problemas de hidratación (SSR vs Client)
+ useEffect(() => {
+ setMounted(true);
+ }, []);
+
+ if (!mounted) return null;
+
+ return (
+ <>
+ {/* Overlay Oscuro (Backdrop) */}
+
+
+ {/* Panel Deslizante */}
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/src/components/layout/Footer.tsx b/src/components/layout/Footer.tsx
new file mode 100644
index 0000000..d64ef11
--- /dev/null
+++ b/src/components/layout/Footer.tsx
@@ -0,0 +1,120 @@
+import Link from "next/link";
+import { Instagram, Facebook, ArrowRight, MapPin, Phone, Clock } from "lucide-react";
+
+export default function Footer() {
+ return (
+
+ );
+}
\ No newline at end of file
diff --git a/src/components/layout/Navbar.tsx b/src/components/layout/Navbar.tsx
new file mode 100644
index 0000000..0e4e87b
--- /dev/null
+++ b/src/components/layout/Navbar.tsx
@@ -0,0 +1,123 @@
+// src/components/layout/Navbar.tsx
+"use client";
+
+import Link from "next/link";
+import { Search, ShoppingBag, Menu, X } from "lucide-react"; // Añadimos 'X' para cerrar
+import { useState, useEffect } from "react";
+import { cn } from "@/lib/utils";
+import { useCartStore } from "@/store/cart-store";
+
+export default function Navbar() {
+ const [scrolled, setScrolled] = useState(false);
+ const [mobileMenuOpen, setMobileMenuOpen] = useState(false); // Estado para menú móvil
+
+ const { openCart, items } = useCartStore();
+ const itemCount = items.reduce((acc, item) => acc + item.quantity, 0);
+
+ // Efecto: Detectar scroll para el fondo glassmorphism
+ useEffect(() => {
+ const handleScroll = () => setScrolled(window.scrollY > 20);
+ window.addEventListener("scroll", handleScroll);
+ return () => window.removeEventListener("scroll", handleScroll);
+ }, []);
+
+ // Efecto: Bloquear el scroll del body cuando el menú móvil está abierto
+ useEffect(() => {
+ if (mobileMenuOpen) {
+ document.body.style.overflow = "hidden";
+ } else {
+ document.body.style.overflow = "unset";
+ }
+ }, [mobileMenuOpen]);
+
+ // Lista de enlaces para reutilizar
+ const navLinks = ["Shop", "Novedades", "Origen"];
+
+ return (
+ <>
+
+
+ {/* MENÚ MÓVIL (Overlay Pantalla Completa) */}
+
+
+ {/* Header */}
+
+
+
+
+ {/* Lista de Items */}
+ + Tu Pedido ({items.length}) +
+ +
+ {items.length === 0 ? (
+
+
+ {/* Footer / Checkout */}
+ {items.length > 0 && (
+
+ 🥑
+
+ ) : (
+ Tu cesta está vacía.
+ +
+ {items.map((item) => (
+
+ )}
+
+ {/* Imagen Miniatura */}
+
+ ))}
+
+ })
+
+
+ {/* Info */}
+
+
+
+
+
+
+
+
+ {item.name}
+{item.category}
+
+ {/* Control Cantidad Mini */}
+
+
+
+ {item.quantity}
+
+
+
+
+ {new Intl.NumberFormat('es-ES', { style: 'currency', currency: 'EUR' }).format(item.price * item.quantity)}
+
+
+
+ )}
+
+ Subtotal
+
+ {new Intl.NumberFormat('es-ES', { style: 'currency', currency: 'EUR' }).format(getTotalPrice())}
+
+
+
+
+
+ + Envío calculado en el siguiente paso +
+
+ {navLinks.map((item) => (
+ setMobileMenuOpen(false)}
+ className="text-4xl font-light tracking-tight hover:text-accent transition-colors duration-300"
+ >
+ {item}
+
+ ))}
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/src/components/product/ProductActions.tsx b/src/components/product/ProductActions.tsx
new file mode 100644
index 0000000..3f05518
--- /dev/null
+++ b/src/components/product/ProductActions.tsx
@@ -0,0 +1,60 @@
+"use client";
+
+import { useState } from "react";
+import { Minus, Plus, ShoppingBag } from "lucide-react";
+import { useCartStore } from "@/store/cart-store";
+import { Product } from "@/types";
+
+interface ProductActionsProps {
+ product: Product;
+}
+
+export default function ProductActions({ product }: ProductActionsProps) {
+ const [quantity, setQuantity] = useState(1);
+ const addItem = useCartStore((state) => state.addItem);
+
+ const handleIncrement = () => setQuantity((prev) => prev + 1);
+ const handleDecrement = () => setQuantity((prev) => (prev > 1 ? prev - 1 : 1));
+
+ const handleAddToCart = () => {
+ addItem(product, quantity);
+ // El store ya se encarga de abrir el drawer automáticamente
+ };
+
+ return (
+
+ Instagram
+ Contacto
+
+
+ {/* Selector de Cantidad */}
+
+ );
+}
\ No newline at end of file
diff --git a/src/components/sections/FeaturedGrid.tsx b/src/components/sections/FeaturedGrid.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/sections/Hero.tsx b/src/components/sections/Hero.tsx
new file mode 100644
index 0000000..e981998
--- /dev/null
+++ b/src/components/sections/Hero.tsx
@@ -0,0 +1,80 @@
+// src/components/sections/Hero.tsx
+"use client";
+
+import { motion } from "framer-motion";
+import { PlayCircle, ArrowRight } from "lucide-react";
+import Image from "next/image";
+
+export default function Hero() {
+ return (
+
+
+
+
+ {quantity}
+
+
+
+
+
+ {/* Botón de Añadir */}
+
+ + + origen natural. + {/* Subrayado orgánico decorativo opcional */} + + +
+ {/* Nota: En producción usarás el componente Image de Next.js.
+ Para este ejemplo rápido uso img estándar con una URL externa */}
+ 
+
+
+
+
+ Colección {new Date().getFullYear()}
++ La Despensa. +
++ Explora nuestra selección de productos auténticos, importados directamente para tu cocina. +
+
+
+
+
+
+
+
+
+
+
+ {menuCategories.map((cat) => (
+
+ ))}
+
+
+ Ver:
+
+
+
+ {filteredProducts.map((product, index) => (
+
+ ) : (
+
+
+ )}
+
+ No encontramos productos en esta categoría.
+ +
+
+ ¿Buscas algo específico?
+ + WA + Consultar disponibilidad en tienda + +
+
+ );
+}
\ No newline at end of file
diff --git a/src/components/ui/ProductCard.tsx b/src/components/ui/ProductCard.tsx
new file mode 100644
index 0000000..30f956f
--- /dev/null
+++ b/src/components/ui/ProductCard.tsx
@@ -0,0 +1,59 @@
+// src/components/ui/ProductCard.tsx
+import Image from "next/image";
+import Link from "next/link";
+import { Plus } from "lucide-react";
+
+interface ProductCardProps {
+ id: string;
+ title: string;
+ category: string;
+ price: number;
+ imageUrl: string;
+ index?: number; // Para escalonar animaciones si queremos
+}
+
+export default function ProductCard({ id, title, category, price, imageUrl, index = 1 }: ProductCardProps) {
+ return (
+
+ {/* Contenedor de Imagen (Gris pálido, bordes muy redondos) */}
+
+
+
+ {/* Repetimos el contenido suficientes veces para cubrir pantallas grandes */}
+ {[...Array(10)].map((_, i) => (
+
+ Orgánico • Fresco • Importado • Local
+
+ ))}
+
+
+
+ {/* Número de índice estilo editorial */}
+
+ {index.toString().padStart(2, '0')}
+
+
+ {/* Botón flotante "Quick Add" (aparece en hover) */}
+
+
+ {/* Imagen del Producto */}
+
+
+ {/* Información del Producto */}
+
+
+
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/src/components/ui/SectionHeader.tsx b/src/components/ui/SectionHeader.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/src/lib/supabase.ts b/src/lib/supabase.ts
new file mode 100644
index 0000000..6a7bfc7
--- /dev/null
+++ b/src/lib/supabase.ts
@@ -0,0 +1,28 @@
+import { createClient } from '@supabase/supabase-js';
+
+// 1. Usamos tus variables exactas
+const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL;
+// Aceptamos la clave nueva (sb_publishable) O la antigua (anon) por si acaso
+const supabaseKey = process.env.NEXT_PUBLIC_SUPABASE_PUBLISHABLE_DEFAULT_KEY || process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY;
+
+// 2. Verificación de seguridad
+if (!supabaseUrl || !supabaseKey) {
+ throw new Error(
+ 'Faltan las variables de entorno. Asegúrate de que tu archivo .env.local tenga NEXT_PUBLIC_SUPABASE_URL y NEXT_PUBLIC_SUPABASE_PUBLISHABLE_DEFAULT_KEY'
+ );
+}
+
+// 3. Crear cliente (Supabase detecta automáticamente si es sb_publishable o anon)
+export const supabase = createClient(supabaseUrl, supabaseKey);
+
+// Helper de imágenes
+export const getProductImageUrl = (imagePath: string | null) => {
+ if (!imagePath) return 'https://placehold.co/400x600/f8f8f8/e0e0e0?text=Sin+Imagen';
+ if (imagePath.startsWith('http')) return imagePath;
+
+ const { data } = supabase.storage
+ .from('products')
+ .getPublicUrl(imagePath);
+
+ return data.publicUrl;
+};
\ No newline at end of file
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
new file mode 100644
index 0000000..24b9d74
--- /dev/null
+++ b/src/lib/utils.ts
@@ -0,0 +1,7 @@
+// src/lib/utils.ts
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+ return twMerge(clsx(inputs));
+}
\ No newline at end of file
diff --git a/src/store/cart-store.ts b/src/store/cart-store.ts
new file mode 100644
index 0000000..4eb2ed0
--- /dev/null
+++ b/src/store/cart-store.ts
@@ -0,0 +1,77 @@
+import { create } from 'zustand';
+import { persist, createJSONStorage } from 'zustand/middleware';
+import { Product, CartItem } from '@/types';
+
+interface CartState {
+ items: CartItem[];
+ isOpen: boolean;
+ addItem: (product: Product, quantity?: number) => void;
+ removeItem: (productId: string) => void;
+ updateQuantity: (productId: string, quantity: number) => void;
+ clearCart: () => void;
+ toggleCart: () => void;
+ openCart: () => void;
+ closeCart: () => void;
+ // Getters
+ getTotalPrice: () => number;
+ getTotalItems: () => number;
+}
+
+export const useCartStore = create
+
+ + {title} +
++ {category} +
+
+
+ {new Intl.NumberFormat('es-ES', { style: 'currency', currency: 'EUR' }).format(price)}
+
+
+