\n {/* Input 1: would-have-spent */}\n \n {/* Input 2: actually-spent */}\n \n

\n \n\n {/* ── Solid divider line ── */}\n \n\n {/* ── Amount Saved display / direct input ── */}\n \n {mode === \"direct\" ? (\n \n ) : (\n \n {formatCents(amountCents)}\n \n )}\n \n\n {/* ── Submit button ── */}\n \n \n $\n \n \n\n {/* ── Dashed divider ── */}\n

\n\n {/* ── Preset buttons (2 rows × 4) ── */}\n \n {PRESET_BUTTONS.map(({ label, cents }) => (\n handleButtonPress(cents)}\n style={{\n aspectRatio: \"1\",\n borderRadius: \"50%\",\n backgroundColor: \"#FFCF48\",\n border: \"none\",\n cursor: \"pointer\",\n fontSize: \"clamp(16px, 6vw, 26px)\",\n fontWeight: 300,\n fontFamily: FONT,\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n color: \"#000000\",\n }}\n >\n {label}\n \n ))}\n

\n\n {/* ── Dashed divider ── */}\n

\n\n {/* ── History icon (bottom right) ── */}\n \n \n {/* Increasing bars icon matching Figma vector */}\n \n \n

\n\n {/* ── Coin explosion overlay ── */}\n {explosion && (\n setExplosion(null)}\n />\n )}\n \n );\n}\n","deleted","label",[185,186,166],"frontend","components","permalink","https://www.val.town/x/figleaf/boymath/code/frontend/components/MainPage.tsx","extension","actionData","errors"]