35 lines
1.3 KiB
TypeScript
35 lines
1.3 KiB
TypeScript
|
import Link from "next/link"
|
||
|
|
import type { LucideIcon } from "lucide-react"
|
||
|
|
import { cn } from "@/lib/utils"
|
||
|
|
|
||
|
|
interface EmptyStateProps {
|
||
|
|
icon: LucideIcon
|
||
|
|
title: string
|
||
|
|
description: string
|
||
|
|
action?: { label: string; href: string }
|
||
|
|
className?: string
|
||
|
|
}
|
||
|
|
|
||
|
|
export function EmptyState({ icon: Icon, title, description, action, className }: EmptyStateProps) {
|
||
|
|
return (
|
||
|
|
<div className={cn("flex flex-col items-center justify-center py-20 text-center", className)}>
|
||
|
|
<div className="relative">
|
||
|
|
<div className="absolute inset-0 rounded-2xl bg-indigo-500/10 blur-xl" />
|
||
|
|
<div className="relative flex h-16 w-16 items-center justify-center rounded-2xl border border-white/[0.08] bg-gradient-to-br from-white/[0.07] to-white/[0.02]">
|
||
|
|
<Icon className="h-7 w-7 text-white/40" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<h3 className="mt-5 text-base font-semibold text-white">{title}</h3>
|
||
|
|
<p className="mt-2 max-w-xs text-sm leading-relaxed text-white/40">{description}</p>
|
||
|
|
{action && (
|
||
|
|
<Link
|
||
|
|
href={action.href}
|
||
|
|
className="mt-6 rounded-xl bg-indigo-600 px-5 py-2.5 text-sm font-semibold text-white transition hover:bg-indigo-500 hover:shadow-lg hover:shadow-indigo-500/25"
|
||
|
|
>
|
||
|
|
{action.label}
|
||
|
|
</Link>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|