45 lines
1.5 KiB
TypeScript
45 lines
1.5 KiB
TypeScript
type ProductEmptyStateProps = {
|
|
title?: string;
|
|
description?: string;
|
|
};
|
|
|
|
export default function ProductEmptyState({
|
|
title = "محصولی پیدا نشد",
|
|
description = "با فیلترهای انتخابشده نتیجهای وجود ندارد. فیلترها را تغییر دهید یا همه را پاک کنید.",
|
|
}: ProductEmptyStateProps) {
|
|
return (
|
|
<div
|
|
dir="rtl"
|
|
className="mx-auto flex w-full max-w-[1920px] flex-col items-center justify-center px-4 py-20 text-center sm:px-6 sm:py-28 lg:px-[120px] lg:py-32"
|
|
role="status"
|
|
>
|
|
<div className="flex size-24 items-center justify-center rounded-full border border-[#818181]/35 bg-[#f7f7f7] sm:size-28">
|
|
<svg
|
|
width="40"
|
|
height="40"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
aria-hidden
|
|
className="text-[#818181]"
|
|
>
|
|
<path
|
|
d="M4 7h16l-1.2 12.2A2 2 0 0 1 16.81 21H7.19a2 2 0 0 1-1.99-1.8L4 7Z"
|
|
stroke="currentColor"
|
|
strokeWidth="1.5"
|
|
/>
|
|
<path
|
|
d="M9 10v7M15 10v7M8 7l1.2-2.4A1 1 0 0 1 10.1 4h3.8a1 1 0 0 1 .9.6L16 7"
|
|
stroke="currentColor"
|
|
strokeWidth="1.5"
|
|
strokeLinecap="round"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<h2 className="mt-6 text-xl font-normal text-ink sm:text-2xl">{title}</h2>
|
|
<p className="mt-3 max-w-md text-sm font-light leading-7 text-[#6a6a6a] sm:text-base">
|
|
{description}
|
|
</p>
|
|
</div>
|
|
);
|
|
}
|