renderLogoCarousel function

Component renderLogoCarousel(LogoCarouselProps props)

Renders a Codex infinite scrolling logo carousel.

Implementation

Component renderLogoCarousel(LogoCarouselProps props) {
  final String animationName =
      props.reverse ? 'arcane-scroll-reverse' : 'arcane-scroll';

  return dom.div(
    classes: 'codex-logo-carousel',
    styles: const dom.Styles(raw: {
      'display': 'flex',
      'flex-direction': 'column',
      'gap': '2rem',
      'width': '100%',
      'overflow': 'hidden',
    }),
    [
      // Optional title
      if (props.title != null)
        dom.div(
          classes: 'codex-logo-carousel-title',
          styles: const dom.Styles(raw: {
            'text-align': 'center',
            'font-size': 'var(--font-size-sm)',
            'font-weight': 'var(--font-weight-medium)',
            'color': 'var(--muted-foreground)',
            'text-transform': 'uppercase',
            'letter-spacing': '0.05em',
          }),
          [Component.text(props.title!)],
        ),

      // Carousel track
      dom.div(
        classes:
            'codex-logo-carousel-track ${props.pauseOnHover ? 'pause-on-hover' : ''}',
        styles: dom.Styles(raw: {
          'display': 'flex',
          'width': 'max-content',
          'animation': '$animationName ${props.duration}s linear infinite',
        }),
        [
          // First set of logos
          _buildLogoSet(props),
          // Duplicate set for seamless loop
          _buildLogoSet(props),
        ],
      ),
    ],
  );
}