TorbatYar/frontend/modules/commercial/components/CommercialEmptyState.tsx
2026-07-28 20:39:10 +03:30

52 lines
1.5 KiB
TypeScript

"use client";
import Link from "next/link";
import { Button } from "@/components/ui";
export function CommercialEmptyState({
title,
description,
actionHref,
actionLabel,
secondaryHref,
secondaryLabel,
hint,
}: {
title: string;
description?: string;
actionHref?: string;
actionLabel?: string;
secondaryHref?: string;
secondaryLabel?: string;
hint?: string;
}) {
return (
<div
className="rounded-2xl border border-dashed border-gray-200 bg-gray-50/80 px-6 py-12 text-center dark:border-gray-700 dark:bg-gray-900/50"
role="status"
>
<p className="text-base font-semibold text-secondary dark:text-gray-100">{title}</p>
{description ? (
<p className="mx-auto mt-2 max-w-md text-sm text-gray-600 dark:text-gray-400">{description}</p>
) : null}
{hint ? <p className="mx-auto mt-2 max-w-md text-xs text-gray-400">{hint}</p> : null}
{(actionHref && actionLabel) || (secondaryHref && secondaryLabel) ? (
<div className="mt-5 flex flex-wrap items-center justify-center gap-2">
{actionHref && actionLabel ? (
<Link href={actionHref}>
<Button variant="outline" size="sm">
{actionLabel}
</Button>
</Link>
) : null}
{secondaryHref && secondaryLabel ? (
<Link href={secondaryHref}>
<Button size="sm">{secondaryLabel}</Button>
</Link>
) : null}
</div>
) : null}
</div>
);
}