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

---
 .../components/dashboard/bookmarks/BookmarksGrid.tsx  |  3 ++-
 .../dashboard/bookmarks/NoBookmarksBanner.tsx         | 19 +++++++++++++++++++
 apps/web/lib/i18n/locales/en/translation.json         |  6 ++++++
 3 files changed, 27 insertions(+), 1 deletion(-)
 create mode 100644 apps/web/components/dashboard/bookmarks/NoBookmarksBanner.tsx

(limited to 'apps/web')

diff --git a/apps/web/components/dashboard/bookmarks/BookmarksGrid.tsx b/apps/web/components/dashboard/bookmarks/BookmarksGrid.tsx
index b8e8d1e6..8ac90d0a 100644
--- a/apps/web/components/dashboard/bookmarks/BookmarksGrid.tsx
+++ b/apps/web/components/dashboard/bookmarks/BookmarksGrid.tsx
@@ -1,4 +1,5 @@
 import { useEffect, useMemo } from "react";
+import NoBookmarksBanner from "@/components/dashboard/bookmarks/NoBookmarksBanner";
 import { ActionButton } from "@/components/ui/action-button";
 import useBulkActionsStore from "@/lib/bulkActions";
 import {
@@ -70,7 +71,7 @@ export default function BookmarksGrid({
   }, [loadMoreButtonInView]);
 
   if (bookmarks.length == 0 && !showEditorCard) {
-    return <p>No bookmarks</p>;
+    return <NoBookmarksBanner />;
   }
 
   const children = [
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>
+  );
+}
diff --git a/apps/web/lib/i18n/locales/en/translation.json b/apps/web/lib/i18n/locales/en/translation.json
index f266fcd9..2a181285 100644
--- a/apps/web/lib/i18n/locales/en/translation.json
+++ b/apps/web/lib/i18n/locales/en/translation.json
@@ -346,6 +346,12 @@
       "updated": "List has been updated!"
     }
   },
+  "banners": {
+    "no_bookmarks": {
+      "title": "No bookmarks yet",
+      "description": "Save interesting articles, links, and pages to access them quickly later."
+    }
+  },
   "cleanups": {
     "cleanups": "Cleanups",
     "duplicate_tags": {
-- 
cgit v1.2.3-70-g09d2