import { AnimatedTestimonials } from '@hanzo/ui'
Three quotes take turns every 5 seconds, each fading up into place, or jump to one by its dot.
“This product has completely transformed how our team collaborates. The interface is intuitive and the features are exactly what we needed.”
export function Default() {return (<YStack maxW={480} width="100%"><AnimatedTestimonials testimonials={quotes} /></YStack>)}
`autoPlay={false}` holds on the first quote until a dot is clicked.
“This product has completely transformed how our team collaborates. The interface is intuitive and the features are exactly what we needed.”
export function Paused() {return (<YStack maxW={480} width="100%"><AnimatedTestimonials testimonials={quotes} autoPlay={false} /></YStack>)}
A short `duration` advances every 1.5 seconds, for a busy marketing strip.
“This product has completely transformed how our team collaborates. The interface is intuitive and the features are exactly what we needed.”
export function Fast() {return (<YStack maxW={480} width="100%"><AnimatedTestimonials testimonials={quotes} duration={1500} /></YStack>)}
An author with neither role nor company skips the meta line entirely.
“Just works, out of the box.”
export function AuthorOnly() {const anonymous: Testimonial[] = [{ id: "1", content: "Just works, out of the box.", author: "J. Rivera" },]return (<YStack maxW={480} width="100%"><AnimatedTestimonials testimonials={anonymous} autoPlay={false} /></YStack>)}
export type Testimonial = {id: stringcontent: stringauthor: stringrole?: stringcompany?: stringavatar?: string}
export type AnimatedTestimonialsProps = Omit<React.ComponentProps<typeof Frame>, 'children'> & {testimonials: Testimonial[]/** Advance on its own. Default true. */autoPlay?: boolean/** Milliseconds between slides. Default 5000. */duration?: number}