// MamaK&BabyPunn — affiliate link-in-bio app. // Visitors can toggle the Tweaks panel (bottom-right ✨ button) to swap // palette / font / sticker density. Choices persist in localStorage. const { useState, useMemo } = React; const PALETTES = { sage: { name: "Sage", bg1: "#EBEEE3", bg2: "#DFE5D3", card: "#F7F8F2", ink: "#2E332A", inkSoft: "#7E8576", accent: "#5A6B4E", accent2: "#C8B89A", accent3: "#B9C8A8", accent4: "#C2C9BA", chipBg: "#F7F8F2", ring: ["#5A6B4E", "#B9C8A8", "#C8B89A", "#C2C9BA", "#D6CFBE", "#5A6B4E"] }, cream: { name: "Cream", bg1: "#FAF7F2", bg2: "#F3EEE6", card: "#FFFFFF", ink: "#2A2520", inkSoft: "#8C857C", accent: "#1A1A1A", accent2: "#E8C9A8", accent3: "#D5DCC6", accent4: "#CDD4DE", chipBg: "#FFFFFF", ring: ["#E8C9A8", "#EBD9C2", "#D5DCC6", "#CDD4DE", "#E6D2DE", "#E8C9A8"] }, paper: { name: "Paper", bg1: "#FFFFFF", bg2: "#F6F6F4", card: "#FFFFFF", ink: "#111111", inkSoft: "#8A8A86", accent: "#111111", accent2: "#F2C8B4", accent3: "#CFE0D0", accent4: "#C9D4E3", chipBg: "#FFFFFF", ring: ["#F2C8B4", "#F0DCC2", "#E8E0C0", "#CFE0D0", "#C9D4E3", "#E6CCDB"] }, sand: { name: "Sand", bg1: "#F2EDE3", bg2: "#E8E0D0", card: "#FBF8F2", ink: "#3A322A", inkSoft: "#9A8E7E", accent: "#3A322A", accent2: "#D6B89A", accent3: "#C8C6B0", accent4: "#BFC2BC", chipBg: "#FBF8F2", ring: ["#D6B89A", "#DDC9AC", "#C8C6B0", "#BFC2BC", "#D2BDC4", "#D6B89A"] }, ink: { name: "Ink", bg1: "#F7F7F5", bg2: "#EEEEEC", card: "#FFFFFF", ink: "#0D0D0D", inkSoft: "#7A7A78", accent: "#0D0D0D", accent2: "#E0B89A", accent3: "#BFC9B8", accent4: "#B8C2CC", chipBg: "#FFFFFF", ring: ["#0D0D0D", "#E0B89A", "#BFC9B8", "#B8C2CC", "#C9B9C5", "#0D0D0D"] } }; const FONT_PAIRS = { fredoka: { display: "'Fredoka', 'Mali', system-ui", body: "'Mali', 'Fredoka', system-ui", name: "Fredoka + Mali" }, bubble: { display: "'Baloo 2', 'Mali', system-ui", body: "'Mali', 'Baloo 2', system-ui", name: "Baloo + Mali" }, cherry: { display: "'Chewy', 'Mali', system-ui", body: "'Mali', system-ui", name: "Chewy + Mali" }, serif: { display: "'Fraunces', 'Mali', serif", body: "'Mali', serif", name: "Fraunces + Mali" } }; // ───────────────────────────────────────────────────────────── function Avatar({ palette }) { const ring = palette.ring; const conic = ring.map((c, i) => `${c} ${(i / ring.length) * 360}deg ${((i + 1) / ring.length) * 360}deg`).join(", "); return (
🤱
); } // ───────────────────────────────────────────────────────────── function ShopeeIcon({ color = "#EE4D2D" }) { return ( ); } function InstagramIcon({ color = "#E1306C" }) { return ( ); } function TikTokIcon({ color = "#111" }) { return ( ); } function SocialRow() { const links = [ { id: "shopee", label: "Shopee", color: "#EE4D2D", url: "#", Icon: ShopeeIcon }, { id: "instagram", label: "Instagram", color: "#E1306C", url: "#", Icon: InstagramIcon }, { id: "tiktok", label: "TikTok", color: "#111111", url: "#", Icon: TikTokIcon } ]; return (
{links.map(l => ( {l.label} ))}
); } // ───────────────────────────────────────────────────────────── function ProductCard({ p, palette, isFav, onFav }) { const platform = window.PLATFORMS[p.platform]; const discount = p.original ? Math.round((1 - p.price / p.original) * 100) : 0; return (
{p.emoji}
{p.badge &&
{p.badge}
} {discount > 0 &&
-{discount}%
}
{p.name_th}
{p.name_en}
฿{p.price} {p.original && ฿{p.original}}
{platform.name}
 ); } // ───────────────────────────────────────────────────────────── function ShopLink({ slotId, palette }) { const KEY = "shop-link-" + slotId; const [url, setUrl] = useState(() => localStorage.getItem(KEY) || ""); const [editing, setEditing] = useState(false); const [draft, setDraft] = useState(url); const save = () => { const v = draft.trim(); setUrl(v); if (v) localStorage.setItem(KEY, v); else localStorage.removeItem(KEY); setEditing(false); }; const clear = () => { setUrl(""); setDraft(""); localStorage.removeItem(KEY); setEditing(false); }; const platform = useMemo(() => { if (!url) return null; const u = url.toLowerCase(); if (u.includes("shopee")) return { name: "Shopee", color: "#EE4D2D" }; if (u.includes("lazada")) return { name: "Lazada", color: "#3D2C8D" }; if (u.includes("tiktok")) return { name: "TikTok", color: "#111111" }; if (u.includes("instagram")) return { name: "Instagram", color: "#E1306C" }; return { name: "Shop", color: palette.accent }; }, [url, palette]); if (editing) { return (
