Add fast-log UI with modal for feed/diaper/sleep
This commit is contained in:
parent
54df45cc8a
commit
297479fc1d
1 changed files with 139 additions and 7 deletions
146
src/app/page.tsx
146
src/app/page.tsx
|
|
@ -1,35 +1,167 @@
|
|||
"use client";
|
||||
|
||||
import { useState, useEffect } from "react";
|
||||
|
||||
interface LogModalProps {
|
||||
type: "feed" | "diaper" | "sleep" | null;
|
||||
childId: string;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
function LogModal({ type, childId, onClose }: LogModalProps) {
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [subType, setSubType] = useState("breast_milk");
|
||||
const [amountMl, setAmountMl] = useState("");
|
||||
const [notes, setNotes] = useState("");
|
||||
|
||||
if (!type) return null;
|
||||
|
||||
const handleSubmit = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
await fetch("/api/logs", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({
|
||||
type,
|
||||
childId,
|
||||
subType,
|
||||
amountMl: amountMl ? Number(amountMl) : undefined,
|
||||
notes: notes || undefined,
|
||||
}),
|
||||
});
|
||||
onClose();
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
}
|
||||
setLoading(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
|
||||
<div className="bg-white rounded-2xl p-6 w-full max-w-sm mx-4">
|
||||
<h2 className="text-xl font-bold mb-4">
|
||||
{type === "feed" && "Log Feed"}
|
||||
{type === "diaper" && "Log Diaper"}
|
||||
{type === "sleep" && "Log Sleep"}
|
||||
</h2>
|
||||
|
||||
{type === "feed" && (
|
||||
<>
|
||||
<select
|
||||
value={subType}
|
||||
onChange={(e) => setSubType(e.target.value)}
|
||||
className="w-full p-3 border rounded-xl mb-3"
|
||||
>
|
||||
<option value="breast_milk">Breast Milk</option>
|
||||
<option value="formula">Formula</option>
|
||||
<option value="solid">Solid Food</option>
|
||||
<option value="water">Water</option>
|
||||
</select>
|
||||
<input
|
||||
type="number"
|
||||
placeholder="Amount (ml)"
|
||||
value={amountMl}
|
||||
onChange={(e) => setAmountMl(e.target.value)}
|
||||
className="w-full p-3 border rounded-xl mb-3"
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
|
||||
{type === "diaper" && (
|
||||
<select
|
||||
value={subType}
|
||||
onChange={(e) => setSubType(e.target.value)}
|
||||
className="w-full p-3 border rounded-xl mb-3"
|
||||
>
|
||||
<option value="wet">Wet</option>
|
||||
<option value="dirty">Dirty</option>
|
||||
<option value="both">Both</option>
|
||||
</select>
|
||||
)}
|
||||
|
||||
{type === "sleep" && (
|
||||
<select
|
||||
value={subType}
|
||||
onChange={(e) => setSubType(e.target.value)}
|
||||
className="w-full p-3 border rounded-xl mb-3"
|
||||
>
|
||||
<option value="nap">Nap</option>
|
||||
<option value="night">Night Sleep</option>
|
||||
</select>
|
||||
)}
|
||||
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Notes (optional)"
|
||||
value={notes}
|
||||
onChange={(e) => setNotes(e.target.value)}
|
||||
className="w-full p-3 border rounded-xl mb-4"
|
||||
/>
|
||||
|
||||
<div className="flex gap-3">
|
||||
<button onClick={onClose} className="flex-1 p-3 border rounded-xl">
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
onClick={handleSubmit}
|
||||
disabled={loading}
|
||||
className="flex-1 p-3 bg-rose-400 text-white rounded-xl"
|
||||
>
|
||||
{loading ? "Saving..." : "Save"}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function HomePage() {
|
||||
const [modalType, setModalType] = useState<"feed" | "diaper" | "sleep" | null>(null);
|
||||
const [childId, setChildId] = useState("5ad3b16a-1e0d-45ab-bc91-038397d75d0a");
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-br from-rose-50 to-amber-50">
|
||||
<div className="container mx-auto px-4 py-8">
|
||||
<div className="text-center mb-8">
|
||||
<h1 className="text-3xl font-bold">Welcome to Tia 👶</h1>
|
||||
<h1 className="text-3xl font-bold">Tia 👶</h1>
|
||||
<p className="text-gray-600 mt-2">Your baby tracking companion</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4 max-w-md mx-auto">
|
||||
<button className="p-6 bg-white rounded-2xl shadow-md hover:shadow-lg transition">
|
||||
<button
|
||||
onClick={() => setModalType("feed")}
|
||||
className="p-6 bg-white rounded-2xl shadow-md hover:shadow-lg transition text-center"
|
||||
>
|
||||
<div className="text-3xl">🍼</div>
|
||||
<div className="font-medium mt-2">Feeds</div>
|
||||
<div className="font-medium mt-2">Feed</div>
|
||||
</button>
|
||||
<button className="p-6 bg-white rounded-2xl shadow-md hover:shadow-lg transition">
|
||||
<button
|
||||
onClick={() => setModalType("sleep")}
|
||||
className="p-6 bg-white rounded-2xl shadow-md hover:shadow-lg transition text-center"
|
||||
>
|
||||
<div className="text-3xl">😴</div>
|
||||
<div className="font-medium mt-2">Sleep</div>
|
||||
</button>
|
||||
<button className="p-6 bg-white rounded-2xl shadow-md hover:shadow-lg transition">
|
||||
<button
|
||||
onClick={() => setModalType("diaper")}
|
||||
className="p-6 bg-white rounded-2xl shadow-md hover:shadow-lg transition text-center"
|
||||
>
|
||||
<div className="text-3xl">👶</div>
|
||||
<div className="font-medium mt-2">Diaper</div>
|
||||
</button>
|
||||
<button className="p-6 bg-white rounded-2xl shadow-md hover:shadow-lg transition">
|
||||
<button className="p-6 bg-white rounded-2xl shadow-md hover:shadow-lg transition text-center">
|
||||
<div className="text-3xl">💊</div>
|
||||
<div className="font-medium mt-2">Medical</div>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="mt-8 text-center">
|
||||
<p className="text-gray-500">Baby: Tia (2 years old)</p>
|
||||
<p className="text-gray-500">Baby: Baby Tia</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<LogModal type={modalType} childId={childId} onClose={() => setModalType(null)} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Loading…
Add table
Reference in a new issue