[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_26":27,"_28":29,"_30":12,"_31":12,"_32":12,"_33":12,"_34":12,"_35":12,"_36":37},"routes/canvas.shared.$sharedTextdocId",{"_9":10,"_11":12},"sharedTextdoc",{"_13":14,"_15":-7,"_16":17,"_18":19,"_20":21,"_22":23,"_24":12,"_25":12},"isAuthenticated",false,"sharedTextdocId","690b29e118008191a647be0f1491218b","versionInt","title","Ricard Fc — Boutique E-commerce (react + Tailwind)","type","code/react","content","import React, { useState, useEffect, createContext, useContext } from 'react';\n\n// Ricard FC — Single-file React app (export default App)\n// Requirements: Tailwind CSS must be configured in the project.\n// Usage: create-react-app or Vite + Tailwind. This file is a single-page app component.\n\n// ------------------------- Mock product data -------------------------\nconst PRODUCTS = [\n {\n id: 'maillot-23',\n title: 'Maillot Ricard FC — Édition Classique',\n price: 59.0,\n sku: 'RFC-TS-01',\n description: 'Maillot officiel Ricard FC, 100% coton, sérigraphie bleu/jaune.',\n img: 'https://images.unsplash.com/photo-1520975911446-7b0b7b7c5a1b?auto=format&fit=crop&w=800&q=60',\n stock: 24,\n category: 'vêtements'\n },\n {\n id: 'verre-pastis',\n title: 'Verre à pastis Ricard FC (Lot de 2)',\n price: 19.0,\n sku: 'RFC-GL-02',\n description: 'Verres gravés Ricard FC — capacité 250 ml. Idéal pour l’apéro du match.',\n img: 'https://images.unsplash.com/photo-1523986371872-9d3ba2e2f642?auto=format&fit=crop&w=800&q=60',\n stock: 78,\n category: 'accessoires'\n },\n {\n id: 'poster-stade',\n title: 'Affiche vintage Ricard FC — Stade du Pastis',\n price: 29.0,\n sku: 'RFC-PT-03',\n description: 'Affiche format A2 — papier mat, tirage limité.',\n img: 'https://images.unsplash.com/photo-1503602642458-232111445657?auto=format&fit=crop&w=800&q=60',\n stock: 15,\n category: 'décoration'\n },\n {\n id: 'pack-apero',\n title: 'Pack Apéro Ricard FC',\n price: 39.0,\n sku: 'RFC-PK-04',\n description: 'Maillot mini + 2 verres + sticker — parfait pour offrir.',\n img: 'https://images.unsplash.com/photo-1544025162-d76694265947?auto=format&fit=crop&w=800&q=60',\n stock: 40,\n category: 'packs'\n }\n];\n\n// ------------------------- Cart context -------------------------\nconst CartContext = createContext();\nfunction useCart() {\n return useContext(CartContext);\n}\n\nfunction CartProvider({ children }) {\n const [cart, setCart] = useState(() => {\n try {\n const raw = localStorage.getItem('ricardfc_cart');\n return raw ? JSON.parse(raw) : [];\n } catch (e) {\n return [];\n }\n });\n\n useEffect(() => {\n localStorage.setItem('ricardfc_cart', JSON.stringify(cart));\n }, [cart]);\n\n const addToCart = (product, qty = 1) => {\n setCart(curr => {\n const found = curr.find(i => i.id === product.id);\n if (found) {\n return curr.map(i => i.id === product.id ? { ...i, qty: Math.min(i.qty + qty, product.stock) } : i);\n }\n return [...curr, { ...product, qty: Math.min(qty, product.stock) }];\n });\n };\n\n const updateQty = (productId, qty) => {\n setCart(curr => curr.map(i => i.id === productId ? { ...i, qty: Math.max(1, Math.min(qty, i.stock)) } : i));\n };\n\n const removeFromCart = (productId) => {\n setCart(curr => curr.filter(i => i.id !== productId));\n };\n\n const clearCart = () => setCart([]);\n\n const subtotal = cart.reduce((s, i) => s + i.price * i.qty, 0);\n const shipping = subtotal > 70 || subtotal === 0 ? 0 : 6.5; // free over 70€\n const tax = +(subtotal * 0.2).toFixed(2); // TVA 20%\n const total = +(subtotal + shipping + tax).toFixed(2);\n\n return (\n \n {children}\n \n );\n}\n\n// ------------------------- UI Helpers -------------------------\nfunction LogoSmall() {\n return (\n

RFC

Ricard FC

Boutique Officielle (fanmade)

\n );\n}\n\n// ------------------------- Main App -------------------------\nexport default function App() {\n const [query, setQuery] = useState('');\n const [category, setCategory] = useState('all');\n const [sort, setSort] = useState('featured');\n const [view, setView] = useState('home'); // home | product | cart | checkout | thanks\n const [selected, setSelected] = useState(null);\n const [showCartDrawer, setShowCartDrawer] = useState(false);\n\n const filtered = PRODUCTS.filter(p => (category === 'all' || p.category === category) && (p.title.toLowerCase().includes(query.toLowerCase()) || p.description.toLowerCase().includes(query.toLowerCase())));\n\n if (sort === 'price-asc') filtered.sort((a, b) => a.price - b.price);\n if (sort === 'price-desc') filtered.sort((a, b) => b.price - a.price);\n\n return (\n \n

\n \n

\n \n \n \n \n \n

\n\n

\n setQuery(e.target.value)} className=\"w-full border rounded-full px-4 py-2 shadow-sm\" placeholder=\"Recherche — ex. maillot, verre...\" />\n

