60 lines
1.9 KiB
Plaintext
60 lines
1.9 KiB
Plaintext
---
|
|
import WidgetWrapper from '~/components/ui/WidgetWrapper.astro';
|
|
import Timeline from '~/components/ui/Timeline.astro';
|
|
import Headline from '~/components/ui/Headline.astro';
|
|
import Image from '~/components/common/Image.astro';
|
|
import type { Steps } from '~/types';
|
|
|
|
const {
|
|
title = await Astro.slots.render('title'),
|
|
subtitle = await Astro.slots.render('subtitle'),
|
|
tagline = await Astro.slots.render('tagline'),
|
|
items = [],
|
|
image = await Astro.slots.render('image'),
|
|
isReversed = false,
|
|
|
|
id,
|
|
isDark = false,
|
|
classes = {},
|
|
bg = await Astro.slots.render('bg'),
|
|
} = Astro.props as Steps;
|
|
---
|
|
|
|
<WidgetWrapper id={id} isDark={isDark} containerClass={`max-w-5xl ${classes?.container ?? ''}`} bg={bg}>
|
|
<div class:list={['flex flex-col gap-8 md:gap-12', { 'md:flex-row-reverse': isReversed }, { 'md:flex-row': image}]}>
|
|
<div class:list={["md:py-4 md:self-center", { 'md:basis-1/2': image }, { "w-full": !image}]}>
|
|
<Headline
|
|
title={title}
|
|
subtitle={subtitle}
|
|
tagline={tagline}
|
|
classes={{
|
|
container: 'text-left rtl:text-right',
|
|
title: 'text-3xl lg:text-4xl',
|
|
...((classes?.headline as {}) ?? {}),
|
|
}}
|
|
/>
|
|
<Timeline items={items} classes={classes?.items as {}} />
|
|
</div>
|
|
{
|
|
image && (
|
|
<div class="relative md:basis-1/2">
|
|
{(typeof image === 'string' ? (
|
|
<Fragment set:html={image} />
|
|
) : (
|
|
<Image
|
|
class="inset-0 object-cover object-top w-full rounded-md shadow-lg md:absolute md:h-full bg-gray-400 dark:bg-slate-700"
|
|
widths={[400, 768]}
|
|
sizes="(max-width: 768px) 100vw, 432px"
|
|
width={432}
|
|
height={768}
|
|
layout="cover"
|
|
src={image?.src}
|
|
alt={image?.alt || ''}
|
|
/>
|
|
))}
|
|
</div>
|
|
)
|
|
}
|
|
</div>
|
|
</WidgetWrapper>
|