Blogs listing + Categories

frontend/app/(main)/blogs/no-blogs.tsx

@@ -0,0 +1,27 @@
+"use client";
+import { Button } from "@/components/ui/button"; // You can use your button component from your UI library
+import { Card } from "@/components/ui/card";
+import { CircleXIcon, RotateCwIcon } from "lucide-react"; // Optional icon
+
+export default function NoBlogs() {
+	return (
+		<div className="flex justify-center items-center p-8">
+			<Card className="w-full md:w-96 p-6 bg-transparent border-transparent shadow-none text-center flex flex-col">
+				<h3 className="text-xl font-semibold mb-4">
+					Aucun blog trouvé.
+				</h3>
+				<p className="text-gray-500 mb-6">
+					Nous n'avons pu trouver aucun blog.
+				</p>
+				<Button
+					variant="outline"
+					className="flex items-center justify-center gap-2"
+					onClick={() => window.location.reload()}
+				>
+					<RotateCwIcon className="h-4 w-4" />
+					Réessayer
+				</Button>
+			</Card>
+		</div>
+	);
+}