import { useState, useEffect } from "react";
import Header from "@/components/Header";
import CategoryFilter from "@/components/CategoryFilter";
import ProductCard, { Product } from "@/components/ProductCard";
import Cart, { CartItem } from "@/components/Cart";
import Footer from "@/components/Footer";
import { toast } from "sonner";
// Mock products data
const PRODUCTS: Product[] = [
// Roupas
{
id: "1",
name: "Camiseta Premium Cotton",
price: 89.90,
category: "Roupas",
description: "Camiseta 100% algodão com ajuste perfeito"
},
{
id: "2",
name: "Jaqueta Jeans Clássica",
price: 249.90,
category: "Roupas",
image: "https://images.unsplash.com/photo-1551028719-00167b16eac5?w=500&h=500&fit=crop",
description: "Jaqueta jeans durável e estilosa"
},
{
id: "3",
name: "Calça Cargo Moderna",
price: 179.90,
category: "Roupas",
image: "https://images.unsplash.com/photo-1473966968600-fa801b869a1a?w=500&h=500&fit=crop",
description: "Calça cargo com múltiplos bolsos"
},
{
id: "4",
name: "Moletom Oversized",
price: 159.90,
category: "Roupas",
image: "https://images.unsplash.com/photo-1556821840-3a63f95609a7?w=500&h=500&fit=crop",
description: "Moletom confortável e moderno"
},
// Calçados
{
id: "5",
name: "Tênis Running Pro",
price: 299.90,
category: "Calçados",
image: "https://images.unsplash.com/photo-1542291026-7eec264c27ff?w=500&h=500&fit=crop",
description: "Tênis ideal para corridas e treinos"
},
{
id: "6",
name: "Bota Chelsea Couro",
price: 349.90,
category: "Calçados",
image: "https://images.unsplash.com/photo-1608256246200-53e635b5b65f?w=500&h=500&fit=crop",
description: "Bota elegante em couro legítimo"
},
{
id: "7",
name: "Sandália Slide Comfort",
price: 79.90,
category: "Calçados",
image: "https://images.unsplash.com/photo-1603487742131-4160ec999306?w=500&h=500&fit=crop",
description: "Sandália perfeita para o dia a dia"
},
{
id: "8",
name: "Sapatênis Casual",
price: 189.90,
category: "Calçados",
image: "https://images.unsplash.com/photo-1533867617858-e7b97e060509?w=500&h=500&fit=crop",
description: "Sapatênis versátil e confortável"
},
// Acessórios
{
id: "9",
name: "Relógio Digital Sport",
price: 199.90,
category: "Acessórios",
image: "https://images.unsplash.com/photo-1523275335684-37898b6baf30?w=500&h=500&fit=crop",
description: "Relógio esportivo com múltiplas funções"
},
{
id: "10",
name: "Óculos de Sol UV400",
price: 149.90,
category: "Acessórios",
image: "https://images.unsplash.com/photo-1572635196237-14b3f281503f?w=500&h=500&fit=crop",
description: "Proteção UV total com estilo"
},
{
id: "11",
name: "Mochila Urban Tech",
price: 229.90,
category: "Acessórios",
image: "https://images.unsplash.com/photo-1553062407-98eeb64c6a62?w=500&h=500&fit=crop",
description: "Mochila com compartimento para laptop"
},
{
id: "12",
name: "Carteira Minimalista",
price: 69.90,
category: "Acessórios",
image: "https://images.unsplash.com/photo-1627123424574-724758594e93?w=500&h=500&fit=crop",
description: "Carteira slim e elegante"
}
];
const CATEGORIES = ["Todos", "Roupas", "Calçados", "Acessórios"];
const Index = () => {
const [activeCategory, setActiveCategory] = useState("Todos");
const [cartItems, setCartItems] = useState([]);
const [isCartOpen, setIsCartOpen] = useState(false);
const [searchQuery, setSearchQuery] = useState("");
// Load cart from localStorage
useEffect(() => {
const savedCart = localStorage.getItem("novix-cart");
if (savedCart) {
setCartItems(JSON.parse(savedCart));
}
}, []);
// Save cart to localStorage
useEffect(() => {
localStorage.setItem("novix-cart", JSON.stringify(cartItems));
}, [cartItems]);
const handleAddToCart = (product: Product) => {
setCartItems((prev) => {
const existingItem = prev.find((item) => item.id === product.id);
if (existingItem) {
return prev.map((item) =>
item.id === product.id
? { ...item, quantity: item.quantity + 1 }
: item
);
}
return [...prev, { ...product, quantity: 1 }];
});
toast.success(`${product.name} adicionado ao carrinho!`);
};
const handleUpdateQuantity = (id: string, quantity: number) => {
if (quantity === 0) {
handleRemoveItem(id);
return;
}
setCartItems((prev) =>
prev.map((item) => (item.id === id ? { ...item, quantity } : item))
);
};
const handleRemoveItem = (id: string) => {
setCartItems((prev) => prev.filter((item) => item.id !== id));
toast.info("Item removido do carrinho");
};
const filteredProducts = PRODUCTS.filter((product) => {
const matchesCategory = activeCategory === "Todos" || product.category === activeCategory;
const matchesSearch = product.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
product.description.toLowerCase().includes(searchQuery.toLowerCase());
return matchesCategory && matchesSearch;
});
const cartItemCount = cartItems.reduce((sum, item) => sum + item.quantity, 0);
return (
setIsCartOpen(true)}
onSearch={setSearchQuery}
/>
{/* Hero Section */}
{/* Category Filter */}
{filteredProducts.length === 0 ? (
) : (
{/* Cart Sidebar */}
setIsCartOpen(false)}
items={cartItems}
onUpdateQuantity={handleUpdateQuantity}
onRemoveItem={handleRemoveItem}
/>
);
};
export default Index;
Bem-vindo à Novix Store
Descubra as últimas tendências em roupas, calçados e acessórios
Nenhum produto encontrado
{filteredProducts.map((product) => (
)}