28 lines
933 B
TypeScript
28 lines
933 B
TypeScript
|
import Link from "next/link";
|
||
|
|
import type { ReactNode } from "react";
|
||
|
|
|
||
|
|
type EmptyStateProps = {
|
||
|
|
title: string;
|
||
|
|
description?: string;
|
||
|
|
action?: { href: string; label: string };
|
||
|
|
icon?: ReactNode;
|
||
|
|
};
|
||
|
|
|
||
|
|
export function EmptyState({ title, description, action, icon }: EmptyStateProps) {
|
||
|
|
return (
|
||
|
|
<div className="flex flex-col items-center justify-center gap-2 rounded-lg border border-dashed border-muted/40 px-6 py-10 text-center">
|
||
|
|
{icon ? <div className="text-fg/40">{icon}</div> : null}
|
||
|
|
<div className="text-base font-semibold text-fg">{title}</div>
|
||
|
|
{description ? <p className="max-w-sm text-sm text-fg/60">{description}</p> : null}
|
||
|
|
{action ? (
|
||
|
|
<Link
|
||
|
|
href={action.href}
|
||
|
|
className="mt-2 rounded-md bg-accent px-4 py-2 text-sm font-semibold text-fg transition-opacity hover:opacity-90"
|
||
|
|
>
|
||
|
|
{action.label}
|
||
|
|
</Link>
|
||
|
|
) : null}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|