"use client"; import { useEffect, useMemo, useRef, useState } from "react"; const DEFAULT_LOGOS = [ "Lorem", "Ipsum", "Dolor", "Amet", "Elit", "Tempor", "Magna", "Aliqua", "Veniam", "Nostrud", "Aute", "Irure", "Reprehen", "Voluptate", "Cillum", "Pariatur", "Excepteur", "Cupidatat", ]; type ClientListProps = { logos?: string[]; columns?: number; interval?: number; }; export function ClientList({ logos = DEFAULT_LOGOS, columns = 6, interval = 2400, }: ClientListProps) { const cols = useMemo(() => bucket(logos, columns), [logos, columns]); return (

Lorem ipsum dolor sit amet

{cols.map((items, i) => ( ))}

); } function Column({ items, delay, interval, }: { items: string[]; delay: number; interval: number; }) { const [idx, setIdx] = useState(0); const intervalRef = useRef | null>(null); useEffect(() => { if (items.length < 2) return; const t = setTimeout(() => { setIdx((n) => (n + 1) % items.length); intervalRef.current = setInterval(() => { setIdx((n) => (n + 1) % items.length); }, interval); }, delay); return () => { clearTimeout(t); if (intervalRef.current) clearInterval(intervalRef.current); }; }, [items.length, interval, delay]); return (

{items.map((label, i) => ( {label.toUpperCase()} ))}

); } function bucket(arr: T[], count: number): T[][] { const result: T[][] = Array.from({ length: count }, () => []); arr.forEach((item, i) => result[i % count].push(item)); return result; }

Client List

Install from registry

Installed files