40 lines
1.0 KiB
TypeScript
40 lines
1.0 KiB
TypeScript
import Link from "next/link";
|
|
|
|
interface EmptyStateProps {
|
|
emoji?: string;
|
|
title?: string;
|
|
message: string;
|
|
ctaLabel?: string;
|
|
ctaHref?: string;
|
|
className?: string;
|
|
}
|
|
|
|
export function EmptyState({
|
|
emoji = "💭",
|
|
title,
|
|
message,
|
|
ctaLabel,
|
|
ctaHref,
|
|
className = "",
|
|
}: EmptyStateProps) {
|
|
return (
|
|
<div className={`flex flex-col items-center text-center py-10 gap-2 ${className}`}>
|
|
<span className="text-4xl animate-float-bob select-none" aria-hidden="true">
|
|
{emoji}
|
|
</span>
|
|
{title && (
|
|
<p className="font-bold text-base text-foreground text-shadow-sm">{title}</p>
|
|
)}
|
|
<p className="text-sm text-muted-foreground max-w-xs leading-relaxed">{message}</p>
|
|
{ctaLabel && ctaHref && (
|
|
<Link
|
|
href={ctaHref}
|
|
className="mt-2 inline-flex items-center gap-1.5 px-5 py-2 rounded-full text-sm font-bold text-white fa-gradient-blue shadow-fa-md glossy-effect relative overflow-hidden"
|
|
>
|
|
{ctaLabel}
|
|
</Link>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|