- Add typed API response types and fetch client (responses.ts + client.ts) - Add useSearch hook with TanStack Query - Add Layout with header and search bar - Add SearchBar with debounced search and dropdown - Implement HomePage, StockPage, BondPage with data loading
28 lines
798 B
TypeScript
28 lines
798 B
TypeScript
import { Outlet, Link } from 'react-router-dom';
|
|
import { SearchBar } from './SearchBar';
|
|
|
|
export function Layout() {
|
|
return (
|
|
<div style={{ minHeight: '100vh', display: 'flex', flexDirection: 'column' }}>
|
|
<header
|
|
style={{
|
|
background: 'var(--color-surface)',
|
|
borderBottom: '1px solid #e0e0e0',
|
|
padding: '12px 24px',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
gap: 24,
|
|
}}
|
|
>
|
|
<Link to="/" style={{ fontSize: 20, fontWeight: 700, color: 'var(--color-text)', textDecoration: 'none' }}>
|
|
MoexVibe
|
|
</Link>
|
|
<SearchBar />
|
|
</header>
|
|
<main style={{ flex: 1, padding: 24, maxWidth: 1200, width: '100%', margin: '0 auto' }}>
|
|
<Outlet />
|
|
</main>
|
|
</div>
|
|
);
|
|
}
|