import React, { useState, useCallback } from "react"; import { Plus, X, Trash2, TrendingUp } from "lucide-react"; var LANG = (typeof navigator !== "undefined" ? navigator.language : "ko").slice(0, 2); var T = { ko: { title: "성장 기록", add: "기록 추가", height: "키 (cm)", weight: "체중 (kg)", date: "날짜", save: "저장", empty: "성장 기록을 시작하세요", emptyDesc: "키와 체중을 기록하면 성장 추이를 볼 수 있어요", latest: "최신", change: "변화", cm: "cm", kg: "kg", noChange: "첫 기록" }, en: { title: "Growth Tracker", add: "Add Record", height: "Height (cm)", weight: "Weight (kg)", date: "Date", save: "Save", empty: "Start tracking growth", emptyDesc: "Record height and weight to see trends", latest: "Latest", change: "Change", cm: "cm", kg: "kg", noChange: "First record" }, ja: { title: "成長記録", add: "記録追加", height: "身長 (cm)", weight: "体重 (kg)", date: "日付", save: "保存", empty: "成長記録を始めましょう", emptyDesc: "身長と体重を記録して成長を見守りましょう", latest: "最新", change: "変化", cm: "cm", kg: "kg", noChange: "最初の記録" }, zh: { title: "成长记录", add: "添加记录", height: "身高 (cm)", weight: "体重 (kg)", date: "日期", save: "保存", empty: "开始记录成长", emptyDesc: "记录身高体重查看成长趋势", latest: "最新", change: "变化", cm: "cm", kg: "kg", noChange: "首次记录" }, }; var t = T[LANG] || T.en; export default function App() { var [records, setRecords] = useSharedStorage("growth_v2", []); var [showAdd, setShowAdd] = useState(false); var [height, setHeight] = useState(""); var [weight, setWeight] = useState(""); var [date, setDate] = useState(new Date().toISOString().slice(0, 10)); var list = (records || []).sort(function(a, b) { return b.date < a.date ? -1 : 1; }); var latest = list[0]; var prev = list[1]; var hDiff = latest && prev ? (latest.h - prev.h).toFixed(1) : null; var wDiff = latest && prev ? (latest.w - prev.w).toFixed(1) : null; var handleAdd = useCallback(function() { var h = parseFloat(height); var w = parseFloat(weight); if (!h && !w) return; setRecords(function(prev2) { return [{ id: Date.now(), h: h || 0, w: w || 0, date: date }, ...(prev2 || [])]; }); setHeight(""); setWeight(""); setShowAdd(false); }, [height, weight, date, setRecords]); var del = useCallback(function(id) { setRecords(function(prev2) { return (prev2 || []).filter(function(r) { return r.id !== id; }); }); }, [setRecords]); var maxH = Math.max.apply(null, list.map(function(r) { return r.h || 0; }).concat([1])); return (

{t.title}

{latest ? (

{latest.h}

{t.cm}

{hDiff &&

0 ? "text-emerald-300" : "text-white/50")}>{parseFloat(hDiff) > 0 ? "+" : ""}{hDiff}

}

{latest.w}

{t.kg}

{wDiff &&

0 ? "text-amber-300" : "text-white/50")}>{parseFloat(wDiff) > 0 ? "+" : ""}{wDiff}

}

) : (

{t.noChange}

)}

{list.length === 0 ? (

📏

{t.empty}

{t.emptyDesc}

) : (

{list.length > 1 && (

{list.slice().reverse().map(function(r, i) { var pct = maxH > 0 ? (r.h / maxH) * 100 : 50; return

; })}

)} {list.map(function(r) { return (

{r.h} {t.cm} {r.w} {t.kg}

{r.date}

); })}

)}

{showAdd && (

{t.add}

{t.height}

{t.weight}

{t.date}

)}

); }

Growth Tracker

Growth Tracker

reviews