schmelczer-dev/src/components/EntryThumbnail.astro

47 lines
821 B
Text

---
import type { ImageMetadata } from 'astro';
import { Picture } from 'astro:assets';
interface Props {
src: ImageMetadata;
alt: string;
href?: string;
class?: string;
widths: number[];
sizes: string;
loading?: 'lazy' | 'eager';
fetchpriority?: 'high' | 'low' | 'auto';
}
const {
src,
alt,
href,
class: extraClass,
widths,
sizes,
loading = 'lazy',
fetchpriority,
} = Astro.props;
const Tag = href ? 'a' : 'div';
---
<Tag
class:list={['entry-thumbnail', extraClass]}
href={href}
aria-hidden={href ? 'true' : undefined}
tabindex={href ? -1 : undefined}
>
<Picture
src={src}
alt={alt}
formats={['avif', 'webp']}
fallbackFormat="jpg"
widths={widths}
sizes={sizes}
loading={loading}
decoding="async"
fetchpriority={fetchpriority}
/>
</Tag>