\n\n

\n \n \n

\n\n

\n \n\n

\n {filtered.map(p => (\n { setSelected(p); setView('product'); }} />\n ))}\n

\n\n \n\n

\n\n

\n \n );\n}\n\n// ------------------------- Components -------------------------\nfunction Hero() {\n return (\n

Bienvenue à la Boutique Ricard FC

Goodies, maillots, verres et packs pour supporter le club le plus rafraîchissant du monde. Livraison partout en France 🇫🇷

\n Voir le catalogue\n Offres\n

🍋

Ricard FC

\n );\n}\n\nfunction Features() {\n return (\n

Livraison

Gratuite à partir de 70€.

Paiement sécurisé

Simulation de paiement inclus - intégration Stripe possible.

Satisfait ou remboursé

Retour sous 14 jours.

\n );\n}\n\nfunction Footer() {\n return (\n \n );\n}\n\nfunction ProductCard({ product, onView }) {\n const { addToCart } = useCart();\n return (\n

{product.title}

{product.description}

{product.price.toFixed(2)} €

\n \n \n

\n );\n}\n\nfunction CartDrawer({ open, onClose, onCheckout }) {\n const { cart, updateQty, removeFromCart, subtotal, shipping, tax, total } = useCart();\n if (!open) return null;\n return (\n

Panier ({cart.length})

\n \n

\n {cart.length === 0 &&

Votre panier est vide.

}\n {cart.map(item => (\n

\n $\"\"$ \n

{item.title}

{item.price.toFixed(2)} €

\n updateQty(item.id, parseInt(e.target.value || '1'))} className=\"w-20 border rounded px-2 py-1\" min=\"1\" max={item.stock} />\n \n

\n ))}\n

\n\n

Sous-total{subtotal.toFixed(2)} €

Livraison{shipping.toFixed(2)} €

TVA (20%){tax.toFixed(2)} €

Total{total.toFixed(2)} €

\n \n \n

\n );\n}\n\nfunction ProductModal({ product, open, onClose }) {\n const { addToCart } = useCart();\n const [qty, setQty] = useState(1);\n\n useEffect(() => { setQty(1); }, [product]);\n if (!open || !product) return null;\n return (\n

{product.title}

{product.description}

{product.price.toFixed(2)} €

\n setQty(parseInt(e.target.value || '1'))} className=\"w-24 border rounded px-2 py-1\" />\n \n

Stock restant: {product.stock}

\n );\n}\n\nfunction CheckoutPage({ open, onBack, onSuccess }) {\n const { cart, subtotal, shipping, tax, total, clearCart } = useCart();\n const [step, setStep] = useState(0); // 0 = details, 1 = pay\n const [form, setForm] = useState({ name: '', email: '', address: '', city: '', zip: '' });\n const [processing, setProcessing] = useState(false);\n\n useEffect(() => { if (!open) { setStep(0); } }, [open]);\n\n if (!open) return null;\n\n const handlePay = async () => {\n // Simulated payment flow\n if (!form.name || !form.email || !form.address) { alert('Veuillez remplir vos coordonnées.'); return; }\n setProcessing(true);\n await new Promise(r => setTimeout(r, 1200));\n // In a real app, call Stripe/PayPal here\n setProcessing(false);\n clearCart();\n onSuccess();\n };\n\n return (\n

Paiement

Étape {step + 1} / 2

\n\n

\n {step === 0 && (\n

\n Nom complet\n setForm({ ...form, name: e.target.value })} className=\"w-full border rounded px-3 py-2 mt-1 mb-3\" />\n Email\n setForm({ ...form, email: e.target.value })} className=\"w-full border rounded px-3 py-2 mt-1 mb-3\" />\n Adresse\n setForm({ ...form, address: e.target.value })} className=\"w-full border rounded px-3 py-2 mt-1 mb-3\" />\n

\n setForm({ ...form, city: e.target.value })} className=\"w-1/2 border rounded px-3 py-2 mt-1\" />\n setForm({ ...form, zip: e.target.value })} className=\"w-1/2 border rounded px-3 py-2 mt-1\" />\n

\n \n \n

\n )}\n\n {step === 1 && (\n

Méthode de paiement (simulation)

Carte bancaire — entrée simulée

PayPal — simulation

\n \n \n

\n )}\n

\n\n

Récapitulatif

\n {cart.length === 0 &&

Votre panier est vide.

}\n {cart.map(it => (\n

{it.title}

{it.qty} × {it.price.toFixed(2)} €

{(it.qty * it.price).toFixed(2)} €

\n ))}\n\n

Sous-total{subtotal.toFixed(2)} €

Livraison{shipping.toFixed(2)} €

TVA{tax.toFixed(2)} €

Total{total.toFixed(2)} €

\n\n

\n );\n}\n\nfunction ThanksPage({ open, onClose }) {\n if (!open) return null;\n return (\n

Merci pour votre commande !

Votre commande a bien été enregistrée (simulation). Un email de confirmation vous sera envoyé si le paiement était réel.

\n \n

\n );\n}\n","access","public","isModerationBlocked","isAnonifyApiKeyDetected","dd",{"_38":39,"_40":41},"disablePrefetch",true,"shouldPrefetchAccount","shouldPrefetchUser","shouldPrefetchSystemHints","promoteCss","disableSSR","stripModulepreloadImports","statsigGateEvaluationsPromise",["P",37],"traceId","1679416704651418012","traceTime",1777462672824]