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>
64 lines
1.8 KiB
TypeScript
64 lines
1.8 KiB
TypeScript
import * as React from 'react';
|
|
import { ArrowDown, ArrowUp, Minus } from 'lucide-react';
|
|
import { cn } from '@/lib/utils';
|
|
|
|
export type PriceDeltaDirection = 'up' | 'down' | 'neutral';
|
|
|
|
export interface PriceDeltaProps extends React.HTMLAttributes<HTMLSpanElement> {
|
|
/** Phần trăm thay đổi. Dương = tăng, âm = giảm. */
|
|
value: number;
|
|
/** Đơn vị hiển thị, mặc định "%". */
|
|
unit?: string;
|
|
/** Số chữ số thập phân. */
|
|
precision?: number;
|
|
/** Hiển thị ẩn icon. */
|
|
hideIcon?: boolean;
|
|
/** Ép direction (ưu tiên hơn dấu của value). */
|
|
direction?: PriceDeltaDirection;
|
|
/** Kích cỡ text. */
|
|
size?: 'sm' | 'md' | 'lg';
|
|
}
|
|
|
|
/**
|
|
* Hiển thị biến động giá / % với icon up/down/neutral, dùng signal color.
|
|
* Số luôn render trong font-mono, tabular-nums.
|
|
*/
|
|
export function PriceDelta({
|
|
value,
|
|
unit = '%',
|
|
precision = 2,
|
|
hideIcon = false,
|
|
direction,
|
|
size = 'md',
|
|
className,
|
|
...rest
|
|
}: PriceDeltaProps) {
|
|
const dir: PriceDeltaDirection =
|
|
direction ?? (value > 0 ? 'up' : value < 0 ? 'down' : 'neutral');
|
|
const Icon = dir === 'up' ? ArrowUp : dir === 'down' ? ArrowDown : Minus;
|
|
const colorClass =
|
|
dir === 'up'
|
|
? 'text-signal-up'
|
|
: dir === 'down'
|
|
? 'text-signal-down'
|
|
: 'text-signal-neutral';
|
|
const sizeClass =
|
|
size === 'sm' ? 'text-data-sm' : size === 'lg' ? 'text-data-lg' : 'text-data-md';
|
|
const formatted = `${value > 0 ? '+' : ''}${value.toFixed(precision)}${unit}`;
|
|
return (
|
|
<span
|
|
data-numeric
|
|
className={cn(
|
|
'inline-flex items-center gap-1 font-mono font-medium',
|
|
colorClass,
|
|
sizeClass,
|
|
className,
|
|
)}
|
|
{...rest}
|
|
>
|
|
{!hideIcon ? <Icon className="h-3 w-3" aria-hidden /> : null}
|
|
<span>{formatted}</span>
|
|
</span>
|
|
);
|
|
}
|