52 lines
1.4 KiB
TypeScript
52 lines
1.4 KiB
TypeScript
|
import React from 'react';
|
||
|
|
import clsx from 'clsx';
|
||
|
|
import { useTranslation } from 'react-i18next';
|
||
|
|
|
||
|
|
export interface EmptyStateProps {
|
||
|
|
title?: string;
|
||
|
|
description?: string;
|
||
|
|
icon?: React.ReactNode;
|
||
|
|
action?: React.ReactNode;
|
||
|
|
className?: string;
|
||
|
|
}
|
||
|
|
|
||
|
|
export function EmptyState({
|
||
|
|
title,
|
||
|
|
description,
|
||
|
|
icon,
|
||
|
|
action,
|
||
|
|
className,
|
||
|
|
}: EmptyStateProps) {
|
||
|
|
const { t } = useTranslation();
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div
|
||
|
|
className={clsx(
|
||
|
|
'flex flex-col items-center justify-center py-12 px-6 text-center',
|
||
|
|
className
|
||
|
|
)}
|
||
|
|
role="status"
|
||
|
|
>
|
||
|
|
{icon && (
|
||
|
|
<div className="mb-4 text-secondary-300" aria-hidden="true">
|
||
|
|
{icon}
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
{!icon && (
|
||
|
|
<div className="mb-4 w-16 h-16 rounded-full bg-secondary-100 flex items-center justify-center" aria-hidden="true">
|
||
|
|
<svg className="w-8 h-8 text-secondary-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M9 13h6m-3-3v6m-9 1V7a2 2 0 012-2h6l2 2h6a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2z" />
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
<h3 className="text-lg font-semibold text-secondary-900">
|
||
|
|
{title || t('emptyState.title')}
|
||
|
|
</h3>
|
||
|
|
<p className="mt-1 text-sm text-secondary-500 max-w-sm">
|
||
|
|
{description || t('emptyState.description')}
|
||
|
|
</p>
|
||
|
|
{action && <div className="mt-6">{action}</div>}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|