54 lines
1.7 KiB
TypeScript
54 lines
1.7 KiB
TypeScript
import React from "react";
|
|
|
|
interface PartnerLogo {
|
|
id: string;
|
|
label: React.ReactNode;
|
|
}
|
|
|
|
interface PartnerTickerProps {
|
|
logos: PartnerLogo[];
|
|
}
|
|
|
|
export function PartnerTicker({ logos }: PartnerTickerProps) {
|
|
// Duplicate logos for seamless infinite loop
|
|
const track = [...logos, ...logos];
|
|
|
|
return (
|
|
<div style={{ overflow: 'hidden', flex: 1, minWidth: 0, position: 'relative' }}>
|
|
{/* fade edges */}
|
|
<div style={{ position: 'absolute', inset: 0, left: 0, width: 32, background: 'linear-gradient(to right, rgba(5,26,135,0.6), transparent)', zIndex: 1, pointerEvents: 'none' }} />
|
|
<div style={{ position: 'absolute', inset: 0, right: 0, left: 'auto', width: 32, background: 'linear-gradient(to left, rgba(5,26,135,0.6), transparent)', zIndex: 1, pointerEvents: 'none' }} />
|
|
|
|
<div style={{ display: 'flex', animation: 'marquee 22s linear infinite', width: 'max-content' }}>
|
|
{track.map((logo, i) => (
|
|
<div
|
|
key={`${logo.id}-${i}`}
|
|
style={{
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
padding: '0 24px',
|
|
color: '#fff',
|
|
fontFamily: '"IBM Plex Sans", sans-serif',
|
|
textTransform: 'uppercase',
|
|
whiteSpace: 'nowrap',
|
|
width: 140,
|
|
flexShrink: 0,
|
|
textAlign: 'center',
|
|
}}
|
|
>
|
|
{logo.label}
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
<style>{`
|
|
@keyframes marquee {
|
|
from { transform: translateX(0); }
|
|
to { transform: translateX(-50%); }
|
|
}
|
|
`}</style>
|
|
</div>
|
|
);
|
|
}
|