Template
25 lines
1.4 KiB
TypeScript
25 lines
1.4 KiB
TypeScript
import type { ComponentConfig } from '@reacteditor/core';
|
|
import { Sparkles } from 'lucide-react';
|
|
import Hero, { type HeroProps } from './hero';
|
|
|
|
const heroConfig: ComponentConfig<HeroProps> = {
|
|
label: 'Hero', icon: <Sparkles size={16} />, category: 'marketing',
|
|
defaultProps: {
|
|
heading: 'A clear headline about what your business does.',
|
|
description: 'Use this space to explain your value in one or two simple sentences.',
|
|
primaryLabel: 'Get started', primaryUrl: '/contact', secondaryLabel: '', secondaryUrl: '#features',
|
|
imageUrl: 'https://api.dicebear.com/10.x/glass/svg', imageAlt: 'Abstract glass avatar illustration', imagePosition: 'right',
|
|
},
|
|
fields: {
|
|
heading: { label: 'Heading', type: 'textarea', contentEditable: true },
|
|
description: { label: 'Description', type: 'textarea', contentEditable: true },
|
|
primaryLabel: { label: 'Primary CTA', type: 'text', contentEditable: true }, primaryUrl: { label: 'Primary URL', type: 'text' },
|
|
secondaryLabel: { label: 'Secondary CTA', type: 'text', contentEditable: true }, secondaryUrl: { label: 'Secondary URL', type: 'text' },
|
|
imageUrl: { label: 'Image', type: 'image' }, imageAlt: { label: 'Image alt text', type: 'text' },
|
|
imagePosition: { label: 'Image position', type: 'radio', options: [{ label: 'Right', value: 'right' }, { label: 'Left', value: 'left' }] },
|
|
},
|
|
render: (props) => <Hero {...props} />,
|
|
};
|
|
|
|
export default heroConfig;
|