43 lines
1.2 KiB
TypeScript
43 lines
1.2 KiB
TypeScript
import { ComponentConfig } from "@reacteditor/core";
|
|
import { Star } from "lucide-react";
|
|
import { FeaturedProductView, type FeaturedProductProps } from "@/components/commerce/featured-product";
|
|
|
|
export function createFeaturedProductEditor(opts: {
|
|
productField: any;
|
|
}): ComponentConfig<FeaturedProductProps> {
|
|
return {
|
|
label: "Featured product",
|
|
icon: <Star size={16} />,
|
|
category: "commerce",
|
|
defaultProps: {
|
|
product: null,
|
|
tagline: "Featured",
|
|
ctaLabel: "Add to bag",
|
|
align: "left",
|
|
tone: "default",
|
|
},
|
|
fields: {
|
|
product: { label: "Product", ...opts.productField },
|
|
tagline: { label: "Tagline", type: "text", contentEditable: true },
|
|
ctaLabel: { label: "CTA label", type: "text", contentEditable: true },
|
|
align: {
|
|
label: "Image alignment",
|
|
type: "radio",
|
|
options: [
|
|
{ label: "Image left", value: "left" },
|
|
{ label: "Image right", value: "right" },
|
|
],
|
|
},
|
|
tone: {
|
|
label: "Tone",
|
|
type: "radio",
|
|
options: [
|
|
{ label: "Default", value: "default" },
|
|
{ label: "Muted", value: "muted" },
|
|
],
|
|
},
|
|
},
|
|
render: (props) => <FeaturedProductView {...props} />,
|
|
};
|
|
}
|