PhotoTile

Square photo thumbnail tile, optionally wrapped in a lightbox-opening anchor.

Media & Icons

Display-only grid

With lightbox-opening refer link

/** @jsxRuntime automatic */ /** @jsxImportSource preact */ // Story for PhotoTile — the shared square photo thumbnail used by the homepage // PhotosSection and the /photos/ gallery listing (epic #1647, wave 6, gap batch // #1661). Mock `variants` point at the real /photos/variants/* namespace — // the styleguide's image-placeholder plugin's PLACEHOLDER_PREFIXES list // covers it (#2084), serving the placeholder SVG instead of a broken image. import { defineStory } from '@lib/styleguide/story-contract'; import type { StoryMeta } from '@lib/styleguide/story-contract'; import PhotoTile from './photo-tile'; import type { PhotoMetadata } from '@/lib/utils/photo-url'; const meta: StoryMeta = { title: 'PhotoTile', category: 'Media & Icons', description: 'Square photo thumbnail tile, optionally wrapped in a lightbox-opening anchor.', usage: `import PhotoTile from '@/src/components/shared/photo-tile';\n\n<ul className="grid grid-cols-3 gap-hgap-xs">\n {photos.map((photo) => (\n <PhotoTile key={photo.slug} photo={photo} sizes="33vw" referSlug={photo.slug} />\n ))}\n</ul>`, }; export default meta; function makePhoto(index: number, description?: string): PhotoMetadata { const slug = `sg-photo-tile-demo-${index}`; return { slug, takenAt: '2025-06-01T09:00:00Z', uploadedAt: '2025-06-01T10:00:00Z', variants: { '400w': `/photos/variants/${slug}/400w.webp`, '800w': `/photos/variants/${slug}/800w.webp`, '1600w': `/photos/variants/${slug}/1600w.webp`, }, dimensions: { w: 4000, h: 3000 }, aspectRatio: 1.3333, orientation: 'landscape', description, }; } export const Grid = defineStory({ name: 'Display-only grid', render: () => ( <ul className="grid grid-cols-3 gap-hgap-xs w-[360px]"> {[makePhoto(1, 'パッチの様子'), makePhoto(2), makePhoto(3, '完成したセットアップ')].map( (photo) => ( <PhotoTile key={photo.slug} photo={photo} sizes="120px" /> ), )} </ul> ), }); export const WithReferLink = defineStory({ name: 'With lightbox-opening refer link', render: () => ( <div className="w-[160px]"> <ul className="grid grid-cols-1 gap-hgap-xs"> <PhotoTile photo={makePhoto(4, 'クリックするとダイアログを開くアンカーでラップされます')} sizes="160px" referSlug="sg-photo-tile-demo-4" locale="ja" /> </ul> </div> ), });