File size: 1,219 Bytes
8249edc 861109d 72afa7d 8249edc 861109d 679c013 861109d 679c013 72afa7d 679c013 b74dfb6 861109d 72afa7d | 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 | import type { ReactNode } from 'react';
import './LogoLoop.css';
interface LogoItem {
node: ReactNode;
title?: string;
href?: string;
}
interface LogoLoopProps {
logos: LogoItem[];
durationSeconds?: number;
logoSize?: number;
gap?: number;
}
export default function LogoLoop({ logos, durationSeconds = 20, logoSize = 48, gap = 64 }: LogoLoopProps) {
const renderSet = (key: string, hidden: boolean) => (
<div className="logoloop-set" aria-hidden={hidden} key={key}>
{logos.map((item, i) => (
<div className="logoloop-item" key={i} style={{ fontSize: `${logoSize}px`, marginRight: `${gap}px` }}>
{item.href ? (
<a href={item.href} target="_blank" rel="noopener noreferrer" title={item.title}>
{item.node}
</a>
) : (
<span title={item.title}>{item.node}</span>
)}
</div>
))}
</div>
);
return (
<div className="logoloop-wrapper">
<div className="logoloop-track" style={{ animationDuration: `${durationSeconds}s` }}>
{renderSet('a', false)}
{renderSet('b', true)}
{renderSet('c', true)}
{renderSet('d', true)}
</div>
</div>
);
}
|