Template
45 lines
1.6 KiB
TypeScript
45 lines
1.6 KiB
TypeScript
import type { ComponentConfig } from '@reacteditor/core';
|
|
import { PanelTop } from 'lucide-react';
|
|
import Header, { type HeaderProps } from './header';
|
|
|
|
const headerConfig: ComponentConfig<HeaderProps> = {
|
|
label: 'Header',
|
|
icon: <PanelTop size={16} />,
|
|
category: 'navigation',
|
|
global: true,
|
|
defaultProps: {
|
|
siteName: 'Your Company',
|
|
logoUrl: '',
|
|
links: [
|
|
{ label: 'Features', url: '/#features' },
|
|
{ label: 'Pricing', url: '/#pricing' },
|
|
{ label: 'Resources', url: '/#resources' },
|
|
{ label: 'FAQ', url: '/#faq' },
|
|
],
|
|
ctaLabel: 'Contact',
|
|
ctaUrl: '/contact',
|
|
showThemeToggle: 'yes',
|
|
sticky: 'yes',
|
|
},
|
|
fields: {
|
|
siteName: { label: 'Site name', type: 'text', contentEditable: true },
|
|
logoUrl: { label: 'Logo', type: 'image' },
|
|
links: {
|
|
label: 'Navigation links', type: 'array',
|
|
defaultItemProps: { label: 'Link', url: '/' },
|
|
getItemSummary: (item) => item?.label || 'Link',
|
|
arrayFields: {
|
|
label: { label: 'Label', type: 'text', contentEditable: true },
|
|
url: { label: 'URL', type: 'text' },
|
|
},
|
|
},
|
|
ctaLabel: { label: 'CTA label', type: 'text', contentEditable: true },
|
|
ctaUrl: { label: 'CTA URL', type: 'text' },
|
|
showThemeToggle: { label: 'Theme toggle', type: 'radio', options: [{ label: 'Show', value: 'yes' }, { label: 'Hide', value: 'no' }] },
|
|
sticky: { label: 'Sticky header', type: 'radio', options: [{ label: 'Yes', value: 'yes' }, { label: 'No', value: 'no' }] },
|
|
},
|
|
render: (props) => <Header {...props} />,
|
|
};
|
|
|
|
export default headerConfig;
|