From d86628dfabe8b9c17c7dd68b3d291104c3b25704 Mon Sep 17 00:00:00 2001
From: MohamedBassem <me@mbassem.com>
Date: Sun, 6 Apr 2025 23:29:24 +0100
Subject: feat(web): A slightly better looking banner when no bookmarks are
 found

---
 .../dashboard/bookmarks/NoBookmarksBanner.tsx         | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)
 create mode 100644 apps/web/components/dashboard/bookmarks/NoBookmarksBanner.tsx

(limited to 'apps/web/components/dashboard/bookmarks/NoBookmarksBanner.tsx')

diff --git a/apps/web/components/dashboard/bookmarks/NoBookmarksBanner.tsx b/apps/web/components/dashboard/bookmarks/NoBookmarksBanner.tsx
new file mode 100644
index 00000000..70788f44
--- /dev/null
+++ b/apps/web/components/dashboard/bookmarks/NoBookmarksBanner.tsx
@@ -0,0 +1,19 @@
+import { useTranslation } from "@/lib/i18n/client";
+import { Bookmark } from "lucide-react";
+
+export default function NoBookmarksBanner() {
+  const { t } = useTranslation();
+  return (
+    <div className="flex flex-col items-center justify-center rounded-lg bg-slate-50 p-10 text-center shadow-sm dark:bg-slate-700/50 dark:shadow-md">
+      <div className="mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-slate-100 dark:bg-slate-700">
+        <Bookmark className="h-8 w-8 text-slate-400 dark:text-slate-300" />
+      </div>
+      <h3 className="mb-2 text-xl font-medium text-slate-700 dark:text-slate-100">
+        {t("banners.no_bookmarks.title")}
+      </h3>
+      <p className="mb-6 max-w-md text-slate-500 dark:text-slate-400">
+        {t("banners.no_bookmarks.description")}
+      </p>
+    </div>
+  );
+}
-- 
cgit v1.2.3-70-g09d2