renderLogoGrid function

Component renderLogoGrid(LogoGridProps props)

Renders a Codex static logo grid.

Implementation

Component renderLogoGrid(LogoGridProps props) {
  return dom.div(
    classes: 'codex-logo-grid',
    styles: const dom.Styles(raw: {
      'display': 'flex',
      'flex-direction': 'column',
      'gap': '2rem',
    }),
    [
      if (props.title != null)
        dom.div(
          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!)],
        ),
      dom.div(
        classes: 'codex-logo-grid-container',
        styles: dom.Styles(raw: {
          'display': 'grid',
          'grid-template-columns': 'repeat(${props.columns}, 1fr)',
          'gap': '${props.gap}px',
          'align-items': 'center',
          'justify-items': 'center',
        }),
        [
          for (final logo in props.logos)
            dom.div(
              classes: 'codex-logo-grid-item',
              styles: const dom.Styles(raw: {
                'display': 'flex',
                'align-items': 'center',
                'justify-content': 'center',
              }),
              [
                if (logo.customLogo != null)
                  logo.customLogo!
                else if (logo.imageUrl != null)
                  dom.img(
                    src: logo.imageUrl!,
                    alt: logo.name,
                    styles: dom.Styles(raw: {
                      'height': '${props.logoHeight}px',
                      'width': 'auto',
                      'object-fit': 'contain',
                      if (props.grayscale) 'filter': 'grayscale(100%)',
                      'opacity': props.grayscale ? '0.5' : '1',
                      'transition': 'all var(--arcane-transition)',
                    }),
                  )
                else
                  dom.span(
                    styles: const dom.Styles(raw: {
                      'font-size': 'var(--font-size-base)',
                      'font-weight': 'var(--font-weight-semibold)',
                      'color': 'var(--muted-foreground)',
                    }),
                    [Component.text(logo.name)],
                  ),
              ],
            ),
        ],
      ),
    ],
  );
}