tabler/shared/components/demo/Photo.astro

---
import { staticPath } from '@shared/lib/assets'
// Lightbox passes a resolved `photo` object from the horizontal-filtered list.
interface Photo {
  file: string
  title?: string
}

import type { AspectRatio } from '@shared/lib/tokens'

interface Props {
  photo: Photo
  /** plain <div> with only the background-image (no ratio class) */
  background?: boolean
  /** img-responsive img-responsive-{ratio} wrapper */
  ratio?: AspectRatio | undefined
  class?: string
}

const { photo, background, ratio, class: className } = Astro.props

const src = staticPath(`photos/${photo.file}`)
---

<!-- Photo -->{background ? <div class:list={[className]} style={`background-image: url(${src})`} /> : ratio ? <div class:list={['img-responsive', `img-responsive-${ratio}`, className]} style={`background-image: url(${src})`} /> : <img src={src} class:list={[className]} alt={photo.title} />}