Zakhar Timoshenko
bc95d0c122
- Documented the behavior of `RouteBadge` and `NumericText` after animation changes. - Addressed width issues for numbers `2` and `6` post-animation. - Updated `ResizeObserver` to monitor number badge resizing. - Fixed scaling for short numbers and ensured proper transitions. - Verified functionality across different browser sizes and builds.
19 lines
1.7 KiB
TypeScript
19 lines
1.7 KiB
TypeScript
// Regression fixture: reuse each badge while changing from long to short numbers.
|
||
import { useState } from 'react';
|
||
import { createRoot } from 'react-dom/client';
|
||
import type { CSSProperties } from 'react';
|
||
import '@fontsource-variable/manrope';
|
||
import '../src/styles.css';
|
||
import { RouteBadge } from '../src/RouteBadge';
|
||
function Preview() {
|
||
const [short, setShort] = useState(false);
|
||
const numbers = short ? ['2', '6', '11'] : ['21тк', '16тк', '11'];
|
||
return <div className="board" data-theme="dark" style={{ '--accent': '#d5ff70' } as CSSProperties}>
|
||
<header className="board-header"><h1>Смена номеров</h1><button className="primary-button" onClick={() => setShort(value => !value)}>{short ? 'Длинные номера' : 'Короткие номера'}</button></header>
|
||
<main className="scene-container"><section className="info-screen"><section className="info-card routes-info" data-active="true" style={{ maxWidth: 540, height: '100%' }}><h3>Маршруты остановки</h3>
|
||
<div className="route-cloud" data-carousel="false" style={{ '--route-rows': 3 } as CSSProperties}><div className="route-list">{numbers.map((number, index) => <article className="route-tile" key={index}><RouteBadge number={number} filled /><div className="route-card-name"><h3 className="destination-heading">{['Калинина — Автовокзал', 'Гвардеец — Автовокзал', 'Тросницкая — Автовокзал'][index]}</h3><div className="route-card-next"><time>06:19</time><span className="route-kind">Автобус</span></div></div></article>)}</div></div>
|
||
</section></section></main>
|
||
</div>;
|
||
}
|
||
createRoot(document.getElementById('root')!).render(<Preview />);
|