45 lines
1.5 KiB
TypeScript
45 lines
1.5 KiB
TypeScript
'use client';
|
|
|
|
import React from 'react';
|
|
|
|
interface EmptyStateProps {
|
|
icon?: string;
|
|
title: string;
|
|
description?: string;
|
|
actionLabel?: string;
|
|
onAction?: () => void;
|
|
className?: string;
|
|
}
|
|
|
|
export function EmptyState({
|
|
icon = 'inbox',
|
|
title,
|
|
description,
|
|
actionLabel,
|
|
onAction,
|
|
className = '',
|
|
}: EmptyStateProps) {
|
|
return (
|
|
<div
|
|
className={`rounded-xl bg-surface-container/60 border border-outline-variant/50 p-6 flex flex-col items-center justify-center text-center ${className}`}
|
|
>
|
|
<div className="w-11 h-11 rounded-2xl bg-surface-container-high border border-outline-variant/60 flex items-center justify-center text-brand-cyan mb-3 shadow-inner">
|
|
<span className="material-symbols-outlined text-[22px]">{icon}</span>
|
|
</div>
|
|
<h4 className="font-headline text-sm sm:text-base font-bold text-white mb-1">{title}</h4>
|
|
{description && (
|
|
<p className="font-body text-xs text-slate-400 max-w-sm mb-4">{description}</p>
|
|
)}
|
|
{actionLabel && onAction && (
|
|
<button
|
|
onClick={onAction}
|
|
className="h-9 px-4 rounded-xl bg-primary-container text-on-primary-container font-body text-xs font-bold hover:brightness-110 shadow-[0_0_12px_rgba(0,242,254,0.25)] transition-all inline-flex items-center gap-1.5 cursor-pointer"
|
|
>
|
|
<span className="material-symbols-outlined text-[16px]">add</span>
|
|
<span>{actionLabel}</span>
|
|
</button>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|