diff --git a/src/features/online-board/components/DayTabs/DaySelect.tsx b/src/features/online-board/components/DayTabs/DaySelect.tsx index 1ee6b55c..f5ea1cf5 100644 --- a/src/features/online-board/components/DayTabs/DaySelect.tsx +++ b/src/features/online-board/components/DayTabs/DaySelect.tsx @@ -1,4 +1,5 @@ import type { FC } from "react"; +import { useTranslation } from "@/i18n/provider.js"; import { parseYyyymmdd } from "./dateRange.js"; import "./DayTabs.scss"; @@ -7,6 +8,12 @@ export interface DaySelectProps { availableDates: string[]; locale: string; onNavigate: (date: string) => void; + /** + * Optional caption shown above the dropdown (e.g. 'Дата рейса' on the + * flight details page). Angular renders this via day-tabs' `caption` + * input. Omit for search pages where no caption is wanted. + */ + captionKey?: string; } function formatLabel(date: string, locale: string): string { @@ -23,23 +30,30 @@ export const DaySelect: FC = ({ availableDates, locale, onNavigate, + captionKey, }) => { + const { t } = useTranslation(); // No data → don't render an empty dropdown that just adds visual // noise on mobile. Angular hides the date picker when the calendar // API hasn't returned any usable days for this view. if (availableDates.length === 0) return null; return ( - +
+ {captionKey && ( + + )} + +
); }; diff --git a/src/features/online-board/components/DayTabs/DayTabs.scss b/src/features/online-board/components/DayTabs/DayTabs.scss index 5ca8b122..f0ef1016 100644 --- a/src/features/online-board/components/DayTabs/DayTabs.scss +++ b/src/features/online-board/components/DayTabs/DayTabs.scss @@ -82,6 +82,24 @@ } } +.day-select-wrap { + display: none; + + @media (max-width: 768px) { + display: block; + background: #fff; + padding: 12px 16px; + border-radius: 8px; + } + + &__caption { + display: block; + font-size: 12px; + color: #657282; + margin-bottom: 4px; + } +} + .day-select { display: none; @@ -92,5 +110,6 @@ border-radius: 8px; background: #fff; border: 1px solid #d0dae5; + font-size: 14px; } } diff --git a/src/features/online-board/components/DayTabs/DayTabs.tsx b/src/features/online-board/components/DayTabs/DayTabs.tsx index c24f7830..b877991b 100644 --- a/src/features/online-board/components/DayTabs/DayTabs.tsx +++ b/src/features/online-board/components/DayTabs/DayTabs.tsx @@ -14,6 +14,12 @@ export interface DayTabsProps { daysAfter: number; locale: string; onNavigate: (date: string) => void; + /** + * Caption rendered above the mobile dropdown (desktop ignores it). + * Pass 'SHARED.FLIGHT_DATE' on the details page to mirror Angular's + * "Дата рейса" label. + */ + mobileCaptionKey?: string; } export const DayTabs: FC = ({ @@ -23,6 +29,7 @@ export const DayTabs: FC = ({ daysAfter, locale, onNavigate, + mobileCaptionKey, }) => { const { t } = useTranslation(); const allDates = useMemo( @@ -95,6 +102,7 @@ export const DayTabs: FC = ({ availableDates={availableDates} locale={locale} onNavigate={onNavigate} + {...(mobileCaptionKey ? { captionKey: mobileCaptionKey } : {})} /> ); diff --git a/src/features/online-board/components/OnlineBoardDetailsPage.tsx b/src/features/online-board/components/OnlineBoardDetailsPage.tsx index 4bd71603..7464aa15 100644 --- a/src/features/online-board/components/OnlineBoardDetailsPage.tsx +++ b/src/features/online-board/components/OnlineBoardDetailsPage.tsx @@ -533,6 +533,7 @@ export const OnlineBoardDetailsPage: FC = ({ daysAfter={onlineboardSearchTo} locale={locale} onNavigate={handleNavigateDate} + mobileCaptionKey="SHARED.FLIGHT_DATE" /> } >