Andrei
97830c5905
TypeScript Types: - Updated Child interface with displayColor, sortOrder, nickname - Added FamilyStatistics interface for UI view mode decisions - Updated CreateChildData to support custom colors and nicknames API Client: - Added getFamilyStatistics() method - Returns totalChildren, viewMode (tabs/cards), ageRange, genderDistribution ChildSelector Component: - Supports 3 modes: single, multiple, all - Shows child avatars with color-coded borders - Displays child name and optional nickname - "All Children" option for bulk operations - Chip-based multi-select display - Compact mode for inline usage - Sorted by sortOrder (birth order) - Disabled state when no children available - Simplified UI for single-child families Features: - Color-coded child indicators using displayColor - Avatar fallback with child's first initial - Checkbox selection for multiple mode - Indeterminate checkbox for partial selection - Required field validation support - Accessible with labels and ARIA Props: - children: Child[] - List of children to display - selectedChildIds: string[] - Currently selected child IDs - onChange: (childIds: string[]) => void - Selection change handler - mode: 'single' | 'multiple' | 'all' - Selection behavior - showAllOption: boolean - Show "All Children" option - label: string - Form label - compact: boolean - Compact display mode Use Cases: - Activity tracking forms - Analytics filtering - Bulk operations - Dashboard child switching - Comparison views 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This is a Next.js project bootstrapped with create-next-app.
Getting Started
First, run the development server:
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev
Open http://localhost:3000 with your browser to see the result.
You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.
This project uses next/font to automatically optimize and load Inter, a custom Google Font.
Learn More
To learn more about Next.js, take a look at the following resources:
- Next.js Documentation - learn about Next.js features and API.
- Learn Next.js - an interactive Next.js tutorial.
You can check out the Next.js GitHub repository - your feedback and contributions are welcome!
Deploy on Vercel
The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.
Check out our Next.js deployment documentation for more details.