logo-timeline

1"use client"
2 
3import type React from "react"
4import { useState } from "react"
5import { motion } from "motion/react"
6 
7import { cn } from "@/lib/utils"
8import { Icons } from "@/components/icons"
9 
10export interface LogoItem {
11  /** The label text displayed next to the icon */
12  label: string
13  /** The icon name from the Icons object (e.g., "gitHub", "react", "tailwind") */
14  icon: keyof typeof Icons
15  /** Animation delay in seconds (use negative values for staggered effect) */
16  animationDelay: number
17  /** Animation duration in seconds */
18  animationDuration: number
19  /** The row number where this logo should appear (1-based) */
20  row: number
21}
22 
23export interface LogoTimelineProps {
24  /** Array of logo items to display */
25  items: LogoItem[]
26  /** Optional title text to display in the center */
27  title?: string
28  /** Height of the timeline container */
29  height?: string
30  /** Additional className for the container */
31  className?: string
32  /** Icon size in pixels (default: 16) */
33  iconSize?: number
34  /** Whether to show separator lines between rows (default: true) */
35  showRowSeparator?: boolean
36  /** Whether to animate logos only on hover (default: false) */
37  animateOnHover?: boolean
38}
39 
40export function LogoTimeline({
41  items,
42  title,
43  height = "h-[400px] sm:h-[800px]",
44  className,
45  iconSize = 16,
46  showRowSeparator = true,
47  animateOnHover = false,
48}: LogoTimelineProps) {
49  const [isHovered, setIsHovered] = useState(false)
50 
51  // Group items by row
52  const rowsMap = new Map<number, LogoItem[]>()
53  items.forEach((item) => {
54    if (!rowsMap.has(item.row)) {
55      rowsMap.set(item.row, [])
56    }
57    rowsMap.get(item.row)?.push(item)
58  })
59 
60  // Convert map to sorted array
61  const rows = Array.from(rowsMap.entries())
62    .sort(([a], [b]) => a - b)
63    .map(([, rowItems]) => rowItems)
64 
65  // Determine animation play state
66  const animationPlayState = animateOnHover
67    ? isHovered
68      ? "running"
69      : "paused"
70    : "running"
71 
72  const getIconComponent = (iconName: keyof typeof Icons) => {
73    const Icon = Icons[iconName]
74    if (!Icon) {
75      return null
76    }
77    return (
78      <Icon
79        className="shrink-0"
80        style={{ width: iconSize, height: iconSize }}
81        aria-hidden="true"
82      />
83    )
84  }
85 
86  return (
87    <section className={cn("w-full", height, className)}>
88      <motion.div
89        aria-hidden="true"
90        className="bg-background relative h-full w-full overflow-hidden py-24 ring-inset sm:py-32"
91// … truncated