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.
15 lines
2.1 KiB
TypeScript
15 lines
2.1 KiB
TypeScript
// Browser verification fixture. These sample notices are never loaded by the board.
|
||
import { createRoot } from 'react-dom/client';
|
||
import type { CSSProperties } from 'react';
|
||
import '@fontsource-variable/manrope';
|
||
import '../src/styles.css';
|
||
import { AlertCard } from '../src/AlertCard';
|
||
import type { Alert } from '../src/types';
|
||
const examples: Alert[] = [
|
||
{ id: 'preview-cancellation', type: 'cancellation', routeNumbers: ['2', '12тк'], routeIds: [], title: 'Вечерние отправления отменены', message: 'Сегодня рейсы в 20:15 и 21:05 от остановки «Швейная фабрика» не выполняются. Выберите другое отправление.', startAt: null, endAt: '2026-10-09T20:59:00Z' },
|
||
{ id: 'preview-detour', type: 'detour', routeNumbers: ['6', '11'], routeIds: [], title: 'Временный объезд', message: 'Транспорт следует через улицу Калинина. Остановка «Площадь Свободы» временно не обслуживается.', startAt: null, endAt: '2026-10-10T15:00:00Z' },
|
||
{ id: 'preview-info', type: 'info', routeNumbers: [], routeIds: [], title: 'Посадка на соседней площадке', message: 'На время дорожных работ посадка перенесена на 50 метров по направлению движения.', startAt: null, endAt: null },
|
||
];
|
||
const light = new URLSearchParams(location.search).get('theme') === 'light';
|
||
createRoot(document.getElementById('root')!).render(<div className="board" data-theme={light ? 'light' : 'dark'} style={{ '--accent': light ? '#154a9c' : '#d5ff70' } as CSSProperties}><header className="board-header"><div><h1>Уведомления</h1><div className="stop-direction">Примеры оформления · тестовые данные</div></div></header><main className="scene-container"><section className="info-screen"><div className="info-notices">{examples.map(alert => <AlertCard key={alert.id} alert={alert} />)}</div></section></main></div>);
|