Files
shopify-react-editor-template/components/shopify/footer.editor.tsx
T
2026-08-09 16:00:10 -04:00

57 lines
1.8 KiB
TypeScript

import { ComponentConfig } from '@reacteditor/core';
import { PanelBottom } from 'lucide-react';
import Footer from '@/components/shopify/footer';
export type FooterBlockProps = {
storeName?: string;
logoUrl?: string;
copyright?: string;
links?: Array<{ label: string; url: string }>;
instagramUrl?: string;
tiktokUrl?: string;
facebookUrl?: string;
};
const footerEditor: ComponentConfig<FooterBlockProps> = {
label: 'Footer',
icon: <PanelBottom size={16} />,
category: 'navigation',
global: true,
defaultProps: {
storeName: 'Shop',
logoUrl: '',
copyright: '© 2026 Shop. All rights reserved.',
links: [
{ label: 'Terms of Service', url: '/policies/terms-of-service' },
{ label: 'Privacy Policy', url: '/policies/privacy-policy' },
{ label: 'Refund Policy', url: '/policies/refund-policy' },
{ label: 'Shipping Policy', url: '/policies/shipping-policy' },
{ label: 'Subscription Policy', url: '/policies/subscription-policy' },
],
instagramUrl: '#',
tiktokUrl: '#',
facebookUrl: '#',
},
fields: {
storeName: { label: 'Store name', type: 'text', contentEditable: true },
logoUrl: { label: 'Logo', type: 'image' },
copyright: { label: 'Copyright', type: 'text', contentEditable: true },
links: {
label: 'Links',
type: 'array',
defaultItemProps: { label: 'Link', url: '/' },
getItemSummary: (item) => item?.label || 'Link',
arrayFields: {
label: { label: 'Label', type: 'text', contentEditable: true },
url: { label: 'Link', type: 'text' },
},
},
instagramUrl: { label: 'Instagram URL', type: 'text' },
tiktokUrl: { label: 'TikTok URL', type: 'text' },
facebookUrl: { label: 'Facebook URL', type: 'text' },
},
render: (props) => <Footer {...props} />,
};
export default footerEditor;