diff options
| -rw-r--r-- | packages/web/app/dashboard/bookmarks/components/BookmarksGrid.tsx | 26 | ||||
| -rw-r--r-- | packages/web/package.json | 1 | ||||
| -rw-r--r-- | pnpm-lock.yaml | 11 |
3 files changed, 34 insertions, 4 deletions
diff --git a/packages/web/app/dashboard/bookmarks/components/BookmarksGrid.tsx b/packages/web/app/dashboard/bookmarks/components/BookmarksGrid.tsx index 433649af..293b7765 100644 --- a/packages/web/app/dashboard/bookmarks/components/BookmarksGrid.tsx +++ b/packages/web/app/dashboard/bookmarks/components/BookmarksGrid.tsx @@ -5,15 +5,32 @@ import { ZBookmark, ZGetBookmarksRequest } from "@/lib/types/api/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 key={bookmark.id} bookmark={bookmark} />; + comp = <LinkCard bookmark={bookmark} />; break; case "text": - comp = <TextCard key={bookmark.id} bookmark={bookmark} />; + comp = <TextCard bookmark={bookmark} />; break; } return ( @@ -36,12 +53,13 @@ export default function BookmarksGrid({ 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 ( - <div className="columns-1 gap-4 transition-all duration-300 md:columns-2 lg:columns-3"> + <Masonry className="flex gap-4" breakpointCols={breakpointConfig} > {data.bookmarks.map((b) => renderBookmark(b))} - </div> + </Masonry> ); } diff --git a/packages/web/package.json b/packages/web/package.json index b25fc2e9..01291dd7 100644 --- a/packages/web/package.json +++ b/packages/web/package.json @@ -49,6 +49,7 @@ "react-dom": "^18", "react-hook-form": "^7.50.1", "react-markdown": "^9.0.1", + "react-masonry-css": "^1.0.16", "server-only": "^0.0.1", "superjson": "^2.2.1", "tailwind-merge": "^2.2.1", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 0e33a74c..eaa8e381 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -299,6 +299,9 @@ importers: react-markdown: specifier: ^9.0.1 version: 9.0.1(@types/react@18.2.58)(react@18.2.0) + react-masonry-css: + specifier: ^1.0.16 + version: 1.0.16(react@18.2.0) server-only: specifier: ^0.0.1 version: 0.0.1 @@ -8273,6 +8276,14 @@ packages: - supports-color dev: false + /react-masonry-css@1.0.16(react@18.2.0): + resolution: {integrity: sha512-KSW0hR2VQmltt/qAa3eXOctQDyOu7+ZBevtKgpNDSzT7k5LA/0XntNa9z9HKCdz3QlxmJHglTZ18e4sX4V8zZQ==} + peerDependencies: + react: '>=16.0.0' + dependencies: + react: 18.2.0 + dev: false + /react-refresh@0.13.0: resolution: {integrity: sha512-XP8A9BT0CpRBD+NYLLeIhld/RqG9+gktUjW1FkE+Vm7OCinbG1SshcK5tb9ls4kzvjZr9mOQc7HYgBngEyPAXg==} engines: {node: '>=0.10.0'} |