// Kotleto · MENU section — card grid with category tabs, search, animated add-to-cart function MenuSection({ accent = "#D9461E" }) { const { lang } = useLang(); const cart = useCart(); const [cat, setCat] = useState("all"); const [q, setQ] = useState(""); const [flying, setFlying] = useState(null); // for add animation const [items, setItems] = useState(() => { const db = LocalDB.snapshot(); return Array.isArray(db.adminMenu) ? db.adminMenu : MENU; }); useEffect(() => { const sync = db => setItems(Array.isArray(db.adminMenu) ? db.adminMenu : MENU); const unsubscribe = LocalDB.subscribe(sync); sync(LocalDB.snapshot()); return unsubscribe; }, []); const filtered = useMemo(() => { let m = items.filter(item => item.active !== false); if (cat !== "all") m = m.filter(x => x.cat === cat); if (q.trim()) { const Q = q.toLowerCase(); m = m.filter(x => (x.fa.name + x.en.name + x.fa.desc + x.en.desc).toLowerCase().includes(Q)); } return m; }, [items, cat, q]); const handleAdd = (item, e) => { cart.add({ id: item.id, name: item[lang]?.name || item.fa.name, price: item.price, emoji: item.emoji, color: item.color, photo: KotletoImages.resolve(item.photo, item.id) }); notify(lang === "fa" ? item.fa.name + " به سبد اضافه شد" : item.en.name + " added to cart"); // pop animation const rect = e.currentTarget.getBoundingClientRect(); setFlying({ x: rect.left, y: rect.top, color: item.color, key: Date.now() }); setTimeout(() => setFlying(null), 700); }; return ( ); } // Identical local image paths are shared by menu, admin and cart. const ITEM_PHOTOS = KotletoImages.menu; function MenuCard({ item, idx, onAdd, accent }) { const { lang } = useLang(); const [favorites, saveFavorites] = useStoredValue("favorites", []); const liked = favorites.includes(item.id); const data = item[lang] || item.fa; const photo = KotletoImages.resolve(item.photo, item.id); // alternating tilt const tilt = (idx % 3 === 0) ? -1.2 : (idx % 3 === 1) ? 0.8 : -0.4; const toggleLiked = () => { const next = !liked; saveFavorites(current => next ? [...new Set([...current, item.id])] : current.filter(id => id !== item.id)); notify(next ? (lang === "fa" ? "به علاقه‌مندی‌ها اضافه شد" : "Added to favorites") : (lang === "fa" ? "از علاقه‌مندی‌ها حذف شد" : "Removed from favorites")); }; return (
{ e.currentTarget.style.transform = `rotate(0deg) translateY(-4px)`; e.currentTarget.style.boxShadow = "0 12px 0 0 var(--ink)"; }} onMouseLeave={e => { e.currentTarget.style.transform = `rotate(${tilt}deg)`; e.currentTarget.style.boxShadow = "0 6px 0 0 var(--ink)"; }} > {/* image */}
{data.name}{ e.target.style.display="none"; }} /> {/* badge & like */}
{item.badge && {pick(item.badge, lang)}} {item.spice > 0 && ( {Array(item.spice).fill().map((_, i) => )} )}
{/* emoji corner badge */}
{item.emoji}
{/* body */}

{data.name}

{data.desc}

); } window.ITEM_PHOTOS = ITEM_PHOTOS; window.MenuSection = MenuSection; window.MenuCard = MenuCard;