Initial commit

2026-05-02 09:18:15 -04:00
commit 7348e430c0
96 changed files with 15753 additions and 0 deletions
--- a/editor/components/landing/image-gallery.editor.tsx
+++ b/editor/components/landing/image-gallery.editor.tsx
@@ -0,0 +1,139 @@
+import { ComponentConfig } from "@reacteditor/core";
+import { Images } from "lucide-react";
+import { cn } from "~/editor/lib/utils";
+import { Typography } from "~/editor/theme/Typography";
+
+export type ImageGalleryProps = {
+  tagline: string;
+  heading: string;
+  subheading: string;
+  layout: "grid" | "masonry" | "editorial";
+  items: Array<{ src: string; alt: string; caption?: string }>;
+};
+
+function ImageGallery({ tagline, heading, subheading, layout, items }: ImageGalleryProps) {
+  return (
+    <section className="bg-background py-20 md:py-28">
+      <div className="container mx-auto max-w-7xl px-6">
+        {(tagline || heading || subheading) && (
+          <div className="mx-auto mb-12 max-w-2xl text-center">
+            {tagline ? (
+              <p className="mb-3 text-xs uppercase tracking-[0.2em] text-muted-foreground">
+                {tagline}
+              </p>
+            ) : null}
+            {heading ? <Typography variant="h2">{heading}</Typography> : null}
+            {subheading ? (
+              <Typography variant="subtitle1" className="mt-3">
+                {subheading}
+              </Typography>
+            ) : null}
+          </div>
+        )}
+
+        {layout === "masonry" ? (
+          <div className="columns-1 gap-4 sm:columns-2 lg:columns-3">
+            {items.map((it, i) => (
+              <figure key={i} className="mb-4 break-inside-avoid">
+                <img
+                  src={it.src}
+                  alt={it.alt}
+                  className="w-full rounded-md object-cover"
+                />
+                {it.caption ? (
+                  <figcaption className="mt-2 text-xs text-muted-foreground">
+                    {it.caption}
+                  </figcaption>
+                ) : null}
+              </figure>
+            ))}
+          </div>
+        ) : layout === "editorial" ? (
+          <div className="grid grid-cols-1 gap-6 md:grid-cols-12">
+            {items.slice(0, 5).map((it, i) => (
+              <figure
+                key={i}
+                className={cn(
+                  "overflow-hidden rounded-md bg-muted",
+                  i === 0 && "md:col-span-7 md:row-span-2",
+                  i === 1 && "md:col-span-5",
+                  i === 2 && "md:col-span-5",
+                  i === 3 && "md:col-span-6",
+                  i === 4 && "md:col-span-6",
+                )}
+              >
+                <img
+                  src={it.src}
+                  alt={it.alt}
+                  className="h-full w-full object-cover"
+                />
+              </figure>
+            ))}
+          </div>
+        ) : (
+          <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
+            {items.map((it, i) => (
+              <figure key={i}>
+                <img
+                  src={it.src}
+                  alt={it.alt}
+                  className="aspect-[4/5] w-full rounded-md object-cover"
+                />
+                {it.caption ? (
+                  <figcaption className="mt-2 text-xs text-muted-foreground">
+                    {it.caption}
+                  </figcaption>
+                ) : null}
+              </figure>
+            ))}
+          </div>
+        )}
+      </div>
+    </section>
+  );
+}
+
+export const imageGalleryEditor: ComponentConfig<ImageGalleryProps> = {
+  label: "Image gallery",
+  icon: <Images size={16} />,
+  category: "content",
+  defaultProps: {
+    tagline: "Lookbook",
+    heading: "Spring in the studio",
+    subheading: "",
+    layout: "editorial",
+    items: [
+      { src: "https://images.unsplash.com/photo-1490481651871-ab68de25d43d?auto=format&fit=crop&w=1600&q=80", alt: "" },
+      { src: "https://images.unsplash.com/photo-1483985988355-763728e1935b?auto=format&fit=crop&w=1200&q=80", alt: "" },
+      { src: "https://images.unsplash.com/photo-1469334031218-e382a71b716b?auto=format&fit=crop&w=1200&q=80", alt: "" },
+      { src: "https://images.unsplash.com/photo-1542838132-92c53300491e?auto=format&fit=crop&w=1200&q=80", alt: "" },
+      { src: "https://images.unsplash.com/photo-1521572163474-6864f9cf17ab?auto=format&fit=crop&w=1200&q=80", alt: "" },
+    ],
+  },
+  fields: {
+    tagline: { label: "Tagline", type: "text", contentEditable: true },
+    heading: { label: "Heading", type: "text", contentEditable: true },
+    subheading: { label: "Subheading", type: "textarea", contentEditable: true },
+    layout: {
+      label: "Layout",
+      type: "select",
+      options: [
+        { label: "Grid", value: "grid" },
+        { label: "Masonry", value: "masonry" },
+        { label: "Editorial (mosaic)", value: "editorial" },
+      ],
+    },
+    items: {
+      label: "Images",
+      type: "array",
+      defaultItemProps: { src: "", alt: "" },
+      getItemSummary: (it) => it?.alt || it?.src || "Image",
+      arrayFields: {
+        src: { label: "Image URL", type: "text" },
+        alt: { label: "Alt text", type: "text", contentEditable: true },
+        caption: { label: "Caption", type: "text", contentEditable: true },
+      },
+    },
+  },
+  render: (props) => <ImageGallery {...props} />,
+};