87 lines
2.6 KiB
TypeScript
87 lines
2.6 KiB
TypeScript
import { ComponentConfig } from "@reacteditor/core";
|
|
import { Award } from "lucide-react";
|
|
|
|
export type LogosProps = {
|
|
tagline: string;
|
|
items: Array<{ src: string; alt: string }>;
|
|
layout: "row" | "marquee";
|
|
};
|
|
|
|
function Logos({ tagline, items, layout }: LogosProps) {
|
|
return (
|
|
<section className="border-y border-border bg-muted/40 py-12">
|
|
<div className="container mx-auto max-w-7xl px-6">
|
|
{tagline ? (
|
|
<p className="mb-8 text-center text-xs uppercase tracking-[0.2em] text-muted-foreground">
|
|
{tagline}
|
|
</p>
|
|
) : null}
|
|
{layout === "marquee" ? (
|
|
<div className="overflow-hidden">
|
|
<div className="flex animate-[marquee_30s_linear_infinite] gap-16 [--gap:4rem]">
|
|
{[...items, ...items].map((it, i) => (
|
|
<img
|
|
key={i}
|
|
src={it.src}
|
|
alt={it.alt}
|
|
className="h-7 w-auto opacity-60 grayscale"
|
|
/>
|
|
))}
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<div className="flex flex-wrap items-center justify-center gap-x-12 gap-y-6">
|
|
{items.map((it, i) => (
|
|
<img
|
|
key={i}
|
|
src={it.src}
|
|
alt={it.alt}
|
|
className="h-7 w-auto opacity-60 grayscale"
|
|
/>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|
|
|
|
export const logosEditor: ComponentConfig<LogosProps> = {
|
|
label: "Press / Logos",
|
|
icon: <Award size={16} />,
|
|
category: "content",
|
|
defaultProps: {
|
|
tagline: "As seen in",
|
|
layout: "row",
|
|
items: [
|
|
{ src: "https://logo.clearbit.com/vogue.com", alt: "Vogue" },
|
|
{ src: "https://logo.clearbit.com/highsnobiety.com", alt: "Highsnobiety" },
|
|
{ src: "https://logo.clearbit.com/gq.com", alt: "GQ" },
|
|
{ src: "https://logo.clearbit.com/dezeen.com", alt: "Dezeen" },
|
|
{ src: "https://logo.clearbit.com/wallpaper.com", alt: "Wallpaper*" },
|
|
],
|
|
},
|
|
fields: {
|
|
tagline: { label: "Tagline", type: "text", contentEditable: true },
|
|
layout: {
|
|
label: "Layout",
|
|
type: "radio",
|
|
options: [
|
|
{ label: "Row", value: "row" },
|
|
{ label: "Marquee", value: "marquee" },
|
|
],
|
|
},
|
|
items: {
|
|
label: "Logos",
|
|
type: "array",
|
|
defaultItemProps: { src: "", alt: "" },
|
|
getItemSummary: (it) => it?.alt || "Logo",
|
|
arrayFields: {
|
|
src: { label: "Image URL", type: "text" },
|
|
alt: { label: "Alt text", type: "text", contentEditable: true },
|
|
},
|
|
},
|
|
},
|
|
render: (props) => <Logos {...props} />,
|
|
};
|