diff options
Diffstat (limited to 'src/components/widgets/Pricing.astro')
| -rw-r--r-- | src/components/widgets/Pricing.astro | 101 |
1 files changed, 51 insertions, 50 deletions
diff --git a/src/components/widgets/Pricing.astro b/src/components/widgets/Pricing.astro index d8cd2a6..b0c2fa1 100644 --- a/src/components/widgets/Pricing.astro +++ b/src/components/widgets/Pricing.astro @@ -18,12 +18,7 @@ const { } = Astro.props; --- -<WidgetWrapper - id={id} - isDark={isDark} - containerClass={`mx-auto ${classes?.container ?? ''}`} - bg={bg} -> +<WidgetWrapper id={id} isDark={isDark} containerClass={`mx-auto ${classes?.container ?? ''}`} bg={bg}> <Headline title={title} subtitle={subtitle} @@ -38,60 +33,66 @@ const { <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 dark:text-white mb-4">{item.title}</h3> - )} - <hr class="mb-8 border-2"> - {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> - )) + 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 dark:text-white mb-4">{item.title}</h3>} + <hr class="mb-8 border-2" /> + {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 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 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-2"> - {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> - )) + 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-2" /> + {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 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')} /> - )} - + { + (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"> |
