import React, { useState, useCallback, useEffect } from "react"; import { Plus, X, Check, Pill } from "lucide-react"; var LANG = (typeof navigator !== "undefined" ? navigator.language : "ko").slice(0, 2); var T = { ko: { title: "약 복용 체크", add: "약 추가", name: "약 이름", time: "복용 시간", save: "추가", taken: "복용 완료", notYet: "아직", all: "모두 복용 완료! 💊", empty: "약을 추가하세요", emptyDesc: "매일 복용할 약을 등록하세요", streak: "연속", days: "일", today: "오늘" }, en: { title: "Pill Reminder", add: "Add Pill", name: "Pill name", time: "Time", save: "Add", taken: "Taken", notYet: "Not yet", all: "All taken! 💊", empty: "Add your pills", emptyDesc: "Register pills to take daily", streak: "Streak", days: "days", today: "Today" }, ja: { title: "服薬チェック", add: "薬を追加", name: "薬の名前", time: "服用時間", save: "追加", taken: "服用済み", notYet: "まだ", all: "全て服用完了! 💊", empty: "薬を追加してください", emptyDesc: "毎日服用する薬を登録しましょう", streak: "連続", days: "日", today: "今日" }, zh: { title: "服药提醒", add: "添加药物", name: "药名", time: "服药时间", save: "添加", taken: "已服", notYet: "未服", all: "全部服完! 💊", empty: "添加药物", emptyDesc: "注册每日需要服用的药物", streak: "连续", days: "天", today: "今天" }, }; var t = T[LANG] || T.en; var PILL_COLORS = ["bg-blue-500", "bg-rose-500", "bg-amber-500", "bg-emerald-500", "bg-violet-500", "bg-cyan-500"]; export default function App() { var [pills, setPills] = useSharedStorage("pills_v2", []); var [checks, setChecks] = useSharedStorage("pill_checks_v2", []); var [showAdd, setShowAdd] = useState(false); var [name, setName] = useState(""); var [time, setTime] = useState("09:00"); var today = new Date().toISOString().slice(0, 10); var todayCheck = (checks || []).find(function(c) { return c.date === today; }) || { date: today, taken: {} }; var list = pills || []; var takenCount = list.filter(function(p) { return todayCheck.taken[p.id]; }).length; var allDone = list.length > 0 && takenCount === list.length; var streak = 0; var d = new Date(); while (true) { var ds = d.toISOString().slice(0, 10); var rec = (checks || []).find(function(c) { return c.date === ds; }); if (rec && list.length > 0 && list.every(function(p) { return rec.taken[p.id]; })) { streak++; d.setDate(d.getDate() - 1); } else break; } var handleAdd = useCallback(function() { if (!name.trim()) return; setPills(function(prev) { return [...(prev || []), { id: Date.now(), name: name.trim(), time: time, color: PILL_COLORS[((prev || []).length) % PILL_COLORS.length] }]; }); setName(""); setShowAdd(false); }, [name, time, setPills]); var toggleTake = useCallback(function(pillId) { setChecks(function(prev) { var recs = (prev || []).slice(); var idx = recs.findIndex(function(c) { return c.date === today; }); var rec = idx >= 0 ? { ...recs[idx], taken: { ...recs[idx].taken } } : { date: today, taken: {} }; if (rec.taken[pillId]) { delete rec.taken[pillId]; } else { rec.taken[pillId] = true; } if (idx >= 0) { recs[idx] = rec; } else { recs.unshift(rec); } return recs.slice(0, 30); }); }, [today, setChecks]); var delPill = useCallback(function(id) { setPills(function(prev) { return (prev || []).filter(function(p) { return p.id !== id; }); }); }, [setPills]); return (

💊 {t.title}

{list.length > 0 && (

{takenCount}/{list.length} {t.today}

)} {streak > 0 && ( 🔥 {streak} {t.days} )}

{allDone &&

{t.all}

}

{list.length === 0 ? (

💊

{t.empty}

{t.emptyDesc}

) : (

{list.sort(function(a, b) { return a.time < b.time ? -1 : 1; }).map(function(pill) { var taken = todayCheck.taken[pill.id]; return (

{pill.name}

{pill.time}

{taken ? t.taken : t.notYet}

); })}

)}

{showAdd && (

{t.add}

{t.name} {t.time}

)}

); }

Pill Reminder

Pill Reminder

reviews