richie/Parsons
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ImageGallery: landscape thumbnails (4:3 ratio)

Browse Source 
- Thumbnails now 4:3 aspect ratio instead of square
- Renamed thumbnailSize → thumbnailHeight, width calculated from ratio
- Default 64px height × 85px width

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Richie
2026-03-30 21:08:50 +11:00
parent 3f21964bb7
commit 7f00b66eb7
2 changed files with 7 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/molecules/ImageGallery/ImageGallery.stories.tsx
View File

@@ -71,6 +71,6 @@ export const CustomSizes: Story = {
args: { args: {
images: venueImages, images: venueImages,
heroHeight: 300, heroHeight: 300,
thumbnailSize: 56, thumbnailHeight: 48,
}, },
}; };

11
src/components/molecules/ImageGallery/ImageGallery.tsx
View File

@@ -18,8 +18,8 @@ export interface ImageGalleryProps {
images: GalleryImage[]; images: GalleryImage[];
/** Height of the hero image area */ /** Height of the hero image area */
heroHeight?: number | { xs?: number; sm?: number; md?: number; lg?: number }; heroHeight?: number | { xs?: number; sm?: number; md?: number; lg?: number };
/** Height of each thumbnail */ /** Height of each thumbnail (width is 4:3 ratio) */
thumbnailSize?: number; thumbnailHeight?: number;
/** MUI sx prop for style overrides */ /** MUI sx prop for style overrides */
sx?: SxProps<Theme>; sx?: SxProps<Theme>;
} }
@@ -47,7 +47,8 @@ export interface ImageGalleryProps {
* ``` * ```
*/ */
export const ImageGallery = React.forwardRef<HTMLDivElement, ImageGalleryProps>( export const ImageGallery = React.forwardRef<HTMLDivElement, ImageGalleryProps>(
({ images, heroHeight = { xs: 280, md: 420 }, thumbnailSize = 72, sx }, ref) => { ({ images, heroHeight = { xs: 280, md: 420 }, thumbnailHeight = 64, sx }, ref) => {
const thumbnailWidth = Math.round(thumbnailHeight * (4 / 3));
const [selectedIndex, setSelectedIndex] = React.useState(0); const [selectedIndex, setSelectedIndex] = React.useState(0);
const [hoverIndex, setHoverIndex] = React.useState<number | null>(null); const [hoverIndex, setHoverIndex] = React.useState<number | null>(null);
@@ -123,8 +124,8 @@ export const ImageGallery = React.forwardRef<HTMLDivElement, ImageGalleryProps>(
onMouseEnter={() => setHoverIndex(index)} onMouseEnter={() => setHoverIndex(index)}
onMouseLeave={() => setHoverIndex(null)} onMouseLeave={() => setHoverIndex(null)}
sx={{ sx={{
width: thumbnailSize, width: thumbnailWidth,
height: thumbnailSize, height: thumbnailHeight,
flexShrink: 0, flexShrink: 0,
borderRadius: 1, borderRadius: 1,
backgroundImage: `url(${image.src})`, backgroundImage: `url(${image.src})`,