setDraft(e.target.value)} onKeyDown={e => { if (e.key === "Enter") save(); if (e.key === "Escape") setEditing(false); }}/>
{url && }
); } if (!url) { return ( ); } return (
ช้อปที่ {platform.name} →
); } // ───────────────────────────────────────────────────────────── function VideoReviewSlot({ slotId, palette, caption }) { const KEY = "vid-review-" + slotId; const [url, setUrl] = useState(() => localStorage.getItem(KEY) || ""); const [editing, setEditing] = useState(false); const [draft, setDraft] = useState(url); const save = () => { const v = draft.trim(); setUrl(v); if (v) localStorage.setItem(KEY, v); else localStorage.removeItem(KEY); setEditing(false); }; const clear = () => { setUrl(""); setDraft(""); localStorage.removeItem(KEY); }; const embed = useMemo(() => { if (!url) return null; const u = url.trim(); let m = u.match(/(?:youtu\.be\/|youtube\.com\/(?:watch\?v=|shorts\/|embed\/))([\w-]{11})/); if (m) return { kind: "iframe", src: `https://www.youtube.com/embed/${m[1]}` }; m = u.match(/tiktok\.com\/[@\w.-]+\/video\/(\d+)/); if (m) return { kind: "iframe", src: `https://www.tiktok.com/embed/v2/${m[1]}` }; m = u.match(/instagram\.com\/(?:reel|p)\/([\w-]+)/); if (m) return { kind: "iframe", src: `https://www.instagram.com/p/${m[1]}/embed` }; if (/\.(mp4|webm|mov)(\?|$)/i.test(u)) return { kind: "video", src: u }; return { kind: "link", src: u }; }, [url]); return (
{!url ? ( editing ? (
setDraft(e.target.value)} onKeyDown={e => { if (e.key === "Enter") save(); if (e.key === "Escape") setEditing(false); }}/>
) : ( ) ) : ( <>
{embed.kind === "iframe" && (