[{"_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","699f63d26488819191252a0144f31db7","versionInt","title","Ah Challenges – App Prototype (react)","type","code/react","content","import React, { useMemo, useState } from \"react\";\nimport { Button } from \"@/components/ui/button\";\nimport { Card, CardContent, CardHeader, CardTitle } from \"@/components/ui/card\";\nimport { Badge } from \"@/components/ui/badge\";\nimport { Separator } from \"@/components/ui/separator\";\nimport {\n Home,\n Trophy,\n Gift,\n User,\n QrCode,\n Sparkles,\n ArrowLeft,\n ArrowRight,\n CheckCircle2,\n Flame,\n ShieldCheck,\n Leaf,\n Heart,\n Timer,\n Camera,\n Video,\n} from \"lucide-react\";\n\nconst AH_BLUE_LIGHT = \"#34B6EE\";\nconst AH_BLUE = \"#00A6E7\";\nconst AH_BLUE_DARK = \"#007BB5\";\n\n// All images are hosted on Unsplash and should load reliably.\nconst imgHeader =\n \"https://images.unsplash.com/photo-1542838132-92c53300491e?auto=format&fit=crop&w=1600&q=80\";\nconst imgHealthy =\n \"https://images.unsplash.com/photo-1490645935967-10de6ba17061?auto=format&fit=crop&w=1400&q=80\";\nconst imgSustainable =\n \"https://images.unsplash.com/photo-1477511801984-4ad318ed9846?auto=format&fit=crop&w=1400&q=80\";\nconst imgStore =\n \"https://images.unsplash.com/photo-1604719312566-8912e9227c6a?auto=format&fit=crop&w=1400&q=80\";\n\nfunction cn(...classes: Array) {\n return classes.filter(Boolean).join(\" \");\n}\n\nfunction clamp(n: number, min: number, max: number) {\n return Math.min(max, Math.max(min, n));\n}\n\nfunction pct(part: number, whole: number) {\n if (whole <= 0) return 0;\n return clamp(Math.round((part / whole) * 100), 0, 100);\n}\n\nfunction xpNeeded(level: number) {\n const l = Math.max(1, Math.floor(level));\n return 100 + (l - 1) * 30;\n}\n\nexport const __test__ = { cn, clamp, pct, xpNeeded };\n\ntype Reward = {\n id: string;\n title: string;\n subtitle: string;\n tag: \"Gezond\" | \"Duurzaam\";\n value: string;\n};\n\ntype Step = {\n id: string;\n label: string;\n xp: number;\n kind: \"scan\" | \"check\";\n};\n\ntype Challenge = {\n id: string;\n levelGate: number;\n title: string;\n subtitle: string;\n estMin: number;\n cover: string;\n tags: Array<\"Gezond\" | \"Duurzaam\" | \"Snel\">;\n steps: Step[];\n reward: Reward;\n};\n\nfunction PrimaryButton(props: React.ComponentProps) {\n const { className = \"\", style, ...rest } = props;\n return (\n \n );\n}\n\nfunction SecondaryButton(props: React.ComponentProps) {\n const { className = \"\", style, ...rest } = props;\n return (\n \n );\n}\n\nfunction ProgressBar({ value }: { value: number }) {\n const v = clamp(value, 0, 100);\n return (\n

\n \n

\n );\n}\n\nfunction Tag({ label }: { label: string }) {\n const cls =\n label === \"Gezond\"\n ? \"border-emerald-200 bg-emerald-50 text-emerald-800\"\n : label === \"Duurzaam\"\n ? \"border-lime-200 bg-lime-50 text-lime-800\"\n : \"border-sky-200 bg-sky-50 text-sky-800\";\n return (\n \n {label}\n \n );\n}\n\nfunction Screen({ children }: { children: React.ReactNode }) {\n return (\n

\n {children}\n

\n );\n}\n\nfunction TopBar({\n title,\n left,\n right,\n}: {\n title: string;\n left?: React.ReactNode;\n right?: React.ReactNode;\n}) {\n return (\n

\n {left}\n

{title}

{right}

\n );\n}\n\ntype Tab = \"home\" | \"challenges\" | \"rewards\" | \"profile\";\n\nfunction BottomNav({\n tab,\n setTab,\n}: {\n tab: Tab;\n setTab: (t: Tab) => void;\n}) {\n const items: Array<{ id: Tab; label: string; icon: React.ReactNode }> = [\n { id: \"home\", label: \"Home\", icon: },\n { id: \"challenges\", label: \"Challenges\", icon: },\n { id: \"rewards\", label: \"Rewards\", icon: },\n { id: \"profile\", label: \"Profiel\", icon: },\n ];\n\n return (\n

