99 lines
2.9 KiB
TypeScript
99 lines
2.9 KiB
TypeScript
import { useState } from 'react'
|
|
|
|
import { Model } from '@janhq/core'
|
|
import { Badge } from '@janhq/uikit'
|
|
|
|
import { twMerge } from 'tailwind-merge'
|
|
|
|
import ExploreModelItemHeader from '@/screens/ExploreModels/ExploreModelItemHeader'
|
|
|
|
type Props = {
|
|
model: Model
|
|
}
|
|
|
|
const ExploreModelItem: React.FC<Props> = ({ model }) => {
|
|
const [open, setOpen] = useState('')
|
|
|
|
const handleToggle = () => {
|
|
if (open === model.id) {
|
|
setOpen('')
|
|
} else {
|
|
setOpen(model.id)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="mb-6 flex flex-col overflow-hidden rounded-xl border border-border bg-background/60">
|
|
<ExploreModelItemHeader
|
|
model={model}
|
|
onClick={handleToggle}
|
|
open={open}
|
|
/>
|
|
{open === model.id && (
|
|
<div className="flex">
|
|
<div className="flex w-full flex-col border-t border-border p-4 ">
|
|
<div className="mb-6 flex flex-col gap-1">
|
|
<span className="font-semibold">About</span>
|
|
<p className="text-muted-foreground">
|
|
{model.description || '-'}
|
|
</p>
|
|
</div>
|
|
<div className="flex space-x-10">
|
|
<div>
|
|
<span className="font-semibold text-muted-foreground">
|
|
Author
|
|
</span>
|
|
<p className="mt-2 line-clamp-1 font-medium">
|
|
{model.metadata.author}
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<span className="mb-1 font-semibold text-muted-foreground">
|
|
Model ID
|
|
</span>
|
|
<p className="mt-2 line-clamp-1 font-medium">{model.id}</p>
|
|
</div>
|
|
<div>
|
|
<span className="mb-1 font-semibold text-muted-foreground">
|
|
Tags
|
|
</span>
|
|
<div className="mt-2 flex flex-wrap gap-x-1 gap-y-1">
|
|
{model.metadata.tags.map((tag: string) => (
|
|
<Badge
|
|
key={tag}
|
|
themes="primary"
|
|
className="line-clamp-1"
|
|
title={tag}
|
|
>
|
|
{tag}
|
|
</Badge>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="w-48 flex-shrink-0 border-l border-t border-border p-4">
|
|
<div>
|
|
<span className="font-semibold text-muted-foreground">
|
|
Format
|
|
</span>
|
|
<p
|
|
className={twMerge(
|
|
'mt-2 font-medium',
|
|
!model.format?.includes(' ') &&
|
|
!model.format?.includes('-') &&
|
|
'uppercase'
|
|
)}
|
|
>
|
|
{model.format}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default ExploreModelItem
|