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>
59 lines
1.7 KiB
TypeScript
59 lines
1.7 KiB
TypeScript
import * as React from 'react';
|
|
import { cn } from '@/lib/utils';
|
|
import { PriceDelta, type PriceDeltaDirection } from './price-delta';
|
|
|
|
export interface MarketIndexProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
/** Tên index, vd "GGX Market". */
|
|
name: string;
|
|
/** Giá trị hiện tại. */
|
|
value: string | number;
|
|
/** Biến động % so với mốc tham chiếu. */
|
|
changePercent: number;
|
|
/** Biến động tuyệt đối (optional). */
|
|
change?: string | number;
|
|
/** Khung thời gian, vd "24h". */
|
|
window?: string;
|
|
/** Ép direction cho delta. */
|
|
direction?: PriceDeltaDirection;
|
|
}
|
|
|
|
/**
|
|
* Index lớn hiển thị chỉ số thị trường tổng: dùng cho header/hero dashboard.
|
|
*/
|
|
export function MarketIndex({
|
|
name,
|
|
value,
|
|
changePercent,
|
|
change,
|
|
window = '24h',
|
|
direction,
|
|
className,
|
|
...rest
|
|
}: MarketIndexProps) {
|
|
return (
|
|
<div className={cn('flex items-end gap-4', className)} {...rest}>
|
|
<div className="flex flex-col">
|
|
<span className="text-xs font-medium uppercase tracking-wider text-foreground-muted">
|
|
{name}
|
|
</span>
|
|
<span
|
|
data-numeric
|
|
className="font-mono text-3xl font-semibold leading-none text-foreground"
|
|
>
|
|
{value}
|
|
</span>
|
|
</div>
|
|
<div className="flex flex-col items-start gap-0.5 pb-1">
|
|
<PriceDelta value={changePercent} size="md" direction={direction} />
|
|
{typeof change !== 'undefined' ? (
|
|
<span data-numeric className="font-mono text-[11px] text-foreground-muted">
|
|
{change} ({window})
|
|
</span>
|
|
) : (
|
|
<span className="text-[11px] text-foreground-dim">{window}</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|