66 lines
1.6 KiB
Plaintext
66 lines
1.6 KiB
Plaintext
---
|
|
import { Image } from "astro:assets";
|
|
import Markdown from "../../islands/Markdown.jsx";
|
|
|
|
const { section, index } = Astro.props;
|
|
|
|
const hasImage = !!section.image;
|
|
const reverse = index % 2 === 1;
|
|
|
|
const sectionImages = import.meta.glob<{ default: ImageMetadata }>(
|
|
"/src/assets/sections/**/*.{png,jpg,jpeg,webp,avif}",
|
|
{ eager: true },
|
|
);
|
|
|
|
let sectionImage: ImageMetadata | null = null;
|
|
|
|
if (section.image) {
|
|
const path = `/src/assets/sections/${section.image}`;
|
|
const mod = sectionImages[path];
|
|
if (mod) sectionImage = mod.default;
|
|
}
|
|
---
|
|
|
|
<section class="f-section">
|
|
<div
|
|
class={`f-section-grid ${hasImage ? "md:grid-cols-2" : "md:grid-cols-1"}`}
|
|
>
|
|
{
|
|
sectionImage && (
|
|
<Image
|
|
src={sectionImage}
|
|
alt={section.title}
|
|
class={`f-section-image ${reverse ? "md:order-1" : "md:order-2"} ${section.dimmed ? "f-image-dimmed" : ""}`}
|
|
loading="lazy"
|
|
decoding="async"
|
|
format="webp"
|
|
widths={[480, 768, 1024, 1440]}
|
|
sizes="100vw"
|
|
/>
|
|
)
|
|
}
|
|
|
|
<div
|
|
class={`f-section-grid ${hasImage ? (reverse ? "md:order-2" : "md:order-1") : ""}`}
|
|
>
|
|
<!-- TODO: Styl nagłowka powinien byc trochę niżej -->
|
|
<h2 class="f-section-title">{section.title}</h2>
|
|
|
|
<Markdown text={section.content} />
|
|
|
|
{
|
|
section.button && (
|
|
<div class="f-section-nav">
|
|
<a
|
|
href={section.button.url}
|
|
class="btn btn-outline"
|
|
title={section.button.title}
|
|
>
|
|
{section.button.text}
|
|
</a>
|
|
</div>
|
|
)
|
|
}
|
|
</div>
|
|
</div>
|
|
</section> |