\n Day Old Calculator\n

\n e.preventDefault()}\n >\n \n Name\n setName(e.target.value)}\n placeholder=\"e.g. Sam\"\n required\n />\n \n \n Birthday\n setBirthday(e.target.value)}\n required\n />\n \n\n

\n Preset Milestone Categories\n

\n {Object.entries(PRESET_CATEGORIES).map(([key, category]) => {\n const preview = getCategoryPreview(key)\n const hasCategory = milestones.some((m) => m.category === key)\n\n return (\n

\n {category.name}\n

\n {preview.length > 0 && (\n addCategory(key)}\n >\n Add {preview.length} milestones\n \n )}\n {hasCategory && (\n removeCategory(key)}\n >\n Remove all\n \n )}\n

\n {preview.length > 0 && (\n

\n Will add: {preview.slice(0, 5).join(\", \")}\n {preview.length > 5\n ? `... and ${preview.length - 5} more`\n : \"\"}\n

\n )}\n

\n )\n })}\n

\n\n

\n Custom Milestones (days old)\n

\n {milestones\n .filter((m) => !m.category)\n .map((m) => (\n \n {m.number}\n removeMilestone(m.number)}\n title=\"Remove\"\n >\n ×\n \n \n ))}\n setNewMilestone(e.target.value)}\n placeholder=\"Add\"\n onKeyDown={(e) => {\n if (e.key === \"Enter\") {\n addMilestone()\n }\n }}\n />\n \n Add\n \n

\n\n

\n Remind me before each milestone\n

\n setReminderValue(Number(e.target.value))}\n />\n setReminderUnit(e.target.value)}\n >\n {REMINDER_UNITS.map((u) => (\n \n ))}\n \n before each milestone\n

\n \n\n

All Milestones by Category

\n {Object.entries(getMilestonesByCategory()).map(\n ([categoryKey, numbers]) => {\n if (numbers.length === 0) return null\n const category =\n PRESET_CATEGORIES[categoryKey as keyof typeof PRESET_CATEGORIES]\n const colorClass = category?.color || \"bg-gray-100 border-gray-300\"\n const displayName = category?.name || \"Custom\"\n\n return (\n \n

{displayName}

\n {numbers.map((num) => (\n \n {num}\n removeMilestone(num)}\n title=\"Remove\"\n style={{ lineHeight: 1 }}\n >\n ×\n \n \n ))}\n

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

\n\n \n \n \n )\n}\n\nconst root = createRoot(document.getElementById(\"root\")!)\nroot.render()\n","deleted","label",[171,153],"frontend","permalink","https://www.val.town/x/samlroberts/DayOldCalculator/code/frontend/index.tsx","extension","actionData","errors"]