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

import { ComponentConfig } from "@reacteditor/core";
import { useState } from "react";
import { Quote, ArrowLeft, ArrowRight } from "lucide-react";
import { Typography } from "~/editor/theme/Typography";

export type TestimonialsProps = {
  tagline: string;
  heading: string;
  items: Array<{
    quote: string;
    author: string;
    role: string;
    avatar?: string;
  }>;
};

function Testimonials({ tagline, heading, items }: TestimonialsProps) {
  const [i, setI] = useState(0);
  const total = items.length;
  const item = items[i];

  return (
    <section className="bg-muted/40 py-20 md:py-28">
      <div className="container mx-auto max-w-4xl px-6 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}

        {item ? (
          <figure className="mx-auto mt-12 flex max-w-2xl flex-col items-center">
            <Quote
              size={28}
              strokeWidth={1.25}
              className="mb-6 text-muted-foreground"
            />
            <blockquote
              className="text-balance text-foreground"
              style={{ fontSize: "clamp(1.25rem, 2.4vw, 1.75rem)", lineHeight: 1.4 }}
            >
              "{item.quote}"
            </blockquote>
            <figcaption className="mt-8 flex items-center gap-3">
              {item.avatar ? (
                <img
                  src={item.avatar}
                  alt={item.author}
                  className="h-10 w-10 rounded-full object-cover"
                />
              ) : null}
              <div className="text-left">
                <p className="text-sm font-medium">{item.author}</p>
                {item.role ? (
                  <p className="text-xs text-muted-foreground">{item.role}</p>
                ) : null}
              </div>
            </figcaption>
          </figure>
        ) : null}

        {total > 1 ? (
          <div className="mt-10 flex items-center justify-center gap-3">
            <button
              onClick={() => setI((p) => (p - 1 + total) % total)}
              className="inline-flex h-10 w-10 items-center justify-center rounded-full border border-border hover:bg-background"
              aria-label="Previous"
            >
              <ArrowLeft size={16} />
            </button>
            <span className="text-xs tabular-nums text-muted-foreground">
              {i + 1} / {total}
            </span>
            <button
              onClick={() => setI((p) => (p + 1) % total)}
              className="inline-flex h-10 w-10 items-center justify-center rounded-full border border-border hover:bg-background"
              aria-label="Next"
            >
              <ArrowRight size={16} />
            </button>
          </div>
        ) : null}
      </div>
    </section>
  );
}

export const testimonialsEditor: ComponentConfig<TestimonialsProps> = {
  label: "Testimonials",
  icon: <Quote size={16} />,
  category: "content",
  defaultProps: {
    tagline: "Reviews",
    heading: "What our customers say",
    items: [
      {
        quote:
          "I've been wearing the same linen shirt for two summers now and it's somehow gotten better with every wash.",
        author: "Mara K.",
        role: "Berlin",
        avatar:
          "https://images.unsplash.com/photo-1494790108377-be9c29b29330?auto=format&fit=crop&w=200&q=80",
      },
      {
        quote:
          "Considered cuts, neutral palette, real fabric. Exactly what I want when I'm getting dressed in the dark.",
        author: "Theo R.",
        role: "Brooklyn",
        avatar:
          "https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?auto=format&fit=crop&w=200&q=80",
      },
      {
        quote:
          "The shipping was thoughtful, the packaging was minimal, and the trousers fit on the first try. Rare combination.",
        author: "Ines P.",
        role: "Paris",
        avatar:
          "https://images.unsplash.com/photo-1580489944761-15a19d654956?auto=format&fit=crop&w=200&q=80",
      },
    ],
  },
  fields: {
    tagline: { label: "Tagline", type: "text", contentEditable: true },
    heading: { label: "Heading", type: "text", contentEditable: true },
    items: {
      label: "Items",
      type: "array",
      defaultItemProps: { quote: "", author: "", role: "" },
      getItemSummary: (it) => it?.author || "Testimonial",
      arrayFields: {
        quote: { label: "Quote", type: "textarea", contentEditable: true },
        author: { label: "Author", type: "text", contentEditable: true },
        role: { label: "Role", type: "text", contentEditable: true },
        avatar: { label: "Avatar URL", type: "text" },
      },
    },
  },
  render: (props) => <Testimonials {...props} />,
};