112 lines
3.7 KiB
TypeScript
112 lines
3.7 KiB
TypeScript
import { ComponentConfig } from "@reacteditor/core";
|
|
import { useState } from "react";
|
|
import { HelpCircle, Plus, Minus } from "lucide-react";
|
|
import { Typography } from "~/editor/theme/Typography";
|
|
|
|
export type FAQProps = {
|
|
tagline: string;
|
|
heading: string;
|
|
subheading: string;
|
|
items: Array<{ question: string; answer: string }>;
|
|
};
|
|
|
|
function FAQ({ tagline, heading, subheading, items }: FAQProps) {
|
|
const [open, setOpen] = useState<number | null>(0);
|
|
return (
|
|
<section className="bg-background py-20 md:py-28">
|
|
<div className="container mx-auto max-w-3xl px-6">
|
|
<div className="mb-12 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="divide-y divide-border border-y border-border">
|
|
{items.map((item, i) => {
|
|
const isOpen = open === i;
|
|
return (
|
|
<div key={i}>
|
|
<button
|
|
onClick={() => setOpen(isOpen ? null : i)}
|
|
className="flex w-full items-center justify-between py-6 text-left"
|
|
>
|
|
<span className="text-base font-medium tracking-tight md:text-lg">
|
|
{item.question}
|
|
</span>
|
|
{isOpen ? (
|
|
<Minus size={18} strokeWidth={1.5} className="flex-shrink-0" />
|
|
) : (
|
|
<Plus size={18} strokeWidth={1.5} className="flex-shrink-0" />
|
|
)}
|
|
</button>
|
|
{isOpen ? (
|
|
<p className="pb-6 pr-8 text-sm leading-relaxed text-muted-foreground md:text-base">
|
|
{item.answer}
|
|
</p>
|
|
) : null}
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|
|
|
|
export const faqEditor: ComponentConfig<FAQProps> = {
|
|
label: "FAQ",
|
|
icon: <HelpCircle size={16} />,
|
|
category: "content",
|
|
defaultProps: {
|
|
tagline: "Help",
|
|
heading: "Common questions",
|
|
subheading: "",
|
|
items: [
|
|
{
|
|
question: "What's your return policy?",
|
|
answer:
|
|
"Free returns within 30 days of delivery. Items should be unworn with original tags attached.",
|
|
},
|
|
{
|
|
question: "Where do you ship?",
|
|
answer:
|
|
"We ship worldwide. Free standard shipping on orders over $150 in the US, $250 international.",
|
|
},
|
|
{
|
|
question: "How are your products made?",
|
|
answer:
|
|
"In small batches at family-run mills in Portugal, Italy, and Japan. Every piece is sampled and approved by our team.",
|
|
},
|
|
{
|
|
question: "How do I care for my pieces?",
|
|
answer:
|
|
"Cold wash, lay flat to dry, iron when damp. Care details are on every product page and on the inner label.",
|
|
},
|
|
],
|
|
},
|
|
fields: {
|
|
tagline: { label: "Tagline", type: "text", contentEditable: true },
|
|
heading: { label: "Heading", type: "text", contentEditable: true },
|
|
subheading: { label: "Subheading", type: "textarea", contentEditable: true },
|
|
items: {
|
|
label: "Items",
|
|
type: "array",
|
|
defaultItemProps: { question: "", answer: "" },
|
|
getItemSummary: (it) => it?.question || "Question",
|
|
arrayFields: {
|
|
question: { label: "Question", type: "text", contentEditable: true },
|
|
answer: { label: "Answer", type: "textarea", contentEditable: true },
|
|
},
|
|
},
|
|
},
|
|
render: (props) => <FAQ {...props} />,
|
|
};
|