Spaces:
Running
Running
File size: 2,076 Bytes
86fbe37 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 |
"use client";
import { useEffect, useRef, useState } from 'react';
import './LogoLoop.css';
interface LogoItem {
node: React.ReactNode;
title?: string;
}
interface LogoLoopProps {
logos: LogoItem[];
speed?: number;
logoHeight?: number;
gap?: number;
pauseOnHover?: boolean;
fadeOut?: boolean;
fadeOutColor?: string;
}
export default function LogoLoop({
logos,
speed = 30,
logoHeight = 36,
gap = 56,
pauseOnHover = true,
fadeOut = true,
fadeOutColor = '#050505'
}: LogoLoopProps) {
const containerRef = useRef<HTMLDivElement>(null);
const [duration, setDuration] = useState(20);
useEffect(() => {
// Calculate animation duration based on content width and speed
if (containerRef.current) {
const trackWidth = containerRef.current.querySelector('.logo-track')?.scrollWidth || 0;
const calculatedDuration = trackWidth / speed;
setDuration(Math.max(10, calculatedDuration));
}
}, [logos, speed]);
const cssVars = {
'--logo-height': `${logoHeight}px`,
'--logo-gap': `${gap}px`,
'--animation-duration': `${duration}s`,
'--fade-color': fadeOutColor,
} as React.CSSProperties;
return (
<div
ref={containerRef}
className={`logo-loop-container ${fadeOut ? 'with-fade' : ''} ${pauseOnHover ? 'pause-on-hover' : ''}`}
style={cssVars}
>
<div className="logo-track">
{/* First set of logos */}
{logos.map((logo, index) => (
<div key={`a-${index}`} className="logo-item" title={logo.title}>
{logo.node}
</div>
))}
{/* Duplicate for seamless loop */}
{logos.map((logo, index) => (
<div key={`b-${index}`} className="logo-item" title={logo.title}>
{logo.node}
</div>
))}
</div>
</div>
);
}
|