133 lines
4.0 KiB
TypeScript
133 lines
4.0 KiB
TypeScript
import { ComponentConfig } from "@reacteditor/core";
|
|
import { Megaphone } from "lucide-react";
|
|
import { cn } from "~/editor/lib/utils";
|
|
import { Typography } from "~/editor/theme/Typography";
|
|
|
|
export type CTAProps = {
|
|
tagline: string;
|
|
heading: string;
|
|
subheading: string;
|
|
primaryCta: { label: string; href: string };
|
|
secondaryCta: { label: string; href: string };
|
|
imageUrl: string;
|
|
align: "left" | "center";
|
|
};
|
|
|
|
function CTA({
|
|
tagline,
|
|
heading,
|
|
subheading,
|
|
primaryCta,
|
|
secondaryCta,
|
|
imageUrl,
|
|
align,
|
|
}: CTAProps) {
|
|
return (
|
|
<section className="relative overflow-hidden py-24 md:py-32">
|
|
<div className="absolute inset-0 -z-10">
|
|
{imageUrl ? (
|
|
<>
|
|
<img
|
|
src={imageUrl}
|
|
alt=""
|
|
className="h-full w-full object-cover"
|
|
/>
|
|
<div className="absolute inset-0 bg-black/45" />
|
|
</>
|
|
) : (
|
|
<div className="h-full w-full bg-foreground" />
|
|
)}
|
|
</div>
|
|
<div
|
|
className={cn(
|
|
"container mx-auto flex max-w-4xl flex-col px-6 text-white",
|
|
align === "center" ? "items-center text-center" : "items-start",
|
|
)}
|
|
>
|
|
{tagline ? (
|
|
<p className="mb-4 text-xs uppercase tracking-[0.2em] text-white/80">
|
|
{tagline}
|
|
</p>
|
|
) : null}
|
|
<Typography variant="h2">{heading}</Typography>
|
|
{subheading ? (
|
|
<Typography variant="subtitle1" className="mt-5 max-w-xl text-white/80">
|
|
{subheading}
|
|
</Typography>
|
|
) : null}
|
|
<div
|
|
className={cn(
|
|
"mt-10 flex flex-wrap gap-3",
|
|
align === "center" && "justify-center",
|
|
)}
|
|
>
|
|
{primaryCta?.label ? (
|
|
<a
|
|
href={primaryCta.href || "#"}
|
|
className="inline-flex items-center justify-center rounded-full bg-white px-6 py-3 text-sm font-medium tracking-wide text-black hover:opacity-90"
|
|
>
|
|
{primaryCta.label}
|
|
</a>
|
|
) : null}
|
|
{secondaryCta?.label ? (
|
|
<a
|
|
href={secondaryCta.href || "#"}
|
|
className="inline-flex items-center justify-center rounded-full border border-white px-6 py-3 text-sm font-medium tracking-wide text-white hover:bg-white/10"
|
|
>
|
|
{secondaryCta.label}
|
|
</a>
|
|
) : null}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|
|
|
|
export const ctaEditor: ComponentConfig<CTAProps> = {
|
|
label: "Call to action",
|
|
icon: <Megaphone size={16} />,
|
|
category: "content",
|
|
defaultProps: {
|
|
tagline: "",
|
|
heading: "Designed once. Worn for years.",
|
|
subheading:
|
|
"Join 40,000 people building a wardrobe they actually reach for.",
|
|
primaryCta: { label: "Shop now", href: "/collections" },
|
|
secondaryCta: { label: "Read our story", href: "/about" },
|
|
imageUrl:
|
|
"https://images.unsplash.com/photo-1483985988355-763728e1935b?auto=format&fit=crop&w=2400&q=80",
|
|
align: "center",
|
|
},
|
|
fields: {
|
|
tagline: { label: "Tagline", type: "text", contentEditable: true },
|
|
heading: { label: "Heading", type: "textarea", contentEditable: true },
|
|
subheading: { label: "Subheading", type: "textarea", contentEditable: true },
|
|
primaryCta: {
|
|
label: "Primary CTA",
|
|
type: "object",
|
|
objectFields: {
|
|
label: { label: "Label", type: "text", contentEditable: true },
|
|
href: { label: "Link", type: "text" },
|
|
},
|
|
},
|
|
secondaryCta: {
|
|
label: "Secondary CTA",
|
|
type: "object",
|
|
objectFields: {
|
|
label: { label: "Label", type: "text", contentEditable: true },
|
|
href: { label: "Link", type: "text" },
|
|
},
|
|
},
|
|
imageUrl: { label: "Background image URL", type: "text" },
|
|
align: {
|
|
label: "Alignment",
|
|
type: "radio",
|
|
options: [
|
|
{ label: "Left", value: "left" },
|
|
{ label: "Center", value: "center" },
|
|
],
|
|
},
|
|
},
|
|
render: (props) => <CTA {...props} />,
|
|
};
|