d6d7584677
- Import TickerStrip vào dashboard layout, truyền vào DashboardLayout.ticker - Thêm placeholder top-8 quận với TODO comment chờ /analytics/districts API - Thêm role="status" aria-live="polite" vào status bar div trong DashboardLayout - 8 Vitest unit tests cho DashboardLayout: role=banner, role=status, ticker, sidebar collapse/expand width, main content (tất cả pass) Note: listings.spec.tsx failure là pre-existing trên HEAD, không liên quan TEC-3047. Co-Authored-By: Paperclip <noreply@paperclip.ing>
79 lines
2.6 KiB
TypeScript
79 lines
2.6 KiB
TypeScript
import * as React from 'react';
|
|
import { cn } from '@/lib/utils';
|
|
|
|
export interface DashboardLayoutProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
header?: React.ReactNode;
|
|
sidebar?: React.ReactNode;
|
|
ticker?: React.ReactNode;
|
|
statusBar?: React.ReactNode;
|
|
/** Chiều rộng sidebar khi expand (collapsed luôn 56px). */
|
|
sidebarWidth?: number;
|
|
/** Có collapse sidebar không. */
|
|
sidebarCollapsed?: boolean;
|
|
children: React.ReactNode;
|
|
}
|
|
|
|
/**
|
|
* Layout khung cho toàn bộ trang dashboard / trading terminal.
|
|
*
|
|
* Cấu trúc:
|
|
* ┌─────────────────────────────────────┐
|
|
* │ TICKER STRIP (optional, 32px) │
|
|
* ├──────────┬─────────────────────────┤
|
|
* │ SIDEBAR │ HEADER (48px) │
|
|
* │ (56 px ├─────────────────────────┤
|
|
* │ hoặc │ MAIN │
|
|
* │ expand) │ (scroll-y) │
|
|
* ├──────────┴─────────────────────────┤
|
|
* │ STATUS BAR (optional, 24px) │
|
|
* └─────────────────────────────────────┘
|
|
*/
|
|
export function DashboardLayout({
|
|
header,
|
|
sidebar,
|
|
ticker,
|
|
statusBar,
|
|
sidebarWidth = 200,
|
|
sidebarCollapsed = true,
|
|
children,
|
|
className,
|
|
...rest
|
|
}: DashboardLayoutProps) {
|
|
const sidebarPx = sidebarCollapsed ? 56 : sidebarWidth;
|
|
return (
|
|
<div
|
|
className={cn('flex min-h-screen flex-col bg-background text-foreground', className)}
|
|
{...rest}
|
|
>
|
|
{ticker ? (
|
|
<div className="h-ticker-bar border-b border-border bg-background-elevated">
|
|
{ticker}
|
|
</div>
|
|
) : null}
|
|
<div className="flex flex-1">
|
|
{sidebar ? (
|
|
<aside
|
|
className="shrink-0 border-r border-border bg-background-elevated transition-[width] duration-200"
|
|
style={{ width: sidebarPx }}
|
|
>
|
|
{sidebar}
|
|
</aside>
|
|
) : null}
|
|
<div className="flex min-w-0 flex-1 flex-col">
|
|
{header}
|
|
<main className="flex-1 overflow-y-auto px-4 py-4 md:px-6">{children}</main>
|
|
</div>
|
|
</div>
|
|
{statusBar ? (
|
|
<div
|
|
role="status"
|
|
aria-live="polite"
|
|
className="flex h-6 items-center gap-4 border-t border-border bg-background-elevated px-4 text-[11px] text-foreground-muted"
|
|
>
|
|
{statusBar}
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
);
|
|
}
|