105 lines
3.4 KiB
TypeScript
105 lines
3.4 KiB
TypeScript
import { ComponentConfig } from "@reacteditor/core";
|
|
import { Sparkles } from "lucide-react";
|
|
import { Typography } from "~/editor/theme/Typography";
|
|
|
|
export type FeaturesProps = {
|
|
tagline: string;
|
|
heading: string;
|
|
subheading: string;
|
|
columns: "2" | "3" | "4";
|
|
items: Array<{ title: string; body: string }>;
|
|
};
|
|
|
|
const colClass: Record<FeaturesProps["columns"], string> = {
|
|
"2": "md:grid-cols-2",
|
|
"3": "md:grid-cols-3",
|
|
"4": "md:grid-cols-2 lg:grid-cols-4",
|
|
};
|
|
|
|
function Features({ tagline, heading, subheading, columns, items }: FeaturesProps) {
|
|
return (
|
|
<section className="bg-background py-20 md:py-28">
|
|
<div className="container mx-auto max-w-7xl px-6">
|
|
<div className="mx-auto mb-16 max-w-2xl text-center">
|
|
{tagline ? (
|
|
<p className="mb-3 text-xs uppercase tracking-[0.2em] text-muted-foreground">
|
|
{tagline}
|
|
</p>
|
|
) : null}
|
|
<Typography variant="h2">{heading}</Typography>
|
|
{subheading ? (
|
|
<Typography variant="subtitle1" className="mt-3">
|
|
{subheading}
|
|
</Typography>
|
|
) : null}
|
|
</div>
|
|
|
|
<div className={`grid grid-cols-1 gap-x-10 gap-y-12 ${colClass[columns]}`}>
|
|
{items.map((item, i) => (
|
|
<div key={i} className="border-t border-border pt-6">
|
|
<p className="mb-3 text-xs tracking-[0.18em] text-muted-foreground">
|
|
{String(i + 1).padStart(2, "0")}
|
|
</p>
|
|
<Typography variant="h5">{item.title}</Typography>
|
|
<Typography variant="body2" className="mt-3 text-muted-foreground">
|
|
{item.body}
|
|
</Typography>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|
|
|
|
export const featuresEditor: ComponentConfig<FeaturesProps> = {
|
|
label: "Features",
|
|
icon: <Sparkles size={16} />,
|
|
category: "content",
|
|
defaultProps: {
|
|
tagline: "Why us",
|
|
heading: "Built with intention",
|
|
subheading: "A small set of values that shape every piece we make.",
|
|
columns: "3",
|
|
items: [
|
|
{
|
|
title: "Natural fibers",
|
|
body: "Linen, organic cotton, and merino — sourced from mills with traceable supply chains.",
|
|
},
|
|
{
|
|
title: "Small batches",
|
|
body: "Made in considered quantities so nothing goes to waste — and nothing gets discounted into the bin.",
|
|
},
|
|
{
|
|
title: "Built to last",
|
|
body: "Reinforced seams, double-stitched edges, and finishes that age into something better.",
|
|
},
|
|
],
|
|
},
|
|
fields: {
|
|
tagline: { label: "Tagline", type: "text", contentEditable: true },
|
|
heading: { label: "Heading", type: "text", contentEditable: true },
|
|
subheading: { label: "Subheading", type: "textarea", contentEditable: true },
|
|
columns: {
|
|
label: "Columns",
|
|
type: "select",
|
|
options: [
|
|
{ label: "2 columns", value: "2" },
|
|
{ label: "3 columns", value: "3" },
|
|
{ label: "4 columns", value: "4" },
|
|
],
|
|
},
|
|
items: {
|
|
label: "Items",
|
|
type: "array",
|
|
defaultItemProps: { title: "Feature", body: "Description." },
|
|
getItemSummary: (it) => it?.title || "Feature",
|
|
arrayFields: {
|
|
title: { label: "Title", type: "text", contentEditable: true },
|
|
body: { label: "Body", type: "textarea", contentEditable: true },
|
|
},
|
|
},
|
|
},
|
|
render: (props) => <Features {...props} />,
|
|
};
|