\n {items.map((i) => {\n const active = tab === i.id;\n return (\n setTab(i.id)}\n className={cn(\n \"flex flex-col items-center gap-1 rounded-2xl px-2 py-2 text-[11px]\",\n active ? \"bg-black/[0.04]\" : \"hover:bg-black/[0.03]\"\n )}\n >\n \n {i.icon}\n \n \n {i.label}\n \n \n );\n })}\n

\n );\n}\n\ntype Route =\n | { name: \"tabs\" }\n | { name: \"challenge\"; id: string }\n | { name: \"reward\"; id: string };\n\nexport default function AHChallengesPrototype() {\n const [tab, setTab] = useState(\"home\");\n const [route, setRoute] = useState({ name: \"tabs\" });\n const [toast, setToast] = useState(null);\n\n const [level, setLevel] = useState(1);\n const [xp, setXp] = useState(30);\n const [streak, setStreak] = useState(2);\n\n const [pushOptIn, setPushOptIn] = useState(true);\n const [locationOptIn, setLocationOptIn] = useState(false);\n\n const [completed, setCompleted] = useState<\n Record>\n >({});\n const [earned, setEarned] = useState([]);\n\n const challenges: Challenge[] = useMemo(\n () => [\n {\n id: \"c1\",\n levelGate: 1,\n title: \"Groente Boost\",\n subtitle: \"Scan 2 groente-items en claim je korting.\",\n estMin: 6,\n cover: imgHealthy,\n tags: [\"Gezond\", \"Snel\"],\n steps: [\n { id: \"s1\", label: \"Scan groente/fruit QR\", xp: 25, kind: \"scan\" },\n {\n id: \"s2\",\n label: \"Scan nog een groente/fruit QR\",\n xp: 25,\n kind: \"scan\",\n },\n { id: \"s3\", label: \"Bevestig in de app\", xp: 10, kind: \"check\" },\n ],\n reward: {\n id: \"r1\",\n title: \"€1 korting\",\n subtitle: \"Groente & fruit (7 dagen)\",\n tag: \"Gezond\",\n value: \"€1\",\n },\n },\n {\n id: \"c2\",\n levelGate: 2,\n title: \"Duurzame Switch\",\n subtitle: \"Kies 1 duurzaam alternatief en verdien extra XP.\",\n estMin: 8,\n cover: imgSustainable,\n tags: [\"Duurzaam\"],\n steps: [\n { id: \"s1\", label: \"Scan product met keurmerk\", xp: 30, kind: \"scan\" },\n { id: \"s2\", label: \"Bekijk een korte tip\", xp: 10, kind: \"check\" },\n { id: \"s3\", label: \"Voeg toe aan je lijstje\", xp: 15, kind: \"check\" },\n ],\n reward: {\n id: \"r2\",\n title: \"10% korting\",\n subtitle: \"Duurzaam assortiment (7 dagen)\",\n tag: \"Duurzaam\",\n value: \"10%\",\n },\n },\n {\n id: \"c3\",\n levelGate: 3,\n title: \"Slimme Combo\",\n subtitle: \"Scan 3 items voor een snelle, gezonde maaltijd.\",\n estMin: 10,\n cover: imgStore,\n tags: [\"Gezond\", \"Duurzaam\"],\n steps: [\n { id: \"s1\", label: \"Scan volkoren basis\", xp: 20, kind: \"scan\" },\n {\n id: \"s2\",\n label: \"Scan eiwit (vega/kip/vis)\",\n xp: 20,\n kind: \"scan\",\n },\n { id: \"s3\", label: \"Scan groente\", xp: 20, kind: \"scan\" },\n { id: \"s4\", label: \"Bevestig je combo\", xp: 15, kind: \"check\" },\n ],\n reward: {\n id: \"r3\",\n title: \"Bonus deal\",\n subtitle: \"Gezonde maaltijd (7 dagen)\",\n tag: \"Gezond\",\n value: \"Bonus\",\n },\n },\n ],\n []\n );\n\n const levelNeed = xpNeeded(level);\n const levelProgress = pct(xp, levelNeed);\n\n function showToast(msg: string) {\n setToast(msg);\n window.setTimeout(() => setToast(null), 2000);\n }\n\n function isDone(chId: string, stepId: string) {\n return Boolean(completed[chId]?.[stepId]);\n }\n\n function setDone(chId: string, stepId: string, addXp: number) {\n setCompleted((prev) => {\n const next = { ...prev };\n next[chId] = { ...(next[chId] || {}), [stepId]: true };\n return next;\n });\n\n setXp((prevXp) => {\n let nextXp = prevXp + addXp;\n setLevel((prevLevel) => {\n const need = xpNeeded(prevLevel);\n if (nextXp >= need) {\n nextXp -= need;\n showToast(\"Level up! 🎉\");\n return prevLevel + 1;\n }\n return prevLevel;\n });\n return nextXp;\n });\n }\n\n function progressOf(ch: Challenge) {\n const done = ch.steps.filter((s) => isDone(ch.id, s.id)).length;\n return { done, total: ch.steps.length, pct: pct(done, ch.steps.length) };\n }\n\n function canClaim(ch: Challenge) {\n return ch.steps.every((s) => isDone(ch.id, s.id));\n }\n\n function claim(ch: Challenge) {\n if (!canClaim(ch)) {\n showToast(\"Rond eerst alle stappen af ✨\");\n return;\n }\n\n setEarned((prev) => {\n if (prev.some((r) => r.id === ch.reward.id)) return prev;\n return [ch.reward, ...prev];\n });\n\n setStreak((d) => Math.min(30, d + 1));\n showToast(\"Beloning toegevoegd 🎁\");\n }\n\n function resetDemo() {\n setRoute({ name: \"tabs\" });\n setTab(\"home\");\n setCompleted({});\n setEarned([]);\n setLevel(1);\n setXp(30);\n setStreak(2);\n setPushOptIn(true);\n setLocationOptIn(false);\n showToast(\"Prototype gereset\");\n }\n\n const activeChallenge =\n route.name === \"challenge\"\n ? challenges.find((c) => c.id === route.id) || null\n : null;\n\n const activeReward =\n route.name === \"reward\"\n ? earned.find((r) => r.id === route.id) || null\n : null;\n\n if (typeof window === \"undefined\") {\n console.assert(__test__.cn(\"a\", false, \"b\") === \"a b\");\n console.assert(__test__.clamp(5, 0, 3) === 3);\n console.assert(__test__.pct(1, 4) === 25);\n console.assert(__test__.xpNeeded(1) === 100);\n console.assert(__test__.xpNeeded(2) === 130);\n }\n\n return (\n \n {toast ? (\n

\n \n {toast}\n

\n ) : null}\n\n \n {route.name === \"challenge\" && activeChallenge ? (\n <>\n setRoute({ name: \"tabs\" })}\n className=\"inline-flex h-9 w-9 items-center justify-center rounded-2xl hover:bg-black/[0.04]\"\n aria-label=\"Terug\"\n >\n \n \n }\n right={\n \n Reset\n \n }\n />\n\n

\n \n

\n\n

\n {activeChallenge.tags.map((t) => (\n \n ))}\n \n {activeChallenge.estMin} min\n \n

\n\n

\n {activeChallenge.subtitle}\n

\n\n

Voortgang

\n \n {progressOf(activeChallenge).done}/{progressOf(activeChallenge).total}\n \n

\n \n

\n\n

\n {activeChallenge.steps.map((st) => {\n const done = isDone(activeChallenge.id, st.id);\n return (\n \n

\n {st.kind === \"scan\" ? (\n \n ) : (\n \n )}\n

{st.label}

+{st.xp} XP

\n\n {done ? (\n Gereed\n ) : (\n {\n setDone(activeChallenge.id, st.id, st.xp);\n showToast(\n st.kind === \"scan\" ? \"Scan gelukt ✅\" : \"Check voltooid ✅\"\n );\n }}\n >\n {st.kind === \"scan\" ? (\n <>\n Scan\n \n ) : (\n <>Done\n )}\n \n )}\n

\n );\n })}\n

\n\n

\n \n

Beloning

\n {activeChallenge.reward.title} · {activeChallenge.reward.subtitle}\n

\n \n {activeChallenge.reward.tag}\n \n

\n\n

\n Tip: jij kiest welke meldingen aan staan.\n

\n {\n claim(activeChallenge);\n if (canClaim(activeChallenge)) {\n setRoute({ name: \"tabs\" });\n setTab(\"rewards\");\n }\n }}\n >\n Claim \n \n

\n \n \n ) : route.name === \"reward\" && activeReward ? (\n <>\n setRoute({ name: \"tabs\" })}\n className=\"inline-flex h-9 w-9 items-center justify-center rounded-2xl hover:bg-black/[0.04]\"\n aria-label=\"Terug\"\n >\n \n \n }\n />\n

\n \n \n {activeReward.title}\n \n \n

\n {activeReward.subtitle}\n

\n \n {activeReward.tag}\n \n

Waarde

{activeReward.value}

\n Toon bij afrekenen (prototype).\n

\n setRoute({ name: \"tabs\" })}\n className=\"w-full\"\n >\n Terug\n \n \n \n

\n \n ) : (\n <>\n \n \n Level {level}\n \n \n }\n />\n\n

\n {tab === \"home\" ? (\n <>\n

\n \n

\n Next Level Challenges\n

\n Scan · Play · Claim\n

\n\n

XP voortgang

\n \n {xp}/{xpNeeded(level)} XP\n \n

\n \n

\n Nog {Math.max(0, xpNeeded(level) - xp)} XP tot volgend level\n

\n\n

\n \n Streak\n

{streak} dagen

\n \n Rewards\n

{earned.length}

\n\n \n \n Snel starten\n \n \n

\n \n

Gezond

\n Maak de keuze makkelijker\n

\n {\n setTab(\"challenges\");\n showToast(\"Kies een challenge 👇\");\n }}\n >\n Start \n \n

\n \n \n

\n \n ) : tab === \"challenges\" ? (\n <>\n

\n {challenges.map((ch) => {\n const pr = progressOf(ch);\n const locked = level < ch.levelGate;\n return (\n setRoute({ name: \"challenge\", id: ch.id })}\n className={cn(\n \"w-full overflow-hidden rounded-3xl border text-left transition\",\n locked ? \"opacity-50\" : \"hover:bg-black/[0.02]\"\n )}\n >\n

\n \n

{ch.title}

\n {ch.subtitle}\n

\n \n {pr.done}/{pr.total}\n \n

\n {ch.tags.map((t) => (\n \n ))}\n \n {ch.estMin} min\n \n {locked ? (\n \n Unlock bij level {ch.levelGate}\n \n ) : null}\n

\n \n

\n \n );\n })}\n

\n\n

\n \n ) : tab === \"rewards\" ? (\n <>\n {earned.length ? (\n

\n {earned.map((r) => (\n setRoute({ name: \"reward\", id: r.id })}\n className=\"w-full rounded-3xl border p-4 text-left hover:bg-black/[0.02]\"\n >\n

{r.title}

{r.subtitle}

\n \n {r.tag}\n \n

\n \n

Waarde

{r.value}

\n \n ))}\n

\n ) : (\n

Nog geen beloningen

\n Rond een challenge af en claim je eerste reward.\n

\n {\n setTab(\"challenges\");\n showToast(\"Kies een challenge om te starten 👇\");\n }}\n >\n Naar challenges\n \n

\n )}\n\n

\n \n

\n \n ) : (\n <>\n \n \n Instellingen\n \n \n

\n \n Privacy\n

\n {\n setPushOptIn((v) => !v);\n showToast(\"Instelling opgeslagen\");\n }}\n className={cn(\n \"flex items-center justify-between rounded-2xl border px-4 py-3 text-left\",\n pushOptIn\n ? \"bg-emerald-50 border-emerald-200\"\n : \"bg-white\"\n )}\n >\n

Pushmeldingen

\n Level-ups & reminders\n

\n \n {pushOptIn ? \"Aan\" : \"Uit\"}\n \n \n\n {\n setLocationOptIn((v) => !v);\n showToast(\"Instelling opgeslagen\");\n }}\n className={cn(\n \"flex items-center justify-between rounded-2xl border px-4 py-3 text-left\",\n locationOptIn\n ? \"bg-emerald-50 border-emerald-200\"\n : \"bg-white\"\n )}\n >\n

Locatie in winkel

Sneller scannen

\n \n {locationOptIn ? \"Aan\" : \"Uit\"}\n \n \n

\n\n

\n \n Gezond\n

Beloningen

Op gezonde keuzes

\n \n Duurzaam\n

Beloningen

Op duurzame keuzes

\n\n \n Prototype resetten\n \n \n \n \n )}\n

\n\n \n \n )}\n \n\n

\n Prototype-only · Alles klikbaar\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","8773363402146708665","traceTime",1779630531242]