30 lines
742 B
TypeScript
30 lines
742 B
TypeScript
|
import React, { memo } from 'react';
|
||
|
|
|
||
|
|
export const EmptyState = memo(function EmptyState({
|
||
|
|
title,
|
||
|
|
description,
|
||
|
|
icon,
|
||
|
|
action,
|
||
|
|
}: {
|
||
|
|
title: string;
|
||
|
|
description?: string;
|
||
|
|
icon?: React.ReactNode;
|
||
|
|
action?: React.ReactNode;
|
||
|
|
}): JSX.Element {
|
||
|
|
return (
|
||
|
|
<div
|
||
|
|
data-testid="empty-state"
|
||
|
|
className="flex flex-col items-center justify-center gap-3 py-12 px-6 text-center"
|
||
|
|
>
|
||
|
|
{icon && (
|
||
|
|
<div className="text-text-muted text-4xl">{icon}</div>
|
||
|
|
)}
|
||
|
|
<p className="text-sm font-medium text-text-secondary">{title}</p>
|
||
|
|
{description && (
|
||
|
|
<p className="text-xs text-text-muted max-w-xs">{description}</p>
|
||
|
|
)}
|
||
|
|
{action && <div className="mt-2">{action}</div>}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
});
|