32 lines
1.2 KiB
TypeScript
Executable File
32 lines
1.2 KiB
TypeScript
Executable File
import React from 'react';
|
|
import { ArrowTopRightIcon } from './icons';
|
|
|
|
interface BoldIdeasCarouselProps {
|
|
ideas: string[];
|
|
direction?: 'normal' | 'reverse';
|
|
duration?: string;
|
|
}
|
|
|
|
const BoldIdeasCarousel: React.FC<BoldIdeasCarouselProps> = ({ ideas, direction = 'normal', duration = '72s' }) => {
|
|
return (
|
|
<div className="w-full overflow-hidden">
|
|
<div
|
|
className="flex w-fit"
|
|
style={{ animation: `auto-scroll ${duration} linear infinite`, animationDirection: direction }}
|
|
>
|
|
{/* Render the list twice for seamless loop */}
|
|
{[...ideas, ...ideas].map((idea, index) => (
|
|
<div key={`${direction}-idea-${index}`} className="group relative mx-1 flex w-72 items-center justify-center self-stretch rounded-md bg-slate-50 p-4 transition-all hover:bg-slate-100">
|
|
<a href="#" onClick={(e) => e.preventDefault()} className="text-sm text-center text-slate-700 font-medium cursor-default">
|
|
{idea}
|
|
<ArrowTopRightIcon className="ml-1.5 inline-block h-3 w-3 -translate-y-px transition-transform group-hover:translate-x-0.5 group-hover:-translate-y-1" />
|
|
</a>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default BoldIdeasCarousel;
|