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
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
|
---
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={`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-800',
}}
/>
<div class="mt-12">
<div class="md:flex md:gap-8">
<div class="md:w-1/2">
{
items &&
items.length > 0 &&
items
.filter((_, index) => index % 2 === 0)
.map((item) => (
<div class="mb-8">
{item.title && <h3 class="text-lg font-bold leading-6 mb-4">{item.title}</h3>}
<hr class="mb-8 border-1 shadow-sm border-black" />
{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-800" set:html={entry.description} />
<td class="w-1/2 text-right h-12 px-4 text-muted dark:text-slate-800">{entry.price}</td>
</tr>
))}
</tbody>
</table>
)}
</div>
))
}
</div>
<div class="md:w-1/2">
{
items &&
items.length > 0 &&
items
.filter((_, index) => index % 2 === 1)
.map((item) => (
<div class="mb-8">
{item.title && <h3 class="text-lg font-bold leading-6 dark:text-white mb-4">{item.title}</h3>}
<hr class="mb-8 border-1 shadow-sm border-black" />
{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-800" set:html={entry.description} />
<td class="w-1/2 text-right h-12 px-4 text-muted dark:text-slate-800">{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-800 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>
|
