Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 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 | 74x 78x 8x 84x | import { MaterialSymbol } from 'material-symbols'
import { Button } from '../ButtonsAndLinks/Button/Button'
import { Icon } from '../Icon/Icon'
export type PaymentPlanDescriptionItem = {
text: string
icon: MaterialSymbol
iconColor?: string
}
export type PaymentPlanProps = {
title: string
type: PaymentPlanType
price?: string
hasButton?: boolean
descriptionItems?: PaymentPlanDescriptionItem[]
handleSubmit?: (plan: PaymentPlanType) => void
size?: 'md' | 'lg'
}
export type PaymentPlanType = 'single' | 'family' | 'free'
export const PaymentPlan: React.FC<PaymentPlanProps> = ({
title,
type,
price = '',
hasButton = true,
descriptionItems = [],
handleSubmit = () => {},
size = 'lg',
}) => {
return (
<div
datacy={`paymentPlan-${type}`}
className={`flex w-full flex-col gap-5 rounded-xl border-2 px-6 py-3 ${
size === 'lg' ?? 'xl:gap-6 xl:px-10 xl:py-6'
}`}
>
<div>
<p className={`text-xl font-bold ${size === 'lg' ?? ' lg:text-2xl'}`}>{title}</p>
{price && (
<p datacy={`paymentPlan-${type}-price`} className={`text-3xl font-bold ${size === 'lg' ?? 'lg:text-4xl'}`}>
{price}
</p>
)}
</div>
{hasButton && (
<Button datacy={`paymentPlan-${type}-button`} onClick={() => handleSubmit('single')}>
Auswählen
</Button>
)}
<div className="text-base">
{descriptionItems.map((item, index) => {
return (
<div datacy={`paymentPlan-${type}-description-item${index}`} key={item.text} className="mb-2 flex gap-2">
<Icon
datacy={`paymentPlan-single-description-item${index}-icon`}
icon={item.icon}
className={`pt-0.5${item.iconColor ? ` ${item.iconColor}` : ' text-yellow-700'}`}
/>
<p>{item.text}</p>
</div>
)
})}
</div>
</div>
)
}
|