import pageData from "~/data/weight-tracker-app.json"; export function WeightTracker() { const { data, updateData } = useData(pageData); const [newWeight, setNewWeight] = React.useState(""); const [newDate, setNewDate] = React.useState(""); const [newNotes, setNewNotes] = React.useState(""); const [showForm, setShowForm] = React.useState(false); const weightEntries = data.weightEntries || []; const targetWeight = data.targetWeight || 70; const unit = data.unit || "kg"; const addEntry = () => { if (!newWeight || !newDate) return; const entry = { id: Date.now(), date: newDate, weight: parseFloat(newWeight), notes: newNotes }; const updatedEntries = [...weightEntries, entry].sort((a, b) => new Date(a.date) - new Date(b.date)); updateData({ ...data, weightEntries: updatedEntries }); setNewWeight(""); setNewDate(""); setNewNotes(""); setShowForm(false); }; const deleteEntry = (id) => { const updatedEntries = weightEntries.filter(entry => entry.id !== id); updateData({ ...data, weightEntries: updatedEntries }); }; const updateTarget = (target) => { updateData({ ...data, targetWeight: parseFloat(target) }); }; const chartData = weightEntries.map(entry => ({ date: entry.date, weight: entry.weight, target: targetWeight })); const chartConfig = { weight: { label: "Weight", color: "oklch(0.646 0.222 41.116)" }, target: { label: "Target", color: "oklch(0.6 0.118 184.704)" } }; const currentWeight = weightEntries.length > 0 ? weightEntries[weightEntries.length - 1].weight : 0; const startWeight = weightEntries.length > 0 ? weightEntries[0].weight : 0; const weightChange = currentWeight - startWeight; const progressToTarget = targetWeight ? Math.abs(currentWeight - targetWeight) : 0; return (

Current Weight

{currentWeight} {unit}

Total Change

{weightChange > 0 ? '+' : ''}{weightChange.toFixed(1)} {unit}

Target Weight updateTarget(e.target.value)} className="text-xl font-bold" />

{progressToTarget.toFixed(1)} {unit} to go

{chartData.length > 0 && ( Weight Progress } /> )} Weight Entries {showForm && (

Date setNewDate(e.target.value)} />

Weight ({unit}) setNewWeight(e.target.value)} placeholder="Enter weight" />

Notes (optional) setNewNotes(e.target.value)} placeholder="Add notes" />

)}

{weightEntries.slice().reverse().map((entry) => (

{entry.weight} {unit}

{entry.date}

{entry.notes &&

{entry.notes}

}

))}

); }