Template
25 lines
2.6 KiB
TypeScript
25 lines
2.6 KiB
TypeScript
import type { ComponentConfig } from '@reacteditor/core';
|
|
import { BadgeDollarSign } from 'lucide-react';
|
|
import Pricing, { type PricingProps } from './pricing';
|
|
|
|
const pricingConfig: ComponentConfig<PricingProps> = {
|
|
label: 'Pricing', icon: <BadgeDollarSign size={16} />, category: 'conversion',
|
|
defaultProps: {
|
|
heading: 'Simple plans for different needs.', description: 'Replace these sample plans with pricing that fits your business.', billingNote: 'Prices shown in USD.',
|
|
plans: [
|
|
{ name: 'Starter', price: '$0', period: '/ month', description: 'A short description of who this plan is for.', features: 'First included feature\nSecond included feature\nThird included feature', ctaLabel: 'Get started', ctaUrl: '/contact', badge: '', highlighted: 'no' },
|
|
{ name: 'Team', price: '$24', period: '/ month', description: 'A short description of who this plan is for.', features: 'Everything in Starter\nAnother useful feature\nPriority support', ctaLabel: 'Get started', ctaUrl: '/contact', badge: 'Popular', highlighted: 'yes' },
|
|
{ name: 'Business', price: 'Custom', period: '', description: 'A short description of who this plan is for.', features: 'Everything in Team\nAdvanced controls\nDedicated support', ctaLabel: 'Contact us', ctaUrl: '/contact', badge: '', highlighted: 'no' },
|
|
],
|
|
},
|
|
fields: {
|
|
heading: { label: 'Heading', type: 'textarea', contentEditable: true }, description: { label: 'Description', type: 'textarea', contentEditable: true }, billingNote: { label: 'Billing note', type: 'text', contentEditable: true },
|
|
plans: { label: 'Plans', type: 'array', defaultItemProps: { name: 'Plan', price: '$0', period: '/ month', description: 'Describe this plan.', features: 'Feature one\nFeature two', ctaLabel: 'Get started', ctaUrl: '/contact', badge: '', highlighted: 'no' }, getItemSummary: (item) => item?.name || 'Plan', arrayFields: {
|
|
name: { label: 'Name', type: 'text', contentEditable: true }, price: { label: 'Price', type: 'text', contentEditable: true }, period: { label: 'Period', type: 'text', contentEditable: true }, description: { label: 'Description', type: 'textarea', contentEditable: true }, features: { label: 'Features (one per line)', type: 'textarea' }, ctaLabel: { label: 'CTA label', type: 'text', contentEditable: true }, ctaUrl: { label: 'CTA URL', type: 'text' }, badge: { label: 'Badge', type: 'text', contentEditable: true }, highlighted: { label: 'Highlighted', type: 'radio', options: [{ label: 'Yes', value: 'yes' }, { label: 'No', value: 'no' }] },
|
|
} },
|
|
},
|
|
render: (props) => <Pricing {...props} />,
|
|
};
|
|
|
|
export default pricingConfig;
|