Initial commit
This commit is contained in:
Rami Bitar
58
components/testimonials/testimonials.editor.tsx
Normal file
58
components/testimonials/testimonials.editor.tsx
Normal file
@@ -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} />,
|
||||
};
|
||||
100
components/testimonials/testimonials.tsx
Normal file
100
components/testimonials/testimonials.tsx
Normal file
@@ -0,0 +1,100 @@
|
||||
import { useState } from "react";
|
||||
import { ArrowLeft, ArrowRight } from "lucide-react";
|
||||
import { Heading } from "@/components/Heading";
|
||||
|
||||
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">
|
||||
<Heading
|
||||
tagline={tagline}
|
||||
title={heading}
|
||||
align="center"
|
||||
size="lg"
|
||||
/>
|
||||
|
||||
{item ? (
|
||||
<div className="relative mt-12">
|
||||
{total > 1 ? (
|
||||
<button
|
||||
onClick={() => setI((p) => (p - 1 + total) % total)}
|
||||
className="absolute left-0 top-1/2 hidden -translate-y-1/2 items-center justify-center rounded-full border h-10 w-10 hover:bg-background md:inline-flex"
|
||||
aria-label="Previous"
|
||||
>
|
||||
<ArrowLeft size={16} />
|
||||
</button>
|
||||
) : null}
|
||||
|
||||
<figure className="mx-auto flex max-w-2xl flex-col items-center px-12 md:px-16">
|
||||
<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>
|
||||
|
||||
{total > 1 ? (
|
||||
<button
|
||||
onClick={() => setI((p) => (p + 1) % total)}
|
||||
className="absolute right-0 top-1/2 hidden -translate-y-1/2 items-center justify-center rounded-full border h-10 w-10 hover:bg-background md:inline-flex"
|
||||
aria-label="Next"
|
||||
>
|
||||
<ArrowRight size={16} />
|
||||
</button>
|
||||
) : null}
|
||||
|
||||
{total > 1 ? (
|
||||
<div className="mt-8 flex items-center justify-center gap-3 md:hidden">
|
||||
<button
|
||||
onClick={() => setI((p) => (p - 1 + total) % total)}
|
||||
className="inline-flex h-10 w-10 items-center justify-center rounded-full border hover:bg-background"
|
||||
aria-label="Previous"
|
||||
>
|
||||
<ArrowLeft size={16} />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setI((p) => (p + 1) % total)}
|
||||
className="inline-flex h-10 w-10 items-center justify-center rounded-full border hover:bg-background"
|
||||
aria-label="Next"
|
||||
>
|
||||
<ArrowRight size={16} />
|
||||
</button>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user