Zakhar Timoshenko
f4ea47f2ae
- Created `verification-layout-themes.md` to document layout and theme verification results. - Introduced `AlertCard` component for displaying alerts with appropriate icons and metadata. - Added `RouteCloud` component to manage and display route information dynamically. - Implemented tests for QR code generation and decoding to ensure functionality across multiple city and platform links.
25 lines
2.0 KiB
TypeScript
25 lines
2.0 KiB
TypeScript
import { ArrowRight, Clock, Close, Info, Reset } from './Icons';
|
||
import { RouteBadge } from './RouteBadge';
|
||
import type { Alert } from './types';
|
||
|
||
const periodFormat = new Intl.DateTimeFormat('ru', { timeZone: 'Europe/Minsk', day: 'numeric', month: 'short', hour: '2-digit', minute: '2-digit' });
|
||
export function AlertCard({ alert }: { alert: Alert }) {
|
||
const cancelled = alert.type === 'cancellation';
|
||
const detour = alert.type === 'detour';
|
||
const delayed = alert.type === 'delay';
|
||
const Icon = cancelled ? Close : detour ? Reset : delayed ? Clock : Info;
|
||
const label = cancelled ? 'Отмена рейсов' : detour ? 'Изменение маршрута' : delayed ? 'Задержка движения' : alert.type === 'info' ? 'Обратите внимание' : 'Изменения движения';
|
||
const periodAt = alert.endAt || alert.startAt;
|
||
const period = periodAt && Number.isFinite(Date.parse(periodAt)) ? periodFormat.format(Date.parse(periodAt)) : null;
|
||
return <article className="notice" data-kind={cancelled ? 'cancellation' : detour ? 'detour' : delayed ? 'delay' : 'info'}>
|
||
<div className="notice-graphic" aria-hidden="true"><div className="notice-signal"><Icon size={44} /></div><span className="notice-line" /><span className="notice-endpoint" /></div>
|
||
<div className="notice-content">
|
||
<div className="notice-meta"><span className="notice-type">{label}</span>{period && <span className="notice-period">{alert.endAt ? 'До' : 'С'} {period}</span>}</div>
|
||
{!!alert.routeNumbers.length && <div className="notice-routes" aria-label="Затронутые маршруты">{alert.routeNumbers.map(number => <RouteBadge key={number} number={number} filled />)}</div>}
|
||
<h3>{alert.title}</h3><p>{alert.message}</p>
|
||
{!alert.routeNumbers.length && <div className="notice-scope"><ArrowRight size={18} /><span>На этой остановке</span></div>}
|
||
</div>
|
||
<span className="notice-watermark" aria-hidden="true"><Icon size={180} /></span>
|
||
</article>;
|
||
}
|