49 lines
1.6 KiB
TypeScript
49 lines
1.6 KiB
TypeScript
// components/EmptyData.tsx
|
|
import { PackageOpen, ShoppingBag } from "lucide-react";
|
|
import { useTranslations } from "next-intl";
|
|
|
|
interface EmptyDataProps {
|
|
title?: string;
|
|
description?: string;
|
|
icon?: "package" | "shopping";
|
|
}
|
|
|
|
export default function EmptyData({
|
|
title,
|
|
description,
|
|
icon = "package",
|
|
}: EmptyDataProps) {
|
|
const t = useTranslations();
|
|
|
|
const Icon = icon === "package" ? PackageOpen : ShoppingBag;
|
|
|
|
return (
|
|
<div className="flex flex-col items-center justify-center min-h-100 py-12 px-4">
|
|
{/* Animated background circles */}
|
|
<div className="relative flex items-center justify-center ">
|
|
{/* Icon */}
|
|
<div className="relative z-10 w-20 h-20 mx-auto mb-6 rounded-full bg-linear-to-br from-[#444242] to-gray-900 border border-white/10 flex items-center justify-center">
|
|
<Icon className="w-10 h-10 text-white/40" strokeWidth={1.5} />
|
|
</div>
|
|
</div>
|
|
|
|
{/* Text content */}
|
|
<div className="text-center space-y-3 max-w-md">
|
|
<h3 className="text-2xl font-unbounded font-bold text-white">
|
|
{title || t("no_data_title")}
|
|
</h3>
|
|
<p className="text-white/50 font-almarai">
|
|
{description || t("no_data_description")}
|
|
</p>
|
|
</div>
|
|
|
|
{/* Decorative elements */}
|
|
<div className="mt-8 flex gap-2">
|
|
<div className="w-2 h-2 rounded-full bg-red-500/30 animate-pulse" />
|
|
<div className="w-2 h-2 rounded-full bg-red-500/30 animate-pulse delay-150" />
|
|
<div className="w-2 h-2 rounded-full bg-red-500/30 animate-pulse delay-300" />
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|