afacd786bf
This surfaces some type errors in props being passed to some components, particularly in the way Features passes the classes props.
83 lines
4.3 KiB
Plaintext
83 lines
4.3 KiB
Plaintext
---
|
|
import { Icon } from 'astro-icon/components';
|
|
import Button from '~/components/ui/Button.astro';
|
|
import Headline from '~/components/ui/Headline.astro';
|
|
import WidgetWrapper from '~/components/ui/WidgetWrapper.astro';
|
|
import type { Pricing as Props } from '~/types';
|
|
|
|
const {
|
|
title = '',
|
|
subtitle = '',
|
|
tagline = '',
|
|
prices = [],
|
|
|
|
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} />
|
|
<div class="flex items-stretch justify-center">
|
|
<div class="grid grid-cols-3 gap-4 dark:text-white sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-3">
|
|
{
|
|
prices &&
|
|
prices.map(({ title, subtitle, price, period, items, callToAction, hasRibbon = false, ribbonTitle }) => (
|
|
<div class="col-span-3 mx-auto flex w-full sm:col-span-1 md:col-span-1 lg:col-span-1 xl:col-span-1">
|
|
{price && period && (
|
|
<div class="rounded-lg backdrop-blur border border-gray-200 dark:border-gray-700 bg-white dark:bg-slate-900 shadow px-6 py-8 flex w-full max-w-sm flex-col justify-between text-center">
|
|
{hasRibbon && ribbonTitle && (
|
|
<div class="absolute right-[-5px] 2xl:right-[-8px] rtl:right-auto rtl:left-[-8px] rtl:2xl:left-[-10px] top-[-5px] 2xl:top-[-10px] z-[1] h-[100px] w-[100px] overflow-hidden text-right">
|
|
<span class="absolute top-[19px] right-[-21px] rtl:right-auto rtl:left-[-21px] block w-full rotate-45 rtl:-rotate-45 bg-green-700 text-center text-[10px] font-bold uppercase leading-5 text-white shadow-[0_3px_10px_-5px_rgba(0,0,0,0.3)] before:absolute before:left-0 before:top-full before:z-[-1] before:border-[3px] before:border-r-transparent before:border-b-transparent before:border-l-green-800 before:border-t-green-800 before:content-[''] after:absolute after:right-0 after:top-full after:z-[-1] after:border-[3px] after:border-l-transparent after:border-b-transparent after:border-r-green-800 after:border-t-green-800 after:content-['']">
|
|
{ribbonTitle}
|
|
</span>
|
|
</div>
|
|
)}
|
|
<div class="px-2 py-0">
|
|
{title && (
|
|
<h3 class="text-center text-xl font-semibold uppercase leading-6 tracking-wider mb-2">{title}</h3>
|
|
)}
|
|
{subtitle && <p class="font-light sm:text-lg text-gray-600 dark:text-slate-400">{subtitle}</p>}
|
|
<div class="my-8">
|
|
<div class="flex items-center justify-center text-center mb-1">
|
|
<span class="text-5xl">$</span>
|
|
<span class="text-6xl font-extrabold">{price}</span>
|
|
</div>
|
|
<span class="text-base leading-6 lowercase text-gray-600 dark:text-slate-400">{period}</span>
|
|
</div>
|
|
{items && (
|
|
<ul role="list" class="my-8 md:my-10 space-y-2 text-left">
|
|
{items.map(
|
|
({ description, icon }) =>
|
|
description && (
|
|
<li class="mb-1.5 flex items-start space-x-3 leading-7">
|
|
<div class="rounded-full bg-primary mt-1">
|
|
<Icon name={icon ? icon : 'tabler:check'} class="w-5 h-5 font-bold p-1 text-white" />
|
|
</div>
|
|
<span>{description}</span>
|
|
</li>
|
|
)
|
|
)}
|
|
</ul>
|
|
)}
|
|
</div>
|
|
{callToAction && (
|
|
<div class={`flex justify-center`}>
|
|
{typeof callToAction === 'string' ? (
|
|
<Fragment set:html={callToAction} />
|
|
) : (
|
|
callToAction && callToAction.href && <Button {...hasRibbon ? { variant:'primary' } : {}} {...callToAction}/>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
))
|
|
}
|
|
</div>
|
|
</div>
|
|
</WidgetWrapper>
|