feat: Improve OrderDetails component with localized date formatting

- Added dayjs localization support using current language
- Separated order title and creation date into distinct elements
- Simplified date display format
- Imported Russian and English dayjs locales
This commit is contained in:
RustamRu 2025-03-12 00:41:56 +03:00
parent e5fa3b7802
commit b87d012e34

View File

@ -10,8 +10,10 @@ import {
} from '@chakra-ui/react';
import { useTranslation } from 'react-i18next';
import dayjs from 'dayjs';
import localizedFormat from "dayjs/plugin/localizedFormat";
import localizedFormat from 'dayjs/plugin/localizedFormat';
dayjs.extend(localizedFormat);
import 'dayjs/locale/ru';
import 'dayjs/locale/en';
import { Order } from '../../../models/landing';
import { formatDatetime } from '../../../lib';
@ -43,26 +45,28 @@ export const OrderDetails: FC<OrderDetailsProps> = ({
location,
startWashTime,
endWashTime,
created
created,
}) => {
const { t } = useTranslation('~', {
const { t, i18n } = useTranslation('~', {
keyPrefix: 'dry-wash.order-view.details',
});
dayjs.locale(i18n.language);
const { t: tCarBody } = useTranslation('~', {
keyPrefix: 'dry-wash.order-create.car-body-select.options',
});
return (
<>
<Heading as='h2' size='lg' marginInline='auto'>
{t('title', { number: orderNumber })}
</Heading>
<HStack
width='full'
flexWrap='wrap'
justifyContent='space-between'
gap={2}
>
<Heading as='h2' size='lg'>
{t('title', { number: orderNumber })} ({dayjs(created).format('LLLL')})
</Heading>
<Text>{dayjs(created).format('LLL')}</Text>
<OrderStatus value={status} />
</HStack>
<UnorderedList styleType='none'>