feature: localization's first implmentation done. all frontend hardcoded text is now localized.
This commit is contained in:
@@ -1,5 +1,6 @@
|
||||
'use client';
|
||||
|
||||
import { useTranslations } from 'next-intl';
|
||||
import { CalendarDays } from 'lucide-react';
|
||||
import { purposeStyle } from '@/components/ui/appointments/appointmentPurposeStyles';
|
||||
import { Card } from '@/components/ui/shared/Card';
|
||||
@@ -7,6 +8,14 @@ import { ScheduleDayPicker } from '@/components/ui/shared/ScheduleDayPicker';
|
||||
import { startOfLocalDay } from '@/components/appointments/appointmentTime';
|
||||
import type { TreatmentAppointment } from '@/types/treatment';
|
||||
|
||||
const TREATMENT_TYPE_KEYS = {
|
||||
consultation: 'typeConsultation',
|
||||
filling: 'typeFilling',
|
||||
endo: 'typeEndo',
|
||||
visit: 'typeVisit',
|
||||
hygiene: 'typeHygiene',
|
||||
} as const;
|
||||
|
||||
interface AppointmentsStripProps {
|
||||
stripHidden: boolean;
|
||||
onToggleStripHidden: () => void;
|
||||
@@ -28,16 +37,18 @@ export function AppointmentsStrip({
|
||||
onSelectAppointment,
|
||||
loading = false,
|
||||
}: AppointmentsStripProps) {
|
||||
const t = useTranslations('treatment');
|
||||
|
||||
if (stripHidden) {
|
||||
return (
|
||||
<Card className="flex items-center justify-between gap-3 flex-wrap" padding="sm">
|
||||
<p className="text-sm text-text-secondary">Appointments are hidden.</p>
|
||||
<p className="text-sm text-text-secondary">{t('hiddenMessage')}</p>
|
||||
<button
|
||||
type="button"
|
||||
onClick={onToggleStripHidden}
|
||||
className="text-sm font-medium text-primary hover:underline focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/40 rounded-[var(--radius-sm)]"
|
||||
>
|
||||
Show appointments
|
||||
{t('showAppointments')}
|
||||
</button>
|
||||
</Card>
|
||||
);
|
||||
@@ -48,14 +59,14 @@ export function AppointmentsStrip({
|
||||
<div className="flex items-center justify-between gap-3 flex-wrap">
|
||||
<div className="flex items-center gap-2 min-w-0">
|
||||
<CalendarDays className="w-5 h-5 text-text-muted shrink-0 icon-flat" aria-hidden />
|
||||
<h2 className="text-sm font-semibold text-text-primary truncate">My appointments</h2>
|
||||
<h2 className="text-sm font-semibold text-text-primary truncate">{t('appointmentsTitle')}</h2>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={onToggleStripHidden}
|
||||
className="text-sm font-medium text-primary hover:underline focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/40 rounded-[var(--radius-sm)]"
|
||||
>
|
||||
Hide appointments
|
||||
{t('hideAppointments')}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@@ -65,13 +76,13 @@ export function AppointmentsStrip({
|
||||
onChange={(d) => onSelectDay(startOfLocalDay(d))}
|
||||
/>
|
||||
{loading && (
|
||||
<p className="text-sm text-text-muted pb-2">Loading appointments…</p>
|
||||
<p className="text-sm text-text-muted pb-2">{t('loadingAppointments')}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{appointments.length === 0 && (
|
||||
<p className="text-sm text-text-muted">No appointments assigned to you on this day.</p>
|
||||
<p className="text-sm text-text-muted">{t('emptyDay')}</p>
|
||||
)}
|
||||
{appointments.map((a) => {
|
||||
const sel = a.id === selectedAppointmentId;
|
||||
@@ -85,6 +96,7 @@ export function AppointmentsStrip({
|
||||
minute: '2-digit',
|
||||
})}`;
|
||||
const palette = purposeStyle(a.purpose);
|
||||
const purposeKey = TREATMENT_TYPE_KEYS[a.purpose as keyof typeof TREATMENT_TYPE_KEYS];
|
||||
return (
|
||||
<Card
|
||||
as="button"
|
||||
@@ -103,7 +115,9 @@ export function AppointmentsStrip({
|
||||
<p className="text-sm font-medium leading-tight truncate mt-0.5">
|
||||
{a.patientFirstName} {a.patientLastName}
|
||||
</p>
|
||||
<p className="text-[11px] opacity-90 capitalize mt-0.5">{a.purpose}</p>
|
||||
<p className="text-[11px] opacity-90 capitalize mt-0.5">
|
||||
{purposeKey ? t(purposeKey) : a.purpose}
|
||||
</p>
|
||||
</Card>
|
||||
);
|
||||
})}
|
||||
|
||||
Reference in New Issue
Block a user