1c034400ca
- Pulse theme tokens in app.schema.json: Archivo Black headings (weight 400) + Inter body, white bg / black pill buttons, xl radius, AI-generated athletic imagery - Add headerFontWeight theme prop so single-weight fonts (Archivo Black) load and render correctly; ThemeProvider applies font-family + weight inline so Typography works regardless of `as` element - New shared Heading component (tagline / title / subtitle with size + align + tone variants) and Typography caption variant for taglines; refactor features, faq, cta, testimonials, products-carousel, products-grid, collection-grid, recommended-products, image-gallery, newsletter-cta to use them - Hero accepts a `buttons` array (label / href / variant) replacing primaryCta/secondaryCta; cover-image component removed and existing cover blocks migrated to Hero blocks with `buttons: []` - Newsletter CTA uses shadcn Button + Input so it inherits theme radius; stacked layout fixed to keep the image - Product/collection card titles use Typography subtitle variants (font-body), heading font weight is theme-controlled - Remove orphan commerce/shop-header.tsx and commerce/shop-footer.tsx; the editor-driven navigation/footer are the live chrome Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
83 lines
2.6 KiB
TypeScript
83 lines
2.6 KiB
TypeScript
import { ComponentConfig } from "@reacteditor/core";
|
|
import { imageField } from "@reacteditor/plugin-media/field";
|
|
import { LayoutTemplate } from "lucide-react";
|
|
import { Hero, type HeroProps } from "@/components/hero/hero";
|
|
import { frontendAiMediaAdapter } from "@/services/media-adapter";
|
|
|
|
export const heroEditor: ComponentConfig<HeroProps> = {
|
|
label: "Hero",
|
|
icon: <LayoutTemplate size={16} />,
|
|
category: "hero",
|
|
defaultProps: {
|
|
tagline: "Spring 2026",
|
|
heading: "Made for the way you move",
|
|
subheading:
|
|
"A considered wardrobe of essentials, cut from natural fibers and designed to last.",
|
|
buttons: [
|
|
{ label: "Shop the collection", href: "/collections", variant: "primary" },
|
|
{ label: "Our story", href: "/about", variant: "secondary" },
|
|
],
|
|
imageUrl:
|
|
"https://images.unsplash.com/photo-1490481651871-ab68de25d43d?auto=format&fit=crop&w=2400&q=80",
|
|
align: "left",
|
|
height: "lg",
|
|
tone: "dark",
|
|
},
|
|
fields: {
|
|
tagline: { label: "Tagline", type: "text", contentEditable: true },
|
|
heading: { label: "Heading", type: "textarea", contentEditable: true },
|
|
subheading: { label: "Subheading", type: "textarea", contentEditable: true },
|
|
buttons: {
|
|
label: "Buttons",
|
|
type: "array",
|
|
arrayFields: {
|
|
label: { label: "Label", type: "text", contentEditable: true },
|
|
href: { label: "Link", type: "text" },
|
|
variant: {
|
|
label: "Variant",
|
|
type: "select",
|
|
options: [
|
|
{ label: "Primary (filled)", value: "primary" },
|
|
{ label: "Secondary (outline)", value: "secondary" },
|
|
{ label: "Outline", value: "outline" },
|
|
{ label: "Ghost", value: "ghost" },
|
|
],
|
|
},
|
|
},
|
|
defaultItemProps: {
|
|
label: "Button",
|
|
href: "/",
|
|
variant: "primary",
|
|
},
|
|
getItemSummary: (item) => item?.label || "Button",
|
|
},
|
|
imageUrl: { label: "Background image", ...imageField({ adapter: frontendAiMediaAdapter }) },
|
|
align: {
|
|
label: "Alignment",
|
|
type: "radio",
|
|
options: [
|
|
{ label: "Left", value: "left" },
|
|
{ label: "Center", value: "center" },
|
|
],
|
|
},
|
|
height: {
|
|
label: "Height",
|
|
type: "select",
|
|
options: [
|
|
{ label: "Medium", value: "md" },
|
|
{ label: "Large", value: "lg" },
|
|
{ label: "Full", value: "full" },
|
|
],
|
|
},
|
|
tone: {
|
|
label: "Tone",
|
|
type: "radio",
|
|
options: [
|
|
{ label: "Light", value: "light" },
|
|
{ label: "Dark", value: "dark" },
|
|
],
|
|
},
|
|
},
|
|
render: (props) => <Hero {...props} />,
|
|
};
|