afacd786bf
This surfaces some type errors in props being passed to some components, particularly in the way Features passes the classes props.
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 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 {}) ?? {}),
|
|
}}
|
|
/>
|
|
<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>
|