f81a2492c6
- Responsive sidebar: collapses on mobile with hamburger menu, slide-in animation - Skeleton loaders: dashboard cards, case table, case detail page - Empty states: friendly messages with icons for cases, deadlines, parties, documents - Error states: retry button on dashboard, proper error message on case not found - Form validation: inline error messages on case creation form - German language: fix all missing umlauts (Zurück, wählen, Anhängig, Verfügung, etc.) - Status labels: display German translations instead of raw status values - Transitions: fade-in animations on page load, hover/transition-colors on all interactive elements - Focus states: focus-visible ring for keyboard accessibility - Mobile layout: stacking for filters, forms, tabs; horizontal scroll for tables - Extraction results: card layout on mobile, table on desktop - Missing types: add DashboardData, DeadlineSummary, CaseSummary, ExtractedDeadline etc. - Fix QuickActions links to use correct routes (/cases/new, /ai/extract) - Consistent input focus styles across all forms
29 lines
810 B
TypeScript
29 lines
810 B
TypeScript
import type { LucideIcon } from "lucide-react";
|
|
|
|
interface EmptyStateProps {
|
|
icon: LucideIcon;
|
|
title: string;
|
|
description?: string;
|
|
action?: React.ReactNode;
|
|
}
|
|
|
|
export function EmptyState({
|
|
icon: Icon,
|
|
title,
|
|
description,
|
|
action,
|
|
}: EmptyStateProps) {
|
|
return (
|
|
<div className="flex flex-col items-center justify-center rounded-xl border border-dashed border-neutral-300 bg-white px-6 py-12 text-center">
|
|
<div className="rounded-xl bg-neutral-100 p-3">
|
|
<Icon className="h-6 w-6 text-neutral-400" />
|
|
</div>
|
|
<h3 className="mt-3 text-sm font-medium text-neutral-900">{title}</h3>
|
|
{description && (
|
|
<p className="mt-1 max-w-sm text-sm text-neutral-500">{description}</p>
|
|
)}
|
|
{action && <div className="mt-4">{action}</div>}
|
|
</div>
|
|
);
|
|
}
|