react-editor-shopify/editor/components/hero/hero.editor.tsx

import { ComponentConfig } from "@reacteditor/core";
import { LayoutTemplate } from "lucide-react";
import { cn } from "~/editor/lib/utils";
import { Typography } from "~/editor/theme/Typography";

export type HeroProps = {
  tagline: string;
  heading: string;
  subheading: string;
  primaryCta: { label: string; href: string };
  secondaryCta: { label: string; href: string };
  imageUrl: string;
  align: "left" | "center";
  height: "md" | "lg" | "full";
  tone: "light" | "dark";
};

const heightClass: Record<HeroProps["height"], string> = {
  md: "min-h-[60vh]",
  lg: "min-h-[80vh]",
  full: "min-h-screen",
};

function Hero({
  tagline,
  heading,
  subheading,
  primaryCta,
  secondaryCta,
  imageUrl,
  align,
  height,
  tone,
}: HeroProps) {
  const isDark = tone === "dark";
  return (
    <section
      className={cn(
        "relative flex w-full items-end overflow-hidden isolate",
        heightClass[height],
      )}
    >
      {imageUrl ? (
        <img
          src={imageUrl}
          alt=""
          className="absolute inset-0 z-0 h-full w-full object-cover"
        />
      ) : null}
      <div
        className="absolute inset-0 z-[1]"
        style={{
          background: isDark
            ? "linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.55) 100%)"
            : "linear-gradient(180deg, rgba(255,255,255,0.0) 30%, rgba(255,255,255,0.85) 100%)",
        }}
      />

      <div
        className={cn(
          "container relative z-[2] mx-auto flex max-w-7xl flex-col px-6 py-20 md:py-28",
          align === "center" ? "items-center text-center" : "items-start",
          isDark ? "text-white" : "text-foreground",
        )}
      >
        {tagline ? (
          <p
            className={cn(
              "mb-5 text-xs uppercase tracking-[0.2em]",
              isDark ? "text-white/80" : "text-foreground/70",
            )}
          >
            {tagline}
          </p>
        ) : null}
        <Typography variant="h1" className="max-w-3xl">
          {heading}
        </Typography>
        {subheading ? (
          <Typography
            variant="subtitle1"
            className={cn(
              "mt-6 max-w-xl",
              isDark ? "text-white/80" : "text-foreground/70",
            )}
          >
            {subheading}
          </Typography>
        ) : null}

        <div
          className={cn(
            "mt-10 flex flex-wrap gap-3",
            align === "center" && "justify-center",
          )}
        >
          {primaryCta?.label ? (
            <a
              href={primaryCta.href || "#"}
              className={cn(
                "inline-flex items-center justify-center rounded-full px-6 py-3 text-sm font-medium tracking-wide transition-opacity hover:opacity-90",
                isDark ? "bg-white text-black" : "bg-foreground text-background",
              )}
            >
              {primaryCta.label}
            </a>
          ) : null}
          {secondaryCta?.label ? (
            <a
              href={secondaryCta.href || "#"}
              className={cn(
                "inline-flex items-center justify-center rounded-full border px-6 py-3 text-sm font-medium tracking-wide transition-opacity hover:opacity-80",
                isDark ? "border-white text-white" : "border-foreground text-foreground",
              )}
            >
              {secondaryCta.label}
            </a>
          ) : null}
        </div>
      </div>
    </section>
  );
}

export const heroEditor: ComponentConfig<HeroProps> = {
  label: "Hero",
  icon: <LayoutTemplate size={16} />,
  category: "hero",
  defaultProps: {
    tagline: "Spring 2026",
    heading: "Made for the way you move",
    subheading:
      "A considered wardrobe of essentials, cut from natural fibers and designed to last.",
    primaryCta: { label: "Shop the collection", href: "/collections" },
    secondaryCta: { label: "Our story", href: "/about" },
    imageUrl:
      "https://images.unsplash.com/photo-1490481651871-ab68de25d43d?auto=format&fit=crop&w=2400&q=80",
    align: "left",
    height: "lg",
    tone: "dark",
  },
  fields: {
    tagline: { label: "Tagline", type: "text", contentEditable: true },
    heading: { label: "Heading", type: "textarea", contentEditable: true },
    subheading: { label: "Subheading", type: "textarea", contentEditable: true },
    primaryCta: {
      label: "Primary CTA",
      type: "object",
      objectFields: {
        label: { label: "Label", type: "text", contentEditable: true },
        href: { label: "Link", type: "text" },
      },
    },
    secondaryCta: {
      label: "Secondary CTA",
      type: "object",
      objectFields: {
        label: { label: "Label", type: "text", contentEditable: true },
        href: { label: "Link", type: "text" },
      },
    },
    imageUrl: { label: "Background image URL", type: "text" },
    align: {
      label: "Alignment",
      type: "radio",
      options: [
        { label: "Left", value: "left" },
        { label: "Center", value: "center" },
      ],
    },
    height: {
      label: "Height",
      type: "select",
      options: [
        { label: "Medium", value: "md" },
        { label: "Large", value: "lg" },
        { label: "Full", value: "full" },
      ],
    },
    tone: {
      label: "Tone",
      type: "radio",
      options: [
        { label: "Light", value: "light" },
        { label: "Dark", value: "dark" },
      ],
    },
  },
  render: (props) => <Hero {...props} />,
};