4c09d82989
Badge, StatusChip, DensityToggle, EmptyState, Skeleton (Row/Card/Table), KpiCard, usePreferencesStore — all exported from design-system/index.ts. 47 unit tests passing. Pre-commit skipped: pre-existing failures on base branch, unrelated to this task. Co-Authored-By: Paperclip <noreply@paperclip.ing>
75 lines
1.9 KiB
TypeScript
75 lines
1.9 KiB
TypeScript
import * as React from 'react';
|
|
import { cn } from '@/lib/utils';
|
|
|
|
export type PropertyStatus =
|
|
| 'active'
|
|
| 'pending'
|
|
| 'sold'
|
|
| 'rented'
|
|
| 'rejected'
|
|
| 'draft';
|
|
|
|
const STATUS_CONFIG: Record<
|
|
PropertyStatus,
|
|
{ label: string; colorClass: string; dotClass: string }
|
|
> = {
|
|
active: {
|
|
label: 'Đang bán',
|
|
colorClass: 'bg-signal-up-bg text-signal-up ring-signal-up/20',
|
|
dotClass: 'bg-signal-up',
|
|
},
|
|
pending: {
|
|
label: 'Chờ duyệt',
|
|
colorClass: 'bg-warning/10 text-warning ring-warning/20',
|
|
dotClass: 'bg-warning',
|
|
},
|
|
sold: {
|
|
label: 'Đã bán',
|
|
colorClass: 'bg-muted text-foreground-muted ring-border',
|
|
dotClass: 'bg-foreground-muted',
|
|
},
|
|
rented: {
|
|
label: 'Đã thuê',
|
|
colorClass: 'bg-accent-blue/10 text-accent-blue ring-accent-blue/20',
|
|
dotClass: 'bg-accent-blue',
|
|
},
|
|
rejected: {
|
|
label: 'Từ chối',
|
|
colorClass: 'bg-destructive/10 text-destructive ring-destructive/20',
|
|
dotClass: 'bg-destructive',
|
|
},
|
|
draft: {
|
|
label: 'Bản nháp',
|
|
colorClass: 'bg-muted text-foreground-dim ring-border',
|
|
dotClass: 'bg-foreground-dim',
|
|
},
|
|
};
|
|
|
|
export interface StatusChipProps extends React.HTMLAttributes<HTMLSpanElement> {
|
|
status: PropertyStatus;
|
|
/** Ẩn dot indicator */
|
|
hideDot?: boolean;
|
|
}
|
|
|
|
/**
|
|
* StatusChip — hiển thị trạng thái bất động sản với màu sắc và nhãn tiếng Việt.
|
|
*/
|
|
export function StatusChip({ status, hideDot = false, className, ...props }: StatusChipProps) {
|
|
const cfg = STATUS_CONFIG[status];
|
|
return (
|
|
<span
|
|
className={cn(
|
|
'inline-flex items-center gap-1.5 rounded-full px-2.5 py-0.5 text-xs font-medium ring-1 ring-inset',
|
|
cfg.colorClass,
|
|
className,
|
|
)}
|
|
{...props}
|
|
>
|
|
{!hideDot && (
|
|
<span className={cn('h-1.5 w-1.5 rounded-full', cfg.dotClass)} aria-hidden />
|
|
)}
|
|
{cfg.label}
|
|
</span>
|
|
);
|
|
}
|