9bb4c42f84
Tạo mới trang /listings dạng bảng ticker-style theo spec TEC-3034. - DataTable compact (row 36px, sticky header, alternating rows) - Cột: #, Mã (GG-xxx), Quận, Loại, Giá, Δ30d, DT m², KL/Views - Sortable theo Giá, Δ30d, DT m², KL/Views - Filter inline: Loại giao dịch, Loại BĐS, Quận, Khoảng giá - Toggle view: Table (default) ↔ Card grid (legacy component cũ) - Pagination restyle compact, giữ nguyên API params - Click row → navigate to detail page - Dùng DataTable + PriceDelta từ @/components/design-system Co-Authored-By: Paperclip <noreply@paperclip.ing>
75 lines
2.6 KiB
TypeScript
75 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 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>
|
|
);
|
|
}
|