Agent Zero
6f1655785e
- mail.ts: add explicit types to decodeMimeHeader callback params - SessionList.tsx: use React.MouseEvent instead of nativeEvent - ComposeModal.tsx: construct name from first_name + last_name - MailDetail.tsx: destructure onReply/onForward from props - RichTextEditor.tsx: use SetContentOptions object instead of boolean - MailSearchBar.tsx: add optional value prop to interface - EmptyState.tsx: add optional children prop - Badge.tsx: add secondary variant to BadgeVariant, variantClasses, dotColors - ConfirmDialog.tsx: add optional children prop - hooks.ts: extend SearchResult type to include mail/file/event
53 lines
1.5 KiB
TypeScript
53 lines
1.5 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;
|
|
children?: React.ReactNode;
|
|
}
|
|
|
|
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>
|
|
);
|
|
}
|