Initial commit

editor/components/logos/logos.editor.tsx

@@ -0,0 +1,42 @@
+import { ComponentConfig } from "@reacteditor/core";
+import { Award } from "lucide-react";
+import { Logos, type LogosProps } from "@/editor/components/logos/logos";
+
+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} />,
+};

editor/components/logos/logos.tsx

@@ -0,0 +1,44 @@
+export type LogosProps = {
+  tagline: string;
+  items: Array<{ src: string; alt: string }>;
+  layout: "row" | "marquee";
+};
+
+export 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>
+  );
+}