Function ModelRow

apps/sim/app/(landing)/models/components/model-directory.tsx:227–256

({ provider, model }: { provider: CatalogProvider; model: CatalogModel })

}

function ModelRow({ provider, model }: { provider: CatalogProvider; model: CatalogModel }) {
  return (
    <>
      <div className='h-px w-full bg-[var(--border)]' />
      <Link
        href={model.href}
        className='group/link flex items-center gap-4 px-6 py-4 transition-colors hover:bg-[var(--surface-hover)]'
      >
        <ProviderIcon
          provider={provider}
          className='size-8 shrink-0 rounded-xl'
          iconClassName='size-4'
        />

        <div className='flex min-w-0 flex-1 flex-col gap-0.5'>
          <h4 className='text-[14px] text-[var(--text-primary)] leading-snug tracking-[-0.02em]'>
            {model.displayName}
          </h4>
          <p className='line-clamp-1 hidden text-[12px] text-[var(--text-muted)] leading-[150%] sm:block'>
            {model.id} &middot; Input {formatPrice(model.pricing.input)}/1M &middot; Output{' '}
            {formatPrice(model.pricing.output)}/1M
            {model.contextWindow ? ` · ${formatTokenCount(model.contextWindow)} context` : ''}
          </p>
        </div>

        <ChevronArrow />
      </Link>
    </>
  )
}