From 82ca8e3a55f26a8709251f161224e92b93fc5828 Mon Sep 17 00:00:00 2001
From: Mohamed Bassem <me@mbassem.com>
Date: Sun, 9 Mar 2025 15:34:24 +0000
Subject: fix: Add error boundary around bookmark cards

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

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

diff --git a/apps/web/components/dashboard/bookmarks/UnknownCard.tsx b/apps/web/components/dashboard/bookmarks/UnknownCard.tsx
new file mode 100644
index 00000000..970b5e30
--- /dev/null
+++ b/apps/web/components/dashboard/bookmarks/UnknownCard.tsx
@@ -0,0 +1,34 @@
+"use client";
+
+import { useTranslation } from "@/lib/i18n/client";
+import { AlertCircle } from "lucide-react";
+
+import type { ZBookmark } from "@hoarder/shared/types/bookmarks";
+
+import { BookmarkLayoutAdaptingCard } from "./BookmarkLayoutAdaptingCard";
+
+export default function UnknownCard({
+  bookmark,
+  className,
+}: {
+  bookmark: ZBookmark;
+  className?: string;
+}) {
+  const { t } = useTranslation();
+  return (
+    <BookmarkLayoutAdaptingCard
+      title={bookmark.title}
+      bookmark={bookmark}
+      className={className}
+      wrapTags={false}
+      image={(_layout) => (
+        <div className="flex size-full flex-1 flex-col items-center justify-center bg-red-50 dark:bg-red-950/10">
+          <AlertCircle className="mb-3 h-10 w-10 text-red-500" />
+          <h3 className="font-medium text-red-700 dark:text-red-400">
+            {t("common.something_went_wrong")}
+          </h3>
+        </div>
+      )}
+    />
+  );
+}
-- 
cgit v1.2.3-70-g09d2