andras/perfect-postcode
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages 2 Wiki Activity Actions

Unify empty state

Browse source
This commit is contained in:
Andras Schmelczer 2026-02-07 10:12:52 +00:00
parent 5f060d2994
commit 4e3fcd7252
4 changed files with 34 additions and 21 deletions
Download patch file Download diff file Expand all files Collapse all files

30
frontend/src/components/ui/EmptyState.tsx
View file

@ -1,31 +1,27 @@
import type { ReactNode } from 'react';
interface EmptyStateProps {
icon?: ReactNode;
icon: ReactNode;
title: string;
description?: string;
description: string;
centered?: boolean;
className?: string;
}
export function EmptyState({ icon, title, description, className = '' }: EmptyStateProps) {
export function EmptyState({
icon,
title,
description,
centered = false,
className = '',
}: EmptyStateProps) {
return (
<div
className={`flex flex-col items-center justify-center py-8 text-center ${className}`}
className={`flex flex-col items-center justify-center text-center ${centered ? 'h-full px-4' : 'py-8'} ${className}`}
>
{icon && <div className="mb-2">{icon}</div>}
<div className="mb-2">{icon}</div>
<span className="text-sm font-medium text-warm-400 dark:text-warm-500">{title}</span>
{description && (
<span className="text-xs text-warm-400 dark:text-warm-500 mt-1">{description}</span>
)}
</div>
);
}
// Centered message variant for panes
export function PaneEmptyState({ message }: { message: string }) {
return (
<div className="flex items-center justify-center h-full text-warm-500 dark:text-warm-400 px-4 text-center text-sm">
{message}
<span className="text-xs text-warm-400 dark:text-warm-500 mt-1">{description}</span>
</div>
);
}