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

1 files changed, 19 insertions, 0 deletions

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