fix: show EmptyState when no papers found

Author: rupeshhh007

src/components/CatalogueContent.tsx

@@ -25,6 +25,7 @@ import type { ICourses } from "@/interface";
 import JSZip from "jszip";
 import { toast } from "react-hot-toast";
 import { useCourses } from "@/context/courseContext";
+import EmptyState from "./ui/EmptyState";
 
 const CatalogueContent = () => {
   const router = useRouter();
@@ -440,7 +441,9 @@ const CatalogueContent = () => {
                   />
                 ))
               ) : (
-                <p>No papers available with the applied filter</p>
+                <div className="col-span-full flex justify-center">
+                  <EmptyState />
+                </div>
               )
             ) : (
               papers.map((paper: IPaper) => (

src/components/ui/EmptyState.tsx

@@ -0,0 +1,16 @@
+import { FileSearch } from "lucide-react";
+
+export default function EmptyState() {
+  return (
+    <div className="flex flex-col items-center justify-center py-20 text-center">
+      <FileSearch className="w-16 h-16 text-gray-500 mb-4" />
+      <h2 className="text-2xl font-semibold text-gray-200">
+        No Papers Found
+      </h2>
+      <p className="text-gray-400 mt-2 max-w-md">
+        Looks like there are no papers for the filters you’ve applied.
+        Try resetting your filters to see all available papers.
+      </p>
+    </div>
+  );
+}