| "use client"; | |
| import { cn } from "@/lib/utils"; | |
| // ============================================================================= | |
| // EmptyState — Centered placeholder for empty content areas | |
| // ============================================================================= | |
| export interface CleanEmptyStateProps { | |
| icon?: React.ReactNode; | |
| title: string; | |
| description?: string; | |
| action?: React.ReactNode; | |
| className?: string; | |
| } | |
| export function CleanEmptyState({ icon, title, description, action, className }: CleanEmptyStateProps) { | |
| return ( | |
| <div | |
| className={cn( | |
| "flex flex-col items-center justify-center rounded-xl border border-dashed border-[#E5E7EB] bg-[#FAFAFA] px-6 py-12 text-center", | |
| className, | |
| )} | |
| > | |
| {icon && ( | |
| <div className="mb-3 flex size-12 items-center justify-center rounded-xl bg-[#F3F4F6] text-[#9CA3AF]"> | |
| <span className="[&>svg]:size-5">{icon}</span> | |
| </div> | |
| )} | |
| <h3 className="text-[14px] font-semibold text-[#374151]">{title}</h3> | |
| {description && ( | |
| <p className="mt-1 max-w-[320px] text-[13px] leading-relaxed text-[#9CA3AF]">{description}</p> | |
| )} | |
| {action && <div className="mt-4">{action}</div>} | |
| </div> | |
| ); | |
| } | |