38 lines
1.2 KiB
Plaintext
38 lines
1.2 KiB
Plaintext
---
|
|
import { markdownToHtml } from '@/lib/markdown';
|
|
import { Image } from 'astro:assets';
|
|
|
|
interface Props {
|
|
textWithImage: TextWithImageComponent;
|
|
}
|
|
|
|
const textWithImage = Astro.props.textWithImage;
|
|
|
|
const imageSize = () => {
|
|
if (textWithImage.imageSize === "small") return "aspect-2/1";
|
|
else if (textWithImage.imageSize === "medium") return "aspect-26/17";
|
|
else return "aspect-39/29";
|
|
}
|
|
---
|
|
|
|
<div
|
|
id={`textwithimage-${textWithImage.id}`}
|
|
class={`flex ${textWithImage.imageSide === "right" ? "lg:flex-row flex-col" : "lg:flex-row-reverse flex-col"} justify-between items-center py-12 px-12 lg:container mx-auto gap-y-8 gap-x-18`}
|
|
>
|
|
<div class="flex flex-col gap-2.5 lg:w-[50%] w-full">
|
|
<h2 class="text-5xl font-bold">{textWithImage.title}</h2>
|
|
{ textWithImage.text !== null && (
|
|
<div set:html={markdownToHtml(textWithImage.text)}></div>
|
|
) }
|
|
</div>
|
|
<div class="lg:w-[50%] w-full">
|
|
<Image
|
|
src={textWithImage.image.url}
|
|
width={textWithImage.image.width}
|
|
height={textWithImage.image.height}
|
|
class={`rounded-2xl shadow-sm ${imageSize()} object-cover`}
|
|
alt=""
|
|
/>
|
|
</div>
|
|
</div>
|