/* global React, ReactDOM, Header, Hero, Values, CategoryTiles, Editorial, Featured, Catalog, Product, Cart, Footer, useTweaks, TweaksPanel, TweakSection, TweakRadio, TweakColor, TweakText, TweakSelect */
const { useState, useEffect, useRef } = React;
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
"brandName": "Comptoir Indigo",
"tagline": "TEXTILES D'ART · DEPUIS LE RAJASTHAN",
"headingFont": "Playfair Display",
"bodyFont": "Manrope",
"paper": "#ffffff",
"ink": "#1a1a1a",
"accent": "#cc4535",
"announce": "Livraison offerte en France dès 150 € · Made in Jaipur with ♥"
}/*EDITMODE-END*/;
function Announce({ text }) {
return {text}
;
}
function urlToRoute(pathname) {
const parts = pathname.split("/").filter(Boolean);
if (!parts.length) return { page: "home" };
if (parts[0] === "catalogue") return { page: "catalog", category: parts[1] || "all" };
if (parts[0] === "produit" && parts[1]) return { page: "product", id: parts[1] };
return { page: "home" };
}
function routeToUrl(route) {
if (route.page === "home") return "/";
if (route.page === "catalog") return route.category === "all" ? "/catalogue" : `/catalogue/${route.category}`;
if (route.page === "product") return `/produit/${route.id}`;
return "/";
}
function App() {
const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
const [route, setRoute] = useState(() => urlToRoute(window.location.pathname));
const [cart, setCart] = useState([]);
const [cartOpen, setCartOpen] = useState(false);
// Sync browser history ↔ route
useEffect(() => {
const onPop = () => setRoute(urlToRoute(window.location.pathname));
window.addEventListener("popstate", onPop);
return () => window.removeEventListener("popstate", onPop);
}, []);
// Apply CSS vars from tweaks
useEffect(() => {
const root = document.documentElement;
root.style.setProperty("--paper", t.paper);
root.style.setProperty("--ink", t.ink);
root.style.setProperty("--indigo", t.accent);
root.style.setProperty("--serif", `'${t.headingFont}', Georgia, serif`);
root.style.setProperty("--sans", `'${t.bodyFont}', 'Helvetica Neue', sans-serif`);
}, [t]);
// Load Google Fonts dynamically based on tweak
useEffect(() => {
const fonts = [t.headingFont, t.bodyFont].map((f) => f.replace(/ /g, "+") + ":wght@300;400;500;600;700");
const id = "tw-fonts";
const existing = document.getElementById(id);
if (existing) existing.remove();
const link = document.createElement("link");
link.id = id;
link.rel = "stylesheet";
link.href = `https://fonts.googleapis.com/css2?family=${fonts.join("&family=")}&display=swap`;
document.head.appendChild(link);
}, [t.headingFont, t.bodyFont]);
// Navigate + update URL + scroll to top
const navigate = (next) => {
const url = routeToUrl(next);
window.history.pushState(null, "", url);
setRoute(next);
window.scrollTo({ top: 0, behavior: "instant" });
};
const addToCart = (item) => {
setCart((prev) => {
const ex = prev.find((p) => p.id === item.id);
if (ex) return prev.map((p) => p.id === item.id ? { ...p, qty: p.qty + item.qty } : p);
return [...prev, item];
});
setCartOpen(true);
};
const setQty = (id, qty) => setCart((prev) => prev.map((p) => p.id === id ? { ...p, qty } : p));
const removeItem = (id) => setCart((prev) => prev.filter((p) => p.id !== id));
const cartCount = cart.reduce((sum, it) => sum + it.qty, 0);
const brand = { name: t.brandName, tagline: t.tagline };
return (
<>
setCartOpen(true)} brand={brand} />
{route.page === "home" && (
)}
{route.page === "catalog" && (
)}
{route.page === "product" && (
)}
setCartOpen(false)} items={cart} setQty={setQty} removeItem={removeItem} navigate={navigate} />
{/* Floating WhatsApp */}
WhatsApp
setTweak("brandName", v)} />
setTweak("tagline", v)} />
setTweak("announce", v)} />
setTweak("headingFont", v)} options={[
"Cormorant Garamond", "Italiana", "Tenor Sans", "Playfair Display", "DM Serif Display", "Marcellus", "Bodoni Moda"
]} />
setTweak("bodyFont", v)} options={[
"Outfit", "Manrope", "Work Sans", "DM Sans", "Lato", "Nunito Sans"
]} />
setTweak("paper", v)} options={["#faf6f0", "#f4ede0", "#f6f3ec", "#ffffff", "#ede4d0"]} />
setTweak("ink", v)} options={["#1a1a1a", "#0e0e0e", "#2a2a2a", "#3d2820"]} />
setTweak("accent", v)} options={["#1f3a52", "#b85c3f", "#1f6878", "#5b7a4a", "#c98a2a", "#86304f"]} />
);
}
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render();