mirror of
https://github.com/tabler/tabler.git
synced 2026-10-12 21:27:06 +04:00
Paweł Kunaandgithub-actions[bot]
39634cb4b9
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
27 lines
1.0 KiB
Plaintext
27 lines
1.0 KiB
Plaintext
---
|
|
import { staticPath } from '@shared/lib/assets'
|
|
// Lightbox passes a resolved `photo` object from the horizontal-filtered list.
|
|
interface Photo {
|
|
file: string
|
|
title?: string
|
|
}
|
|
|
|
/** core/scss/_variables.scss `$aspect-ratios` map keys */
|
|
type PhotoRatio = '1x1' | '2x1' | '1x2' | '3x1' | '1x3' | '4x1' | '1x4' | '4x3' | '3x4' | '16x9' | '9x16' | '21x9' | '9x21'
|
|
|
|
interface Props {
|
|
photo: Photo
|
|
/** background param — plain <div> with only the background-image (no ratio class) */
|
|
background?: boolean
|
|
/** ratio param — img-responsive img-responsive-{ratio} wrapper */
|
|
ratio?: PhotoRatio | 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} />}
|