"use client" import type React from "react" import { useState } from "react" import { motion } from "motion/react" import { cn } from "@/lib/utils" import { Icons } from "@/components/icons" export interface LogoItem { /** The label text displayed next to the icon */ label: string /** The icon name from the Icons object (e.g., "gitHub", "react", "tailwind") */ icon: keyof typeof Icons /** Animation delay in seconds (use negative values for staggered effect) */ animationDelay: number /** Animation duration in seconds */ animationDuration: number /** The row number where this logo should appear (1-based) */ row: number } export interface LogoTimelineProps { /** Array of logo items to display */ items: LogoItem[] /** Optional title text to display in the center */ title?: string /** Height of the timeline container */ height?: string /** Additional className for the container */ className?: string /** Icon size in pixels (default: 16) */ iconSize?: number /** Whether to show separator lines between rows (default: true) */ showRowSeparator?: boolean /** Whether to animate logos only on hover (default: false) */ animateOnHover?: boolean } export function LogoTimeline({ items, title, height = "h-[400px] sm:h-[800px]", className, iconSize = 16, showRowSeparator = true, animateOnHover = false, }: LogoTimelineProps) { const [isHovered, setIsHovered] = useState(false) // Group items by row const rowsMap = new Map() items.forEach((item) => { if (!rowsMap.has(item.row)) { rowsMap.set(item.row, []) } rowsMap.get(item.row)?.push(item) }) // Convert map to sorted array const rows = Array.from(rowsMap.entries()) .sort(([a], [b]) => a - b) .map(([, rowItems]) => rowItems) // Determine animation play state const animationPlayState = animateOnHover ? isHovered ? "running" : "paused" : "running" const getIconComponent = (iconName: keyof typeof Icons) => { const Icon = Icons[iconName] if (!Icon) { return null } return ( ) } return (

animateOnHover && setIsHovered(true)} onMouseLeave={() => animateOnHover && setIsHovered(false)} > {title && (

{title}

)}

{rows.map((rowItems, index) => (

{showRowSeparator && (

)} {rowItems.map((logo) => { const IconComponent = getIconComponent(logo.icon) if (!IconComponent) { return null } return (

{IconComponent} {logo.label}

) })}

))}

) }

logo-timeline

Instalação

Dependências

Registry dependencies