refactor shopify storefront

2026-05-05 13:42:40 -04:00
parent ba8826030c
commit 62fbdead87
156 changed files with 1688 additions and 8293 deletions
--- a/components/testimonials/testimonials.editor.tsx
+++ b/components/testimonials/testimonials.editor.tsx
@@ -0,0 +1,58 @@
+import { ComponentConfig } from "@reacteditor/core";
+import { imageField } from "@reacteditor/plugin-media/field";
+import { Quote } from "lucide-react";
+import { Testimonials, type TestimonialsProps } from "@/components/testimonials/testimonials";
+import { frontendAiMediaAdapter } from "@/services/media-adapter";
+
+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", ...imageField({ adapter: frontendAiMediaAdapter }) },
+      },
+    },
+  },
+  render: (props) => <Testimonials {...props} />,
+};
--- a/components/testimonials/testimonials.tsx
+++ b/components/testimonials/testimonials.tsx
@@ -0,0 +1,81 @@
+import { useState } from "react";
+import { ArrowLeft, ArrowRight } from "lucide-react";
+import { Typography } from "@/components/Typography";
+
+export type TestimonialsProps = {
+  tagline: string;
+  heading: string;
+  items: Array<{
+    quote: string;
+    author: string;
+    role: string;
+    avatar?: string;
+  }>;
+};
+
+export 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">
+            <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>
+  );
+}