aboutsummaryrefslogtreecommitdiffstats
path: root/packages/web/app/dashboard/bookmarks/components/BookmarksGrid.tsx
diff options
context:
space:
mode:
authorMohamedBassem <me@mbassem.com>2024-03-10 17:59:58 +0000
committerMohamedBassem <me@mbassem.com>2024-03-10 17:59:58 +0000
commitd6dd76021226802adf5295b3243d6f2ae4fa5cc2 (patch)
tree7a25423d46db9e0e224b5f58b73cec5768953b44 /packages/web/app/dashboard/bookmarks/components/BookmarksGrid.tsx
parent8ab868d3f94cc6609d278dc952432f1a244c3f84 (diff)
downloadkarakeep-d6dd76021226802adf5295b3243d6f2ae4fa5cc2.tar.zst
refactor: Move all components to the top level directory
Diffstat (limited to 'packages/web/app/dashboard/bookmarks/components/BookmarksGrid.tsx')
-rw-r--r--packages/web/app/dashboard/bookmarks/components/BookmarksGrid.tsx64
1 files changed, 0 insertions, 64 deletions
diff --git a/packages/web/app/dashboard/bookmarks/components/BookmarksGrid.tsx b/packages/web/app/dashboard/bookmarks/components/BookmarksGrid.tsx
deleted file mode 100644
index 4d5b6b0a..00000000
--- a/packages/web/app/dashboard/bookmarks/components/BookmarksGrid.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-"use client";
-
-import LinkCard from "./LinkCard";
-import { ZBookmark, ZGetBookmarksRequest } from "@hoarder/trpc/types/bookmarks";
-import { api } from "@/lib/trpc";
-import TextCard from "./TextCard";
-import { Slot } from "@radix-ui/react-slot";
-import Masonry from "react-masonry-css";
-import resolveConfig from "tailwindcss/resolveConfig";
-import tailwindConfig from "@/tailwind.config";
-import { useMemo } from "react";
-
-function getBreakpointConfig() {
- const fullConfig = resolveConfig(tailwindConfig);
-
- const breakpointColumnsObj: { [key: number]: number; default: number } = {
- default: 3,
- };
- breakpointColumnsObj[parseInt(fullConfig.theme.screens.lg)] = 2;
- breakpointColumnsObj[parseInt(fullConfig.theme.screens.md)] = 1;
- breakpointColumnsObj[parseInt(fullConfig.theme.screens.sm)] = 1;
- return breakpointColumnsObj;
-}
-
-function renderBookmark(bookmark: ZBookmark) {
- let comp;
- switch (bookmark.content.type) {
- case "link":
- comp = <LinkCard bookmark={bookmark} />;
- break;
- case "text":
- 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:border-blue-300 hover:transition-all"
- >
- {comp}
- </Slot>
- );
-}
-
-export default function BookmarksGrid({
- query,
- bookmarks: initialBookmarks,
-}: {
- query: ZGetBookmarksRequest;
- bookmarks: ZBookmark[];
-}) {
- const { data } = api.bookmarks.getBookmarks.useQuery(query, {
- initialData: { bookmarks: initialBookmarks },
- });
- const breakpointConfig = useMemo(() => getBreakpointConfig(), []);
- if (data.bookmarks.length == 0) {
- return <p>No bookmarks</p>;
- }
- return (
- <Masonry className="flex gap-4" breakpointCols={breakpointConfig}>
- {data.bookmarks.map((b) => renderBookmark(b))}
- </Masonry>
- );
-}