Andrei
b56f9546c2
This commit implements comprehensive localization for high-priority components: ## Tracking Pages (4 files) - Localized feeding, sleep, diaper, and medicine tracking pages - Replaced hardcoded strings with translation keys from tracking namespace - Added useTranslation hook integration - All form labels, buttons, and messages now support multiple languages ## Child Dialog Components (2 files) - Localized ChildDialog (add/edit child form) - Localized DeleteConfirmDialog - Added new translation keys to children.json for dialog content - Includes validation messages and action buttons ## Date/Time Localization (14 files + new hook) - Created useLocalizedDate hook wrapping date-fns with locale support - Supports 5 languages: English, Spanish, French, Portuguese, Chinese - Updated all date formatting across: * Tracking pages (feeding, sleep, diaper, medicine) * Activity pages (activities, history, track activity) * Settings components (sessions, biometric, device trust) * Analytics components (insights, growth, sleep chart, feeding graph) - Date displays automatically adapt to user's language (e.g., "2 hours ago" → "hace 2 horas") ## Translation Updates - Enhanced children.json with dialog section containing: * Form field labels (name, birthDate, gender, photoUrl) * Action buttons (add, update, delete, cancel, saving, deleting) * Delete confirmation messages * Validation error messages Files changed: 17 files (+164, -113) Languages supported: en, es, fr, pt-BR, zh-CN 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
64 lines
1.7 KiB
TypeScript
64 lines
1.7 KiB
TypeScript
'use client';
|
|
|
|
import {
|
|
Dialog,
|
|
DialogTitle,
|
|
DialogContent,
|
|
DialogActions,
|
|
Button,
|
|
Typography,
|
|
} from '@mui/material';
|
|
import { Warning } from '@mui/icons-material';
|
|
import { useTranslation } from '@/hooks/useTranslation';
|
|
|
|
interface DeleteConfirmDialogProps {
|
|
open: boolean;
|
|
onClose: () => void;
|
|
onConfirm: () => void;
|
|
childName: string;
|
|
isLoading?: boolean;
|
|
}
|
|
|
|
export function DeleteConfirmDialog({
|
|
open,
|
|
onClose,
|
|
onConfirm,
|
|
childName,
|
|
isLoading = false,
|
|
}: DeleteConfirmDialogProps) {
|
|
const { t } = useTranslation('children');
|
|
|
|
return (
|
|
<Dialog
|
|
open={open}
|
|
onClose={onClose}
|
|
maxWidth="xs"
|
|
fullWidth
|
|
aria-labelledby="delete-dialog-title"
|
|
aria-describedby="delete-dialog-description"
|
|
role="alertdialog"
|
|
>
|
|
<DialogTitle id="delete-dialog-title" sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
|
|
<Warning color="warning" aria-hidden="true" />
|
|
{t('dialog.confirmDelete')}
|
|
</DialogTitle>
|
|
<DialogContent>
|
|
<Typography variant="body1" id="delete-dialog-description">
|
|
{t('dialog.confirmDeleteMessage')} <strong>{childName}</strong>?
|
|
</Typography>
|
|
<Typography variant="body2" color="text.secondary" sx={{ mt: 2 }}>
|
|
{t('dialog.confirmDeleteWarning')}
|
|
</Typography>
|
|
</DialogContent>
|
|
<DialogActions>
|
|
<Button onClick={onClose} disabled={isLoading}>
|
|
{t('dialog.cancel')}
|
|
</Button>
|
|
<Button onClick={onConfirm} color="error" variant="contained" disabled={isLoading}>
|
|
{isLoading ? t('dialog.deleting') : t('dialog.delete')}
|
|
</Button>
|
|
</DialogActions>
|
|
</Dialog>
|
|
);
|
|
}
|