refactor: Use a Slot for passing classnames to children instead

3 files changed, 15 insertions, 15 deletions

diff --git a/packages/web/app/dashboard/bookmarks/components/BookmarksGrid.tsx b/packages/web/app/dashboard/bookmarks/components/BookmarksGrid.tsx
index 7f7dda5c..f05d240e 100644
--- a/packages/web/app/dashboard/bookmarks/components/BookmarksGrid.tsx
+++ b/packages/web/app/dashboard/bookmarks/components/BookmarksGrid.tsx
@@ -4,18 +4,23 @@ import LinkCard from "./LinkCard";
 import { ZBookmark, ZGetBookmarksRequest } from "@/lib/types/api/bookmarks";
 import { api } from "@/lib/trpc";
 import TextCard from "./TextCard";
+import { Slot } from "@radix-ui/react-slot";
 
-function renderBookmark(bookmark: ZBookmark, className: string) {
+function renderBookmark(bookmark: ZBookmark) {
+  let comp;
   switch (bookmark.content.type) {
     case "link":
-      return (
-        <LinkCard key={bookmark.id} bookmark={bookmark} className={className} />
-      );
+      comp = <LinkCard key={bookmark.id} bookmark={bookmark} />;
+      break;
     case "text":
-      return (
-        <TextCard key={bookmark.id} bookmark={bookmark} className={className} />
-      );
+      comp = <TextCard key={bookmark.id} bookmark={bookmark} />;
+      break;
   }
+  return (
+    <Slot className="border-grey-100 mb-4 border bg-gray-50 duration-300 ease-in hover:border-blue-300 hover:transition-all">
+      {comp}
+    </Slot>
+  );
 }
 
 export default function BookmarksGrid({
@@ -33,12 +38,7 @@ export default function BookmarksGrid({
   }
   return (
     <div className="columns-1 gap-4 transition-all duration-300 md:columns-2 lg:columns-3">
-      {data.bookmarks.map((b) =>
-        renderBookmark(
-          b,
-          "border-grey-100 border bg-gray-50 duration-300 ease-in hover:border-blue-300 hover:transition-all mb-4",
-        ),
-      )}
+      {data.bookmarks.map((b) => renderBookmark(b))}
     </div>
   );
 }
diff --git a/packages/web/app/dashboard/bookmarks/components/LinkCard.tsx b/packages/web/app/dashboard/bookmarks/components/LinkCard.tsx
index 146f782f..bff0644b 100644
--- a/packages/web/app/dashboard/bookmarks/components/LinkCard.tsx
+++ b/packages/web/app/dashboard/bookmarks/components/LinkCard.tsx
@@ -28,7 +28,7 @@ export default function LinkCard({
   className,
 }: {
   bookmark: ZBookmark;
-  className: string;
+  className?: string;
 }) {
   const { data: bookmark } = api.bookmarks.getBookmark.useQuery(
     {
diff --git a/packages/web/app/dashboard/bookmarks/components/TextCard.tsx b/packages/web/app/dashboard/bookmarks/components/TextCard.tsx
index 29d22352..5d571356 100644
--- a/packages/web/app/dashboard/bookmarks/components/TextCard.tsx
+++ b/packages/web/app/dashboard/bookmarks/components/TextCard.tsx
@@ -16,7 +16,7 @@ export default function TextCard({
   className,
 }: {
   bookmark: ZBookmark;
-  className: string;
+  className?: string;
 }) {
   const { data: bookmark } = api.bookmarks.getBookmark.useQuery(
     {