import React from 'react'; import { Button } from "@/components/ui/button"; import { cn } from "@/lib/utils"; // Assumes shadcn's utility for class merging import { FileText, PlusCircle } from 'lucide-react'; import { Search, FolderOpen, AlertTriangle } from 'lucide-react'; // Define the icon type. Using React.ElementType for flexibility. type IconType = React.ElementType | React.FunctionComponent>; // --- 📦 API (Props) Definition --- export interface EmptyStateProps { /** The primary title of the empty state (e.g., "No Documents Found"). */ title: string; /** The detailed descriptive message. */ message: string; /** Optional label for the primary action button. */ actionLabel?: string; /** Optional icon for the primary action button. Defaults to PlusCircle. */ actionIcon?: IconType; /** Callback function when the primary action button is clicked. */ onActionClick?: () => void; /** The main icon to display prominently in the empty state. Defaults to FileText. */ mainIcon?: IconType; /** Optional class name for the container div. */ className?: string; } /** * A professional, accessible, and responsive component for indicating the absence of data. * It guides the user with a clear message and an optional call-to-action. */ const EmptyState: React.FC = ({ title, message, actionLabel, actionIcon: ActionIcon = PlusCircle, // Default to PlusCircle onActionClick, mainIcon: MainIcon = FileText, // Default to FileText className, }) => { const showAction = actionLabel && onActionClick; return (

{/* Main Icon */}

{/* Title */}

{title}

{/* Message */}

{message}

{/* Action Button (Optional) */} {showAction && ( )}

); }; // export default EmptyState; const ExampleUsage = () => { return (

{/* Example 1: Standard Empty State (No Content) */} console.log("Action: Generate Report")} mainIcon={FolderOpen} className="max-w-3xl mx-auto" /> {/* Example 2: Search Empty State */} {/* Example 3: Error/Configuration Empty State (No Action) */}

); }; export default ExampleUsage;