68 lines
1.8 KiB
Plaintext
68 lines
1.8 KiB
Plaintext
---
|
|
import { Picture } from '@astrojs/image/components';
|
|
import Headline from '~/components/ui/Headline.astro';
|
|
import ItemGrid from '~/components/ui/ItemGrid.astro';
|
|
import WidgetWrapper from '~/components/ui/WidgetWrapper.astro';
|
|
import type { Features } from '~/types';
|
|
|
|
const {
|
|
title = await Astro.slots.render('title'),
|
|
subtitle = await Astro.slots.render('subtitle'),
|
|
tagline = await Astro.slots.render('tagline'),
|
|
image,
|
|
items = [],
|
|
columns,
|
|
isBeforeContent,
|
|
isAfterContent,
|
|
|
|
id,
|
|
isDark = false,
|
|
classes = {},
|
|
bg = await Astro.slots.render('bg'),
|
|
} = Astro.props as Features;
|
|
---
|
|
|
|
<WidgetWrapper
|
|
id={id}
|
|
isDark={isDark}
|
|
containerClass={`${isBeforeContent ? 'md:pb-8 lg:pb-12' : ''} ${isAfterContent ? 'pt-0 md:pt-0 lg:pt-0' : ''} ${
|
|
classes?.container ?? ''
|
|
}`}
|
|
bg={bg}
|
|
>
|
|
<Headline title={title} subtitle={subtitle} tagline={tagline} classes={classes?.headline} />
|
|
|
|
<div aria-hidden="true" class="aspect-w-16 aspect-h-7">
|
|
{
|
|
image && (
|
|
<div class="w-full h-80 object-cover rounded-xl mx-auto bg-gray-500 shadow-lg">
|
|
{typeof image === 'string' ? (
|
|
<Fragment set:html={image} />
|
|
) : (
|
|
<Picture
|
|
class="w-full h-80 object-cover rounded-xl mx-auto bg-gray-500 shadow-lg"
|
|
width={0}
|
|
height={320}
|
|
widths={[400, 768]}
|
|
aspectRatio="16:7"
|
|
{...(image as any)}
|
|
/>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|
|
</div>
|
|
|
|
<ItemGrid
|
|
items={items}
|
|
columns={columns}
|
|
classes={{
|
|
container: 'mt-12',
|
|
panel: 'max-w-full sm:max-w-md',
|
|
title: 'text-lg font-semibold',
|
|
icon: 'flex-shrink-0 mt-1 text-primary w-6 h-6',
|
|
...((classes?.items as {}) ?? {}),
|
|
}}
|
|
/>
|
|
</WidgetWrapper>
|