16 lines
1.1 KiB
Plaintext
16 lines
1.1 KiB
Plaintext
---
|
|
import SourceBadge from "./SourceBadge.astro";
|
|
import type { MediaAsset } from "../lib/api";
|
|
const { asset, compact = false, sourceLink = false } = Astro.props as { asset: MediaAsset; compact?: boolean; sourceLink?: boolean };
|
|
---
|
|
<figure class:list={["entity-media", { "entity-media--compact": compact }]}>
|
|
<span class="entity-media__frame"><picture>
|
|
{(["avif", "webp"] as const).map(format => {
|
|
const variants = (asset.variants ?? []).filter(item => item.format === format);
|
|
return variants.length ? <source type={`image/${format}`} srcset={variants.map(item => `${item.url} ${item.width}w`).join(", ")} sizes={compact ? "180px" : "(max-width: 720px) 100vw, 720px"} /> : null;
|
|
})}
|
|
<img src={asset.image_url} alt={asset.label ?? "Иллюстрация RF4"} width={asset.width} height={asset.height} loading="lazy" decoding="async" />
|
|
</picture></span>
|
|
<figcaption><SourceBadge source={asset.source_system} href={sourceLink ? asset.source_url : undefined} /><span>{asset.label ?? "Справочный материал"}</span></figcaption>
|
|
</figure>
|