43 lines
1.3 KiB
TypeScript
43 lines
1.3 KiB
TypeScript
import Image from 'next/image'
|
|
import ModelInfoItem from '../ModelInfoItem'
|
|
import React from 'react'
|
|
|
|
type Props = {
|
|
modelName: string
|
|
inferenceTime: string
|
|
hardware: string
|
|
pricing: string
|
|
}
|
|
|
|
const ModelInfo: React.FC<Props> = ({
|
|
modelName,
|
|
inferenceTime,
|
|
hardware,
|
|
pricing,
|
|
}) => (
|
|
<div className="flex flex-col gap-3 rounded-lg border border-gray-200 p-3">
|
|
<h2 className="text-sm font-semibold text-gray-900 dark:text-white">
|
|
{modelName} is available via Jan API
|
|
</h2>
|
|
<div className="flex items-start gap-4">
|
|
<ModelInfoItem description={inferenceTime} name="Inference Time" />
|
|
<ModelInfoItem description={hardware} name="Hardware" />
|
|
</div>
|
|
<hr />
|
|
<div className="flex items-center justify-between ">
|
|
<div className="flex flex-col">
|
|
<h2 className="text-xl font-semibold tracking-[-0.4px]">{pricing}</h2>
|
|
<span className="text-xs leading-[18px] text-[#6B7280]">
|
|
Average Cost / Call
|
|
</span>
|
|
</div>
|
|
<button className="flex items-center gap-2 rounded-lg bg-[#1F2A37] px-3 py-2">
|
|
<Image src={'icons/code.svg'} width={16} height={17} alt="" />
|
|
<span className="text-sm font-medium text-white">Get API Key</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)
|
|
|
|
export default React.memo(ModelInfo)
|