Quote Crossfade

"use client";

import * as React from "react";
import QuoteCrossfade, { type Quote } from "@/components/ui/quote-crossfade";

const testimonials: Quote[] = [
  { id: "maya", quote: "The handoff used to be where good ideas got lost. Now the whole team sees the same thing, from the first sketch to the final release.", name: "Maya Chen", role: "Head of product", company: "Northstar", initials: "MC", context: "A clearer handoff" },
  { id: "alex", quote: "It feels considered in all the places you only notice after a few weeks. Less explaining, fewer loose ends, and more time for the work itself.", name: "Alex Morgan", role: "Design director", company: "Folio", initials: "AM", context: "More time to design" },
  { id: "jordan", quote: "We finally have one place where decisions make sense together. What changed, why it changed, and what we’re building next.", name: "Jordan Rivera", role: "Engineering lead", company: "Relay", initials: "JR", context: "Built for the whole team" },
];

const settings = {
  title: "Good work travels through people.",
  description: "Different teams. Shared momentum. A few words from the people doing the work.",
  autoPlay: false,
  interval: 6500,
  showAuthorTabs: true,
  quoteCount: 3,
};

export default function QuoteCrossfadeDemo(props: Partial<typeof settings> = {}) {
  const config = { ...settings, ...props };
  const quotes = testimonials.slice(0, Math.max(0, Math.min(3, Math.round(config.quoteCount))));
  return (
    <main className="w-full bg-background text-foreground" style={{ maxWidth: 920, margin: "0 auto", padding: "clamp(16px, 4vw, 40px)" }}>
      <QuoteCrossfade quotes={quotes} title={config.title} description={config.description} autoPlay={config.autoPlay} interval={config.interval} showAuthorTabs={config.showAuthorTabs} />
      <p className="text-muted-foreground" style={{ margin: "16px 4px 0", fontSize: 11, lineHeight: 1.6 }}>Fictional testimonials for demonstration. Replace them with your own stories.</p>
    </main>
  );
}