37 lines
1.1 KiB
TypeScript
37 lines
1.1 KiB
TypeScript
import type { ReactNode } from 'react';
|
|
|
|
export function ModelCatalogCard(props: {
|
|
actions?: ReactNode;
|
|
badges?: ReactNode[];
|
|
chips?: string[];
|
|
iconPath?: string;
|
|
iconText: string;
|
|
meta?: string[];
|
|
subtitle: string;
|
|
title: string;
|
|
}) {
|
|
return (
|
|
<article className="baseModelCard">
|
|
<div className="providerCatalogLogo">
|
|
{props.iconPath ? <img src={props.iconPath} alt="" /> : props.iconText.slice(0, 2).toUpperCase()}
|
|
</div>
|
|
<div className="baseModelCardBody">
|
|
<div>
|
|
<strong>{props.title}</strong>
|
|
<span>{props.subtitle}</span>
|
|
</div>
|
|
<div className="providerCatalogMeta">
|
|
{props.badges?.map((badge, index) => <span key={`badge-${index}`}>{badge}</span>)}
|
|
{props.meta?.map((item) => <span key={item}>{item}</span>)}
|
|
</div>
|
|
{!!props.chips?.length && (
|
|
<div className="modelAbilityChips">
|
|
{props.chips.map((item) => <span key={item}>{item}</span>)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
{props.actions && <div className="providerCatalogActions">{props.actions}</div>}
|
|
</article>
|
|
);
|
|
}
|