## File 2: app.js const { useState, useEffect, useCallback, useMemo, useRef } = React; // ============================================ // DATA PRODUK (MUDAH DIGANTI - UBAH IMAGE URL DI SINI) // ============================================ const PRODUCTS_DATA = [ { id: 1, name: "RTX 4060 Ti", category: "GPU", brand: "NVIDIA", price: 5500000, discount: 10, rating: 4.8, reviews: 245, stock: 12, image: "https://images.unsplash.com/photo-1587829191301-72f859854d1d?w=500&h=500&fit=crop", description: "Kartu grafis NVIDIA RTX 4060 Ti dengan arsitektur Ada terbaru. Cocok untuk gaming 1440p dan content creation.", specs: ["8GB GDDR6", "2535 MHz Boost", "PCIe 4.0"] }, { id: 2, name: "AMD Ryzen 7 7700X", category: "CPU", brand: "AMD", price: 4200000, discount: 8, rating: 4.9, reviews: 312, stock: 8, image: "https://images.unsplash.com/photo-1591290619762-b5b4d3f64000?w=500&h=500&fit=crop", description: "Prosesor AMD Ryzen 7 generasi terbaru dengan 8 core dan 16 thread. Performa tinggi untuk gaming dan multitasking.", specs: ["8 Core 16 Thread", "5.4 GHz Boost", "Socket AM5"] }, { id: 3, name: "Samsung 980 Pro 1TB", category: "SSD", brand: "Samsung", price: 1800000, discount: 5, rating: 4.7, reviews: 456, stock: 25, image: "https://images.unsplash.com/photo-1597872200969-2b65d56bd16b?w=500&h=500&fit=crop", description: "SSD NVMe ultra-cepat dengan kecepatan baca hingga 7GB/s. Ideal untuk gaming dan aplikasi profesional.", specs: ["1TB Capacity", "7GB/s Read", "PCIe 4.0"] }, { id: 4, name: "Corsair Vengeance RGB 32GB", category: "RAM", brand: "Corsair", price: 2100000, discount: 12, rating: 4.6, reviews: 189, stock: 15, image: "https://images.unsplash.com/photo-1597872200969-2b65d56bd16b?w=500&h=500&fit=crop", description: "RAM DDR5 32GB dengan RGB lighting yang dapat dikustomisasi. Performa tinggi untuk multitasking.", specs: ["32GB DDR5", "6000MHz", "RGB Lighting"] }, { id: 5, name: "ASUS ROG Strix Z790-E", category: "Motherboard", brand: "ASUS", price: 3500000, discount: 0, rating: 4.8, reviews: 167, stock: 6, image: "https://images.unsplash.com/photo-1589939705066-3d1a4a5b1d51?w=500&h=500&fit=crop", description: "Motherboard premium dengan socket Intel LGA1700. Fitur lengkap untuk enthusiast dan overclocker.", specs: ["LGA1700 Socket", "PCIe 5.0", "WiFi 6E"] }, { id: 6, name: "Laptop ASUS TUF Gaming F15", category: "Laptop", brand: "ASUS", price: 12500000, discount: 15, rating: 4.7, reviews: 98, stock: 5, image: "https://images.unsplash.com/photo-1588872657840-218e412ee5ff?w=500&h=500&fit=crop", description: "Laptop gaming dengan RTX 4060 dan Intel i7. Performa tinggi dengan desain tahan lama.", specs: ["RTX 4060", "Intel i7", "16GB RAM"] }, { id: 7, name: "Cooler Master Hyper 212", category: "Aksesoris", brand: "Cooler Master", price: 450000, discount: 20, rating: 4.5, reviews: 523, stock: 30, image: "https://images.unsplash.com/photo-1591290619762-b5b4d3f64000?w=500&h=500&fit=crop", description: "CPU cooler air yang efisien dengan desain tower. Kompatibel dengan berbagai socket.", specs: ["Tower Design", "PWM Fan", "Universal Mount"] }, { id: 8, name: "Logitech G Pro X Superlight", category: "Aksesoris", brand: "Logitech", price: 1200000, discount: 10, rating: 4.9, reviews: 678, stock: 20, image: "https://images.unsplash.com/photo-1527814050087-3793815479db?w=500&h=500&fit=crop", description: "Mouse gaming profesional dengan sensor 25600 DPI. Sangat ringan dan responsif.", specs: ["25600 DPI", "Wireless", "70 Hour Battery"] }, { id: 9, name: "RTX 4070 Super", category: "GPU", brand: "NVIDIA", price: 8900000, discount: 7, rating: 4.9, reviews: 234, stock: 4, image: "https://images.unsplash.com/photo-1587829191301-72f859854d1d?w=500&h=500&fit=crop", description: "Kartu grafis flagship untuk gaming 4K dan streaming profesional.", specs: ["12GB GDDR6X", "2610 MHz Boost", "PCIe 4.0"] }, { id: 10, name: "Intel Core i9-13900KS", category: "CPU", brand: "Intel", price: 6800000, discount: 5, rating: 4.8, reviews: 156, stock: 3, image: "https://images.unsplash.com/photo-1591290619762-b5b4d3f64000?w=500&h=500&fit=crop", description: "Prosesor Intel flagship dengan 24 core. Performa terbaik untuk content creation.", specs: ["24 Core 32 Thread", "6.0 GHz Boost", "LGA1700"] } ]; // ============================================ // KOMPONEN UTAMA // ============================================ // Loading Skeleton function ProductSkeleton() { return (
); } // Toast Notification function Toast({ message, type = 'success', onClose }) { useEffect(() => { const timer = setTimeout(onClose, 3000); return () => clearTimeout(timer); }, [onClose]); const bgColor = type === 'success' ? 'bg-green-500' : type === 'error' ? 'bg-red-500' : 'bg-blue-500'; const icon = type === 'success' ? 'fa-check-circle' : type === 'error' ? 'fa-exclamation-circle' : 'fa-info-circle'; return (
{message}
); } // Product Card function ProductCard({ product, onAddToCart, onViewDetail, onToggleWishlist, isInWishlist }) { const finalPrice = product.price - (product.price * product.discount / 100); return (
{/* Image Container */}
{product.name} {product.discount > 0 && (
-{product.discount}%
)}
{/* Content */}

{product.brand}

{product.name}

{/* Rating */}
{[...Array(5)].map((_, i) => ( ))}
({product.reviews})
{/* Price */}
Rp {finalPrice.toLocaleString('id-ID')} {product.discount > 0 && ( Rp {product.price.toLocaleString('id-ID')} )}

Stok: {product.stock}

{/* Buttons */}
); } // Filter Sidebar function FilterSidebar({ filters, onFilterChange, categories, brands }) { return (
{/* Category Filter */}

Kategori

{categories.map(cat => ( ))}
{/* Brand Filter */}

Brand

{brands.map(brand => ( ))}
{/* Price Filter */}

Harga

onFilterChange({ ...filters, priceMin: parseInt(e.target.value) })} className="w-full" />
onFilterChange({ ...filters, priceMax: parseInt(e.target.value) })} className="w-full" />
{/* Reset Button */}
); } // Navbar function Navbar({ cartCount, currentPage, onNavigate, searchQuery, onSearchChange }) { const [mobileMenuOpen, setMobileMenuOpen] = useState(false); return ( ); } // Footer function Footer() { return (