Files
manoon-headless/src/components/home/TickerBar.tsx

36 lines
829 B
TypeScript

"use client";
import { motion } from "framer-motion";
export default function TickerBar() {
const items = [
"Free shipping on orders over 3000 RSD",
"Natural ingredients",
"Cruelty-free",
"Handmade with love",
];
return (
<div className="bg-foreground text-white py-3 overflow-hidden">
<motion.div
className="flex whitespace-nowrap"
animate={{ x: ["0%", "-50%"] }}
transition={{
x: {
repeat: Infinity,
repeatType: "loop",
duration: 20,
ease: "linear",
},
}}
>
{[...items, ...items, ...items, ...items].map((item, index) => (
<span key={index} className="mx-8 text-sm tracking-wide">
{item}
</span>
))}
</motion.div>
</div>
);
}