Media Grid
Instagram-style photo/video grids with lightbox, stats overlay, and bento layouts.
Standard Grid
Bento Grid
Usage
import { MediaGrid, BentoGrid, MediaLightbox } from "@/components/profile"
// Standard grid
<MediaGrid
items={mediaItems}
columns={3}
showStats
onItemClick={(item) => openLightbox(item)}
/>
// Bento layout
<BentoGrid items={mediaItems} />Props
| Prop | Type | Default |
|---|---|---|
| items | MediaItem[] | required |
| columns | 2 | 3 | 4 | 3 |
| showStats | boolean | false |
| gap | number | 2 |
| onItemClick | (item) => void | - |