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>
42 lines
1.2 KiB
TypeScript
42 lines
1.2 KiB
TypeScript
import * as React from 'react';
|
|
import { cn } from '@/lib/utils';
|
|
|
|
export interface EmptyStateProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
/** Tiêu đề thông báo */
|
|
title: string;
|
|
/** Mô tả phụ */
|
|
description?: string;
|
|
/** Icon hoặc illustration */
|
|
icon?: React.ReactNode;
|
|
/** CTA tuỳ chọn */
|
|
action?: React.ReactNode;
|
|
}
|
|
|
|
/**
|
|
* EmptyState — hiển thị khi danh sách/bảng không có dữ liệu.
|
|
*/
|
|
export function EmptyState({ title, description, icon, action, className, ...props }: EmptyStateProps) {
|
|
return (
|
|
<div
|
|
className={cn(
|
|
'flex flex-col items-center justify-center gap-4 py-16 text-center',
|
|
className,
|
|
)}
|
|
{...props}
|
|
>
|
|
{icon && (
|
|
<div className="flex h-16 w-16 items-center justify-center rounded-full bg-muted text-foreground-muted">
|
|
{icon}
|
|
</div>
|
|
)}
|
|
<div className="max-w-xs space-y-1">
|
|
<p className="text-sm font-medium text-foreground">{title}</p>
|
|
{description && (
|
|
<p className="text-xs text-foreground-muted">{description}</p>
|
|
)}
|
|
</div>
|
|
{action && <div>{action}</div>}
|
|
</div>
|
|
);
|
|
}
|