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>
46 lines
1.3 KiB
TypeScript
46 lines
1.3 KiB
TypeScript
import * as React from 'react';
|
|
import { cn } from '@/lib/utils';
|
|
|
|
export interface CompactHeaderProps extends React.HTMLAttributes<HTMLElement> {
|
|
/** Logo node. */
|
|
logo?: React.ReactNode;
|
|
/** Breadcrumb / tiêu đề ngắn. */
|
|
breadcrumb?: React.ReactNode;
|
|
/** Khối search (input/dropdown). */
|
|
search?: React.ReactNode;
|
|
/** Action phía phải (avatar, notif, theme toggle). */
|
|
actions?: React.ReactNode;
|
|
}
|
|
|
|
/**
|
|
* Header compact (h: 48px) dạng terminal financial.
|
|
* Dùng thay cho header card/spacious trước đây.
|
|
*/
|
|
export function CompactHeader({
|
|
logo,
|
|
breadcrumb,
|
|
search,
|
|
actions,
|
|
className,
|
|
...rest
|
|
}: CompactHeaderProps) {
|
|
return (
|
|
<header
|
|
className={cn(
|
|
'sticky top-0 z-30 flex h-header-compact items-center gap-3 border-b border-border bg-background-elevated px-4',
|
|
className,
|
|
)}
|
|
{...rest}
|
|
>
|
|
{logo ? <div className="flex items-center">{logo}</div> : null}
|
|
{breadcrumb ? (
|
|
<div className="flex items-center text-data-sm text-foreground-muted">
|
|
{breadcrumb}
|
|
</div>
|
|
) : null}
|
|
{search ? <div className="ml-4 hidden max-w-md flex-1 md:block">{search}</div> : null}
|
|
<div className="ml-auto flex items-center gap-2">{actions}</div>
|
|
</header>
|
|
);
|
|
}
|