45 lines
1020 B
TypeScript
45 lines
1020 B
TypeScript
|
/**
|
||
|
|
* EmptyState Component
|
||
|
|
* Display message when no results found
|
||
|
|
*/
|
||
|
|
|
||
|
|
import styles from './EmptyState.module.css';
|
||
|
|
|
||
|
|
interface EmptyStateProps {
|
||
|
|
title: string;
|
||
|
|
message: string;
|
||
|
|
action?: {
|
||
|
|
label: string;
|
||
|
|
onClick: () => void;
|
||
|
|
};
|
||
|
|
}
|
||
|
|
|
||
|
|
export function EmptyState({ title, message, action }: EmptyStateProps) {
|
||
|
|
return (
|
||
|
|
<div className={styles.emptyState}>
|
||
|
|
<div className={styles.icon}>
|
||
|
|
<svg
|
||
|
|
width="64"
|
||
|
|
height="64"
|
||
|
|
viewBox="0 0 24 24"
|
||
|
|
fill="none"
|
||
|
|
stroke="currentColor"
|
||
|
|
strokeWidth="1.5"
|
||
|
|
strokeLinecap="round"
|
||
|
|
strokeLinejoin="round"
|
||
|
|
>
|
||
|
|
<circle cx="11" cy="11" r="8" />
|
||
|
|
<path d="m21 21-4.35-4.35" />
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
<h3 className={styles.title}>{title}</h3>
|
||
|
|
<p className={styles.message}>{message}</p>
|
||
|
|
{action && (
|
||
|
|
<button onClick={action.onClick} className={styles.button}>
|
||
|
|
{action.label}
|
||
|
|
</button>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|