1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
|
---
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 as Props } 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;
---
<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 object) ?? {}),
}}
/>
<Timeline items={items} classes={classes?.items as Record<string, never>} />
</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>
|
