Insert HTML text here.
tailwind.config = { theme: { extend: { colors: { brand: { 50: '#fff7ed', 100: '#ffedd5', 500: '#f97316', 600: '#ea580c', 900: '#7c2d12', } } } } }
const { useState, useMemo, useEffect } = React;
// Data Multi-Produk Dummy const productsDB = [ { id: 1, name: "Premium Kibble Adult Dog", category: "Makanan Anjing", shortDesc: "Nutrisi seimbang dengan Omega 3 & 6.", description: "Nutrisi seimbang untuk anjing kesayangan Anda. Diperkaya dengan Omega 3 & 6 untuk bulu yang sehat, serta protein berkualitas tinggi untuk otot yang kuat.", flavors: ["Chicken & Rice", "Beef & Vegetables"], weights: [ { id: 'w1', label: "1 Kg", weightInGrams: 1000, price: 65000 }, { id: 'w2', label: "5 Kg", weightInGrams: 5000, price: 295000 }, { id: 'w3', label: "10 Kg", weightInGrams: 10000, price: 550000 } ], image: "https://images.unsplash.com/photo-1589924691995-400dc9ce8071?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" }, { id: 2, name: "Kitten Wet Food Pouch", category: "Makanan Kucing", shortDesc: "Potongan daging asli dengan kuah lezat.", description: "Makanan basah premium untuk anak kucing (kitten). Terbuat dari potongan daging ikan asli dengan kuah kaldu yang meningkatkan nafsu makan dan hidrasi.", flavors: ["Tuna & Chicken", "Salmon Mousse"], weights: [ { id: 'w4', label: "85 gram", weightInGrams: 85, price: 15000 }, { id: 'w5', label: "Box (12 Pouch)", weightInGrams: 1020, price: 170000 } ], image: "https://images.unsplash.com/photo-1583337130417-3346a1be7dee?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" }, { id: 3, name: "Dental Sticks Treats", category: "Cemilan & Vitamin", shortDesc: "Membersihkan karang gigi dan menyegarkan nafas.", description: "Cemilan lezat yang diformulasikan khusus untuk menjaga kesehatan gigi anjing Anda. Bentuk bintangnya membantu membersihkan sela-sela gigi saat dikunyah.", flavors: ["Mint & Green Tea", "Milk & Calcium"], weights: [ { id: 'w6', label: "150 gram", weightInGrams: 150, price: 45000 }, { id: 'w7', label: "500 gram", weightInGrams: 500, price: 125000 } ], image: "https://images.unsplash.com/photo-1623341214825-9f4f963727da?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" } ];
// Format Rupiah Global const formatRupiah = (number) => { return new Intl.NumberFormat('id-ID', { style: 'currency', currency: 'IDR', minimumFractionDigits: 0 }).format(number); };
function App() { // State Navigasi const [currentView, setCurrentView] = useState('home'); // 'home' | 'productDetail' const [selectedProduct, setSelectedProduct] = useState(null);
// State Keranjang const [cart, setCart] = useState([]); const [isCartOpen, setIsCartOpen] = useState(false); const [isCheckoutMocks, setIsCheckoutMocks] = useState(false);
// Perhitungan Keranjang const cartTotal = useMemo(() => cart.reduce((total, item) => total + item.price, 0), [cart]); const cartTotalWeight = useMemo(() => cart.reduce((total, item) => total + item.weightInGrams, 0), [cart]);
const removeFromCart = (cartId) => { setCart(cart.filter(item => item.cartId !== cartId)); };
const handleCheckout = () => { setIsCheckoutMocks(true); setTimeout(() => { alert("Simulasi Integrasi Xendit!\n\nDi aplikasi asli, Anda akan diarahkan ke layar pembayaran untuk membayar: " + formatRupiah(cartTotal) + "\nTotal Berat Pengiriman: " + (cartTotalWeight/1000).toFixed(1) + " Kg"); setIsCheckoutMocks(false); setCart([]); setIsCartOpen(false); setCurrentView('home'); }, 1500); };
// Menavigasi ke Detail Produk const goToProductDetail = (product) => { setSelectedProduct(product); setCurrentView('productDetail'); window.scrollTo(0, 0); };
return (
{/* --- NAVBAR --- */}
{/* --- MAIN CONTENT ROUTING --- */}
{/* --- FOOTER --- */}
{/* --- CART DRAWER --- */} {isCartOpen && (
setIsCartOpen(false)}>
Keranjang Belanja
{cart.length === 0 ? (
Keranjang Anda masih kosong.
) : (
-
{cart.map((item) => (
-
{item.name}
{formatRupiah(item.price)}
{item.flavor} | {item.weightLabel}
Qty: 1
))}
)}
{cart.length > 0 && (
Estimasi Berat Total
{(cartTotalWeight / 1000).toFixed(2)} Kg
Subtotal Belanja
{formatRupiah(cartTotal)}
Ongkos kirim dihitung di halaman berikutnya (API RajaOngkir).
{/* Simulasi Logo Bank/E-Wallet */}
)}
)}
); }
/* --- COMPONENT: HOME VIEW --- */ function HomeView({ products, onProductClick, formatRupiah, onViewAll }) { return (
{/* Hero Banner */}
Diskon Spesial 20%
Makanan Sehat untuk Teman Setia Anda.
Paws & Co. menyediakan makanan anjing dan kucing premium, kaya nutrisi, dan disukai hewan peliharaan. Kirim ke seluruh Indonesia.
{/* Product Grid */}
Katalog Produk
Pilih yang terbaik untuk anabul kesayangan.
{products.map(product => (
onProductClick(product)} class="bg-white rounded-2xl shadow-sm hover:shadow-xl transition-shadow duration-300 overflow-hidden cursor-pointer border border-gray-100 group">
{product.category}
{product.name}
{product.shortDesc}
Mulai dari
{formatRupiah(product.weights[0].price)}
))}
{/* Tombol Lihat Semua Produk */}
); }
/* --- COMPONENT: ALL PRODUCTS VIEW --- */ function AllProductsView({ products, onProductClick, formatRupiah }) { // Mengambil kategori unik dari data produk const [activeCategory, setActiveCategory] = useState('Semua'); const categories = ['Semua', ...new Set(products.map(p => p.category))];
// Logika filter produk const filteredProducts = activeCategory === 'Semua' ? products : products.filter(p => p.category === activeCategory);
return (
Semua Produk
Temukan makanan dan cemilan terbaik untuk hewan peliharaan Anda berdasarkan kategori.
{/* Filter Tabs */}
{categories.map(category => (
))}
{/* Product Grid */} {filteredProducts.length === 0 ? (
Tidak ada produk dalam kategori ini.
) : (
{filteredProducts.map(product => (
onProductClick(product)} class="bg-white rounded-2xl shadow-sm hover:shadow-xl transition-shadow duration-300 overflow-hidden cursor-pointer border border-gray-100 group">
{product.category}
{product.name}
{product.shortDesc}
Mulai dari
{formatRupiah(product.weights[0].price)}
))}
)}
); }
/* --- COMPONENT: PRODUCT DETAIL VIEW --- */ function ProductDetailView({ product, onBack, formatRupiah, onAddToCart }) { const [selectedFlavor, setSelectedFlavor] = useState(product.flavors[0]); const [selectedWeight, setSelectedWeight] = useState(product.weights[0]);
return (
{/* Breadcrumb / Back Button */}
{/* Product Image */}
{/* Product Info & Controls */}
{product.category}
{product.name}
{product.description}
{formatRupiah(selectedWeight.price)}
{/* Flavor Variant */}
1. Pilih Rasa
{product.flavors.map(flavor => (
))}
{/* Weight Variant */}
2. Pilih Ukuran/Berat
{product.weights.map(weight => (
))}
Berat aktual untuk ongkir: {selectedWeight.weightInGrams} gram
{/* Action */}
); }
const root = ReactDOM.createRoot(document.getElementById('root')); root.render();
