feat(web): A slightly better looking banner when no bookmarks are found

2 files changed, 21 insertions, 1 deletions

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>
+  );
+}