You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
40 lines
978 B
40 lines
978 B
import { cn } from '@/lib/utils' |
|
import { Event } from 'nostr-tools' |
|
import { useMemo } from 'react' |
|
import PictureNoteCard from '../PictureNoteCard' |
|
|
|
export function PictureNoteCardMasonry({ |
|
events, |
|
columnCount, |
|
className |
|
}: { |
|
events: Event[] |
|
columnCount: 2 | 3 |
|
className?: string |
|
}) { |
|
const columns = useMemo(() => { |
|
const newColumns: React.ReactNode[][] = Array.from({ length: columnCount }, () => []) |
|
events.forEach((event, i) => { |
|
newColumns[i % columnCount].push( |
|
<PictureNoteCard key={event.id} className="w-full" event={event} /> |
|
) |
|
}) |
|
return newColumns |
|
}, [events, columnCount]) |
|
|
|
return ( |
|
<div |
|
className={cn( |
|
'grid', |
|
columnCount === 2 ? 'grid-cols-2 gap-2' : 'grid-cols-3 gap-4', |
|
className |
|
)} |
|
> |
|
{columns.map((column, i) => ( |
|
<div key={i} className={columnCount === 2 ? 'space-y-2' : 'space-y-4'}> |
|
{column} |
|
</div> |
|
))} |
|
</div> |
|
) |
|
}
|
|
|