lint
This commit is contained in:
parent
a2e6e8db98
commit
2895d3eba2
2 changed files with 6 additions and 2 deletions
|
|
@ -11,7 +11,7 @@ The `PhotoPack` component makes simple photo grids with custom layouts at variou
|
|||
`images` are defined with their src, alt text, captions and an optional `maxHeight`, which ensures that an image is no taller than that height in any layout.
|
||||
|
||||
```javascript
|
||||
const images = [
|
||||
const images = [
|
||||
{
|
||||
src: 'https://...',
|
||||
altText: 'Alt text',
|
||||
|
|
@ -155,6 +155,7 @@ If you don't specify the `layouts` prop, `PhotoPack` will automatically generate
|
|||
The smart defaults use a **bottom-heavy distribution**, meaning earlier rows have fewer images (making them larger and more prominent), while later rows have more images.
|
||||
|
||||
**Examples:**
|
||||
|
||||
- 5 images, `wide` container, desktop: `[2, 3]` (2 in first row, 3 in second)
|
||||
- 7 images, `widest` container, desktop: `[3, 4]` (3 in first row, 4 in second)
|
||||
- 4 images, any container, desktop: `[2, 2]` (evenly distributed)
|
||||
|
|
|
|||
|
|
@ -62,7 +62,10 @@ export const generateDefaultLayouts = (
|
|||
width: ContainerWidth
|
||||
): Layout[] => {
|
||||
// Map container width to max images per row for desktop
|
||||
const desktopMaxPerRow = width === 'normal' ? 2 : width === 'widest' || width === 'fluid' ? 4 : 3;
|
||||
const desktopMaxPerRow =
|
||||
width === 'normal' ? 2
|
||||
: width === 'widest' || width === 'fluid' ? 4
|
||||
: 3;
|
||||
|
||||
// Tablet always uses max 2 per row
|
||||
const tabletMaxPerRow = 2;
|
||||
|
|
|
|||
Loading…
Reference in a new issue