32 lines
1.3 KiB
JavaScript
32 lines
1.3 KiB
JavaScript
function NotFoundIcon() {
|
|
return (
|
|
<svg className="empty-state-svg" viewBox="0 0 80 80" fill="none" aria-hidden="true">
|
|
<rect className="empty-state-doc" x="8" y="8" width="46" height="60" rx="6" strokeWidth="2.25" />
|
|
<rect className="empty-state-clip" x="21" y="4" width="20" height="10" rx="3" strokeWidth="2.25" />
|
|
<path className="empty-state-line" d="M20 28h22M20 37h18M20 46h14" strokeWidth="2.25" strokeLinecap="round" />
|
|
<circle className="empty-state-glass" cx="56" cy="54" r="17" strokeWidth="2.5" />
|
|
<path className="empty-state-handle" d="M68.5 66.5 77 75" strokeWidth="3.25" strokeLinecap="round" />
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
export default function EmptyState({ title = 'Not found', description = 'No data to show', size = 'md' }) {
|
|
return (
|
|
<div className={`empty-state${size === 'sm' ? ' is-sm' : ''}`}>
|
|
<NotFoundIcon />
|
|
<p className="empty-state-title">{title}</p>
|
|
{description ? <p className="empty-state-copy">{description}</p> : null}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export function EmptyTableRow({ colSpan = 20, title = 'Not found', description = 'No data to show' }) {
|
|
return (
|
|
<tr className="empty-state-row">
|
|
<td colSpan={colSpan}>
|
|
<EmptyState title={title} description={description} size="sm" />
|
|
</td>
|
|
</tr>
|
|
);
|
|
}
|