catalog part connected to backend , added empty data and loading component

components/EmptyData.tsx

@@ -0,0 +1,48 @@
+// 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>
+  );
+}