Fix activity page repetition + 4-day strip layout + guideline accuracy
- Remove redundant daily summary bar (Today chip in 4-day strip covers it) - 4-day strip: reversed to oldest→newest order (Wed→Thu→Yest.→Today) - 4-day strip: switched from flex to grid grid-cols-4 so all 4 chips fill the full row width evenly instead of floating left - Today chip highlighted in rose-400 to stand out from past days - Guidelines: corrected 9-12 mo (feeds 3→4, sleep 12→14h, diapers 3→4) per AAP; 12-18 mo sleep 11→13h, diapers 3→4; 18-24 mo sleep 11→12h, diapers 2→3; all now match mid-range AAP recommendations Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
parent
164206c023
commit
a14d8e7043
2 changed files with 31 additions and 36 deletions
|
|
@ -213,33 +213,28 @@ export default function ActivityPage() {
|
||||||
|
|
||||||
{!loading && (
|
{!loading && (
|
||||||
<>
|
<>
|
||||||
{/* Daily summary bar */}
|
{/* 4-day overview strip — oldest → newest (left → right) */}
|
||||||
<div className="mx-4 mb-3 bg-white dark:bg-gray-800 rounded-2xl shadow-sm overflow-hidden">
|
<div className="grid grid-cols-4 gap-2 px-4 mb-3">
|
||||||
<div className="grid grid-cols-3 divide-x divide-gray-100 dark:divide-gray-700">
|
{[...last4Days].reverse().map(d => {
|
||||||
{[
|
const isToday = d.label === "Today";
|
||||||
{ icon: "🍼", label: "Feeds", count: todayCounts.feed },
|
return (
|
||||||
{ icon: "🚼", label: "Diapers", count: todayCounts.diaper },
|
<div
|
||||||
{ icon: "😴", label: "Sleep", count: todayCounts.sleep },
|
key={d.label}
|
||||||
].map(item => (
|
className={`rounded-xl px-2 py-2 shadow-sm text-center ${
|
||||||
<div key={item.label} className="flex flex-col items-center py-2 px-1">
|
isToday
|
||||||
<span className="text-lg">{item.icon}</span>
|
? "bg-rose-400 text-white"
|
||||||
<span className="text-lg font-bold">{item.count}</span>
|
: "bg-white dark:bg-gray-800"
|
||||||
<span className="text-xs text-gray-400">today</span>
|
}`}
|
||||||
|
>
|
||||||
|
<p className={`text-xs font-semibold mb-1 ${isToday ? "text-rose-100" : "text-gray-500 dark:text-gray-400"}`}>
|
||||||
|
{d.label}
|
||||||
|
</p>
|
||||||
|
<p className={`text-xs ${isToday ? "text-white" : "text-gray-600 dark:text-gray-300"}`}>🍼×{d.feed}</p>
|
||||||
|
<p className={`text-xs ${isToday ? "text-white" : "text-gray-600 dark:text-gray-300"}`}>😴×{d.sleep}</p>
|
||||||
|
<p className={`text-xs ${isToday ? "text-white" : "text-gray-600 dark:text-gray-300"}`}>🚼×{d.diaper}</p>
|
||||||
</div>
|
</div>
|
||||||
))}
|
);
|
||||||
</div>
|
})}
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* 4-day overview strip */}
|
|
||||||
<div className="flex gap-2 px-4 mb-3 overflow-x-auto scrollbar-hide">
|
|
||||||
{last4Days.map(d => (
|
|
||||||
<div key={d.label} className="flex-shrink-0 bg-white dark:bg-gray-800 rounded-xl px-3 py-2 shadow-sm min-w-[68px] text-center">
|
|
||||||
<p className="text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">{d.label}</p>
|
|
||||||
<p className="text-xs text-gray-600 dark:text-gray-300">🍼×{d.feed}</p>
|
|
||||||
<p className="text-xs text-gray-600 dark:text-gray-300">😴×{d.sleep}</p>
|
|
||||||
<p className="text-xs text-gray-600 dark:text-gray-300">🚼×{d.diaper}</p>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Collapsible guidelines card */}
|
{/* Collapsible guidelines card */}
|
||||||
|
|
|
||||||
|
|
@ -46,26 +46,26 @@ export const guidelines: Guideline[] = [
|
||||||
{
|
{
|
||||||
minAgeMonths: 9,
|
minAgeMonths: 9,
|
||||||
maxAgeMonths: 12,
|
maxAgeMonths: 12,
|
||||||
label: "Toddler (9-12 mo)",
|
label: "Baby (9-12 mo)",
|
||||||
feeds: { times: 3, notes: "3 meals + 2 snacks" },
|
feeds: { times: 4, notes: "3 meals + 2 snacks + formula/breast milk" },
|
||||||
sleep: { totalHours: 12, notes: "1-2 naps/day" },
|
sleep: { totalHours: 14, notes: "2 naps/day, 10-12h night" },
|
||||||
diapers: { count: 3, notes: "May start potty training" },
|
diapers: { count: 4, notes: "4-6 wet diapers expected" },
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
minAgeMonths: 12,
|
minAgeMonths: 12,
|
||||||
maxAgeMonths: 18,
|
maxAgeMonths: 18,
|
||||||
label: "Toddler (12-18 mo)",
|
label: "Toddler (12-18 mo)",
|
||||||
feeds: { times: 3, notes: "Family meals" },
|
feeds: { times: 3, notes: "3 meals + 2 snacks" },
|
||||||
sleep: { totalHours: 11, notes: "1 nap/day" },
|
sleep: { totalHours: 13, notes: "1 nap + 11h night (11-14h total)" },
|
||||||
diapers: { count: 3, notes: "Potty training begins" },
|
diapers: { count: 4, notes: "4-6 wet diapers" },
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
minAgeMonths: 18,
|
minAgeMonths: 18,
|
||||||
maxAgeMonths: 24,
|
maxAgeMonths: 24,
|
||||||
label: "Toddler (18-24 mo)",
|
label: "Toddler (18-24 mo)",
|
||||||
feeds: { times: 3, notes: "Family meals" },
|
feeds: { times: 3, notes: "3 meals + 2 snacks" },
|
||||||
sleep: { totalHours: 11, notes: "1 nap/day" },
|
sleep: { totalHours: 12, notes: "1 nap + 10-11h night (11-14h total)" },
|
||||||
diapers: { count: 2, notes: "Potty training" },
|
diapers: { count: 3, notes: "3-5 wet, potty training begins" },
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue