Files
pn-new-crm/src/components/shared/empty-state.tsx
Matt 4c20bcffcd
Some checks failed
Build & Push Docker Images / lint (push) Failing after 1m10s
Build & Push Docker Images / build-and-push (push) Has been skipped
Build & Push Docker Images / deploy (push) Has been skipped
Fix all ESLint errors: remove unused imports, replace any types
- Remove ~60 unused imports and variables across 88 files
- Replace ~80 `any` type annotations with proper types (unknown,
  Record<string, unknown>, or specific types)
- Prefix unused callback args with underscore
- Fix unescaped JSX entities
- Lint now passes cleanly (0 errors, 2 intentional img warnings)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-26 12:06:18 +01:00

45 lines
1.2 KiB
TypeScript

import { type ElementType } from 'react';
import { cn } from '@/lib/utils';
import { Button } from '@/components/ui/button';
interface EmptyStateProps {
icon?: ElementType;
title: string;
description?: string;
action?: {
label: string;
onClick: () => void;
};
className?: string;
}
/**
* Centered empty-state pattern with icon, title, description, and optional CTA.
* Used when a list or table has no data.
*/
export function EmptyState({ icon: Icon, title, description, action, className }: EmptyStateProps) {
return (
<div
className={cn(
'flex flex-col items-center justify-center text-center py-16 px-4',
className,
)}
>
{Icon && (
<div className="w-12 h-12 rounded-full bg-muted flex items-center justify-center mb-4">
<Icon className="w-6 h-6 text-muted-foreground" />
</div>
)}
<h3 className="text-base font-semibold text-foreground mb-1">{title}</h3>
{description && (
<p className="text-sm text-muted-foreground max-w-sm mb-4">{description}</p>
)}
{action && (
<Button onClick={action.onClick} size="sm">
{action.label}
</Button>
)}
</div>
);
}