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
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
|
---
import type { Pricing as Props } from '~/types';
import Headline from '~/components/ui/Headline.astro';
import WidgetWrapper from '~/components/ui/WidgetWrapper.astro';
import Button from '~/components/ui/Button.astro';
const {
title = await Astro.slots.render('title'),
subtitle = await Astro.slots.render('subtitle'),
tagline,
items = [],
actions = [],
id,
isDark = false,
classes = {},
bg = await Astro.slots.render('bg'),
} = Astro.props;
---
<WidgetWrapper
id={id}
isDark={isDark}
containerClass={`max-w-7xl mx-auto ${classes?.container ?? ''}`}
bg={bg}
>
<Headline
title={title}
subtitle={subtitle}
tagline={tagline}
classes={{
container: 'max-w-xl sm:mx-auto lg:max-w-2xl',
title: 'text-4xl md:text-5xl font-bold tracking-tighter mb-4 font-heading',
subtitle: 'max-w-3xl mx-auto sm:text-center text-xl text-muted dark:text-slate-400',
}}
/>
<div class="mt-12">
<div class="row-gap-8 md:grid md:grid-cols-2 md:gap-8">
{
items && items.length > 0 && items.map((item, index) => (
<div class={index % 2 === 0 ? "mb-6 md:mb-0" : ""}>
<div class="mb-6">
{item.title && (
<h3 class="text-2xl font-bold tracking-tight dark:text-white sm:text-3xl mb-4">{item.title}</h3>
)}
<hr class="mb-4">
{item.entries && item.entries.length > 0 && (
<table class="w-full border-collapse">
<tbody>
{item.entries.map((entry) => (
<tr class="h-12">
<td class="w-1/2 h-12 px-4 text-muted dark:text-slate-400" set:html={entry.description}></td>
<td class="w-1/2 text-right h-12 px-4 text-muted dark:text-slate-400">{entry.price}</td>
</tr>
))}
</tbody>
</table>
)}
</div>
</div>
))
}
</div>
</div>
<div class="mt-12 text-center">
{await Astro.slots.render('disclaimer') && (
<div class="text-xs text-muted dark:text-slate-400 mb-8" set:html={await Astro.slots.render('disclaimer')} />
)}
{
actions && actions.length > 0 && (
<div class="max-w-xs sm:max-w-md m-auto flex flex-nowrap flex-col sm:flex-row sm:justify-center gap-4 mt-6">
{actions.map((action) => (
<div class="flex w-full sm:w-auto">
<Button {...action} class="w-full sm:mb-0" />
</div>
))}
</div>
)
}
</div>
</WidgetWrapper>
|
