Mannu
96d28cbadc
New foundations: - src/types/index.ts — shared domain types (Child, Log, GrowthRecord, Medicine, Dose, Allergy, Visit, Illness, Vaccination, AIChat, ChatSession, Goal) - src/lib/formatting.ts — calculateAge, formatAge, formatTimeAgo (eliminates 3 duplicate implementations spread across page.tsx and growth/page.tsx) - src/lib/api.ts — typed fetch helpers (api.get/post/patch/delete) with consistent error handling; replaces manual fetch boilerplate New shared components: - src/components/PageHeader.tsx — reusable back-link + title header - src/components/TabBar.tsx — horizontal pill tab bar - src/components/CalendarView.tsx — extracted from activity/page.tsx (was ~170 inline lines) - src/components/medical/ — medical page split into 5 focused tab components: VaccineTab, MedicineTab, AllergyTab, VisitTab, IllnessTab Pages updated: - medical/page.tsx: 1029 → 42 lines (thin shell wiring the 5 tab components) - activity/page.tsx: uses CalendarView + shared Log type + api.ts - growth/page.tsx: uses shared GrowthRecord/Goal types + formatAge; fixes `any` catch clauses; fixes undefined → null in Chart.js dataset values - page.tsx (home): uses shared Log/AIChat/ChatSession types + formatTimeAgo/ calculateAge from formatting.ts; removes inline type definitions - ai/page.tsx: uses shared AIChat/ChatSession types - FamilyProvider.tsx: uses shared Child type; fixes `c: any` mapping Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
24 lines
752 B
TypeScript
24 lines
752 B
TypeScript
import { ReactNode } from "react";
|
|
import Link from "next/link";
|
|
|
|
interface Props {
|
|
title: string;
|
|
subtitle?: string;
|
|
backHref?: string;
|
|
actions?: ReactNode;
|
|
}
|
|
|
|
export function PageHeader({ title, subtitle, backHref = "/menu", actions }: Props) {
|
|
return (
|
|
<div className="p-4 flex items-center justify-between">
|
|
<div className="flex items-center gap-3">
|
|
<Link href={backHref} className="p-2 text-gray-600 dark:text-gray-300">←</Link>
|
|
<div>
|
|
<h1 className="text-xl font-bold">{title}</h1>
|
|
{subtitle && <p className="text-sm text-gray-500 dark:text-gray-400">{subtitle}</p>}
|
|
</div>
|
|
</div>
|
|
{actions && <div className="flex items-center gap-2">{actions}</div>}
|
|
</div>
|
|
);
|
|
}
|