36 lines
1.3 KiB
TypeScript
36 lines
1.3 KiB
TypeScript
import { motion } from "motion/react";
|
|
|
|
export default function Marquee({speed = 10, items, from, to }: {
|
|
speed?: number,
|
|
items: { src: string }[],
|
|
from: number | string, to: number | string
|
|
}) {
|
|
return (
|
|
<div className="flex">
|
|
<motion.div
|
|
initial={{ x: `${from}` }}
|
|
animate={{ x: `${to}` }}
|
|
transition={{ duration: speed, repeat: Infinity, ease: "linear" }}
|
|
className="flex shrink-0"
|
|
>
|
|
{items.map((item, index: number) => {
|
|
return <img width={300} alt={`marqueImg${index}`}
|
|
className="dark:invert object-scale-down pr-0 sm:pr-16 max-h-16" src={item.src} key={index} />
|
|
})}
|
|
</motion.div>
|
|
|
|
<motion.div
|
|
initial={{ x: `${from}` }}
|
|
animate={{ x: `${to}` }}
|
|
transition={{ duration: speed, repeat: Infinity, ease: "linear" }}
|
|
className="flex shrink-0"
|
|
>
|
|
{items.map((item, index: number) => {
|
|
return <img width={300} alt={`marqueImg${index}`}
|
|
className="dark:invert object-scale-down pr-0 sm:pr-16 max-h-16" src={item.src} key={index} />;
|
|
})}
|
|
</motion.div>
|
|
</div>
|
|
);
|
|
};
|