logo-cloud-04

1"use client"
2 
3import { useCallback, useEffect, useMemo, useRef, useState } from "react"
4 
5import { cn } from "@/lib/utils"
6 
7import { AnimatedLogoColumn, type Logo } from "./animated-logo-column"
8 
9const LOGOS: Logo[] = [
10  {
11    id: 1,
12    name: "Google",
13    src: "https://pub-b3533f2e1c954842824758490b95c9d5.r2.dev/Google.svg",
14  },
15  {
16    id: 2,
17    name: "GitHub",
18    src: "https://pub-b3533f2e1c954842824758490b95c9d5.r2.dev/GitHub.svg",
19  },
20  {
21    id: 3,
22    name: "Amazon",
23    src: "https://pub-b3533f2e1c954842824758490b95c9d5.r2.dev/Amazon.svg",
24  },
25  {
26    id: 4,
27    name: "Netflix",
28    src: "https://pub-b3533f2e1c954842824758490b95c9d5.r2.dev/Netflix.svg",
29  },
30  {
31    id: 5,
32    name: "YouTube",
33    src: "https://pub-b3533f2e1c954842824758490b95c9d5.r2.dev/YouTube.svg",
34  },
35  {
36    id: 6,
37    name: "Instagram",
38    src: "https://pub-b3533f2e1c954842824758490b95c9d5.r2.dev/Instagram.svg",
39  },
40]
41 
42const TICK_MS = 100
43 
44/**
45 * Deterministic distribution (no Math.random) so server and client
46 * render the same columns and hydration matches.
47 */
48function distributeLogos(logos: Logo[], columnCount: number): Logo[][] {
49  const result: Logo[][] = Array.from({ length: columnCount }, () => [])
50 
51  logos.forEach((logo, index) => {
52    result[index % columnCount].push(logo)
53  })
54 
55  const maxLength = Math.max(...result.map((col) => col.length))
56  result.forEach((col, colIndex) => {
57    while (col.length < maxLength) {
58      col.push(logos[(col.length * columnCount + colIndex) % logos.length])
59    }
60  })
61 
62  return result
63}
64 
65export type LogoCarouselVariant = "default" | "compact"
66 
67interface LogoCarouselProps {
68  columns?: number
69  logos?: Logo[]
70  variant?: LogoCarouselVariant
71  className?: string
72}
73 
74export function LogoCarousel({
75  columns = 4,
76  logos: logosProp,
77  variant = "default",
78  className,
79}: LogoCarouselProps) {
80  const logos = useMemo(() => logosProp ?? LOGOS, [logosProp])
81  const distribute = useCallback(
82    (count: number) => distributeLogos(logos, count),
83    [logos]
84  )
85 
86  const [logoColumns, setLogoColumns] = useState<Logo[][]>(() =>
87    distributeLogos(logos, columns)
88  )
89  const [time, setTime] = useState(0)
90  const prevColumnsRef = useRef(columns)
91 
92  useEffect(() => {
93    if (prevColumnsRef.current !== columns) {
94      prevColumnsRef.current = columns
95      setLogoColumns(distribute(columns))
96    }
97  }, [columns, distribute])
98 
99  useEffect(() => {
100    const interval = setInterval(() => {
101      setTime((prev) => prev + TICK_MS)
102// … truncated