mirror of
https://github.com/tabler/tabler.git
synced 2026-10-12 13:17:00 +04:00
Paweł Kunaandgithub-actions[bot]
6cd45d012e
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
27 lines
1.1 KiB
Plaintext
27 lines
1.1 KiB
Plaintext
---
|
|
// An image in a framed box: the same surface, border and radius as an <Example>
|
|
// demo, so pictures and demos look alike on a page. Give the image a transparent
|
|
// background, or the exact `bg-surface-secondary` color so it blends into the box.
|
|
// With `srcDark` the box swaps images with the theme.
|
|
// The box draws the frame, so the images drop the border and radius that
|
|
// `.prose > figure > img` gives them.
|
|
import type { ImageMetadata } from 'astro'
|
|
import { Image } from 'astro:assets'
|
|
|
|
interface Props {
|
|
src: ImageMetadata
|
|
/** version shown in dark mode; without it `src` is shown in both modes */
|
|
srcDark?: ImageMetadata
|
|
alt: string
|
|
/** display width in pixels; the image is also rendered at 2x */
|
|
width?: number
|
|
}
|
|
|
|
const { src, srcDark, alt, width = 480 } = Astro.props
|
|
---
|
|
|
|
<figure class="d-flex justify-content-center my-5 border rounded bg-surface-secondary overflow-hidden">
|
|
<Image src={src} alt={alt} width={width} densities={[1, 2]} class:list={['border-0 rounded-0', srcDark && 'hide-theme-dark']} />
|
|
{srcDark && <Image src={srcDark} alt={alt} width={width} densities={[1, 2]} class="border-0 rounded-0 hide-theme-light" />}
|
|
</figure>
|