From f6ca0b0c4fb3c1e6d93a00fcce7cb0aee12930c0 Mon Sep 17 00:00:00 2001
From: MohamedBassem <me@mbassem.com>
Date: Sat, 16 Mar 2024 00:34:04 +0000
Subject: ui(web): Add an editor card inline in the bookmark grid and remove
 the top nav buttons

---
 .../dashboard/bookmarks/BookmarksGrid.tsx          | 25 +++++++++++++++-------
 1 file changed, 17 insertions(+), 8 deletions(-)

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

diff --git a/apps/web/components/dashboard/bookmarks/BookmarksGrid.tsx b/apps/web/components/dashboard/bookmarks/BookmarksGrid.tsx
index 185e318e..644991bb 100644
--- a/apps/web/components/dashboard/bookmarks/BookmarksGrid.tsx
+++ b/apps/web/components/dashboard/bookmarks/BookmarksGrid.tsx
@@ -12,9 +12,18 @@ import type {
   ZGetBookmarksRequest,
 } from "@hoarder/trpc/types/bookmarks";
 
+import EditorCard from "./EditorCard";
 import LinkCard from "./LinkCard";
 import TextCard from "./TextCard";
 
+function BookmarkCard({ children }: { children: React.ReactNode }) {
+  return (
+    <Slot className="border-grey-100 mb-4 border bg-gray-50 duration-300 ease-in hover:shadow-lg hover:transition-all">
+      {children}
+    </Slot>
+  );
+}
+
 function getBreakpointConfig() {
   const fullConfig = resolveConfig(tailwindConfig);
 
@@ -37,22 +46,17 @@ function renderBookmark(bookmark: ZBookmark) {
       comp = <TextCard bookmark={bookmark} />;
       break;
   }
-  return (
-    <Slot
-      key={bookmark.id}
-      className="border-grey-100 mb-4 border bg-gray-50 duration-300 ease-in hover:shadow-lg hover:transition-all"
-    >
-      {comp}
-    </Slot>
-  );
+  return <BookmarkCard key={bookmark.id}>{comp}</BookmarkCard>;
 }
 
 export default function BookmarksGrid({
   query,
   bookmarks: initialBookmarks,
+  showEditorCard = false,
 }: {
   query: ZGetBookmarksRequest;
   bookmarks: ZBookmark[];
+  showEditorCard?: boolean;
 }) {
   const { data } = api.bookmarks.getBookmarks.useQuery(query, {
     initialData: { bookmarks: initialBookmarks },
@@ -63,6 +67,11 @@ export default function BookmarksGrid({
   }
   return (
     <Masonry className="flex gap-4" breakpointCols={breakpointConfig}>
+      {showEditorCard && (
+        <BookmarkCard>
+          <EditorCard />
+        </BookmarkCard>
+      )}
       {data.bookmarks.map((b) => renderBookmark(b))}
     </Masonry>
   );
-- 
cgit v1.2.3-70-g09d2