33 lines
1.1 KiB
TypeScript
33 lines
1.1 KiB
TypeScript
|
'use client';
|
||
|
|
|
||
|
|
import { useTranslations } from 'next-intl';
|
||
|
|
import { TreatmentTypeBadge } from '@/components/ui/treatment/TreatmentTypeBadge';
|
||
|
|
import type { PastTreatmentDetail } from '@/types/treatment';
|
||
|
|
|
||
|
|
interface TreatmentHistoryDetailLineProps {
|
||
|
|
detail: PastTreatmentDetail;
|
||
|
|
detailNumber: number;
|
||
|
|
}
|
||
|
|
|
||
|
|
export function TreatmentHistoryDetailLine({
|
||
|
|
detail,
|
||
|
|
detailNumber,
|
||
|
|
}: TreatmentHistoryDetailLineProps) {
|
||
|
|
const t = useTranslations('treatment');
|
||
|
|
const teeth = detail.teeth.length ? [...detail.teeth].sort().join(', ') : t('teethNone');
|
||
|
|
const attachmentCount = detail.attachmentMetas?.length ?? 0;
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="flex items-center gap-2 min-w-0 text-[11px] leading-tight">
|
||
|
|
<span className="text-text-muted tabular-nums shrink-0">{detailNumber}.</span>
|
||
|
|
<TreatmentTypeBadge type={detail.treatmentType} />
|
||
|
|
<span className="text-text-secondary truncate min-w-0">{teeth}</span>
|
||
|
|
{attachmentCount > 0 && (
|
||
|
|
<span className="text-text-muted shrink-0 tabular-nums">
|
||
|
|
{t('detailAttachmentCount', { n: attachmentCount })}
|
||
|
|
</span>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|