| return ( | return ( | ||||
| <div | <div | ||||
| className='group relative flex flex-col justify-between px-4 py-3 h-[148px] border-[0.5px] border-black/5 rounded-xl shadow-xs hover:shadow-lg' | |||||
| className='group relative flex flex-col px-4 py-3 h-[148px] border-[0.5px] border-black/5 rounded-xl shadow-xs hover:shadow-lg' | |||||
| style={{ background: provider.background || DEFAULT_BACKGROUND_COLOR }} | style={{ background: provider.background || DEFAULT_BACKGROUND_COLOR }} | ||||
| > | > | ||||
| <div> | |||||
| <div className='grow h-0'> | |||||
| <div className='py-0.5'> | <div className='py-0.5'> | ||||
| <ProviderIcon provider={provider} /> | <ProviderIcon provider={provider} /> | ||||
| </div> | </div> | ||||
| { | { | ||||
| provider.description && ( | provider.description && ( | ||||
| <div className='mt-1 leading-4 text-xs text-black/[48]'>{provider.description[language] || provider.description.en_US}</div> | |||||
| <div | |||||
| className='mt-1 leading-4 text-xs text-black/[48] line-clamp-4' | |||||
| title={provider.description[language] || provider.description.en_US} | |||||
| > | |||||
| {provider.description[language] || provider.description.en_US} | |||||
| </div> | |||||
| ) | ) | ||||
| } | } | ||||
| </div> | </div> | ||||
| <div> | |||||
| <div className='shrink-0'> | |||||
| <div className={'flex flex-wrap group-hover:hidden gap-0.5'}> | <div className={'flex flex-wrap group-hover:hidden gap-0.5'}> | ||||
| { | { | ||||
| provider.supported_model_types.map(modelType => ( | provider.supported_model_types.map(modelType => ( |