testimonials-1

1"use client";
2import { motion } from "motion/react";
3import React from "react";
4 
5export type Testimonial = {
6  text: string;
7  image: string;
8  name: string;
9  role: string;
10};
11 
12export const TestimonialsColumn = (props: {
13  className?: string;
14  testimonials: Testimonial[];
15  duration?: number;
16}) => (
17  <div className={props.className}>
18    <motion.div
19      animate={{
20        translateY: "-50%",
21      }}
22      className="flex flex-col gap-6 pb-6"
23      transition={{
24        duration: props.duration || 10,
25        repeat: Number.POSITIVE_INFINITY,
26        ease: "linear",
27        repeatType: "loop",
28      }}
29    >
30      {[
31        ...new Array(2).fill(0).map((_, index) => (
32          <React.Fragment key={`column-${index}`}>
33            {props.testimonials.map(({ text, image, name, role }) => (
34              <div
35                className="w-full max-w-xs rounded-3xl border bg-card p-8 shadow-lg dark:bg-card/20 dark:shadow-foreground/10"
36                key={name}
37              >
38                <div>{text}</div>
39                <div className="mt-5 flex items-center gap-2">
40                  <img
41                    alt={name}
42                    className="h-10 w-10 rounded-full"
43                    height={40}
44                    src={image}
45                    width={40}
46                  />
47                  <div className="flex flex-col">
48                    <div className="font-medium leading-5 tracking-tight">
49                      {name}
50                    </div>
51                    <div className="leading-5 tracking-tight opacity-60">
52                      {role}
53                    </div>
54                  </div>
55                </div>
56              </div>
57            ))}
58          </React.Fragment>
59        )),
60      ]}
61    </motion.div>
62  </div>
63);