36 lines
1.4 KiB
TypeScript
36 lines
1.4 KiB
TypeScript
import { Brain } from 'lucide-react'
|
|
import PaginatedCardList from '@/components/ui/PaginatedCardList'
|
|
import type { FavoriteModel } from '../types'
|
|
|
|
interface FavoriteModelsProps {
|
|
models: FavoriteModel[]
|
|
}
|
|
|
|
export default function FavoriteModels({ models }: FavoriteModelsProps) {
|
|
return (
|
|
<PaginatedCardList
|
|
items={models}
|
|
title="Favorite Models"
|
|
icon={<Brain size={24} />}
|
|
subtitle="Based on personal preference"
|
|
itemsPerPage={5}
|
|
getItemKey={(model) => model.name}
|
|
renderItem={(model) => (
|
|
<div className="p-3 sm:p-4 bg-gray-800/50 rounded-lg">
|
|
<div className="flex justify-between items-start gap-2 mb-2">
|
|
<div className="min-w-0 flex-1">
|
|
<h3 className="font-semibold text-sm sm:text-base text-gray-200 truncate">{model.name}</h3>
|
|
<p className="text-xs sm:text-sm text-gray-400">{model.provider}</p>
|
|
</div>
|
|
<div className="flex items-center gap-1 px-2 sm:px-3 py-0.5 sm:py-1 bg-yellow-400/10 border border-yellow-400/20 rounded-md flex-shrink-0">
|
|
<span className="text-base sm:text-lg font-bold text-yellow-400">
|
|
{model.rating.toFixed(1)}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<p className="text-xs sm:text-sm text-gray-300 leading-relaxed">{model.review}</p>
|
|
</div>
|
|
)}
|
|
/>
|
|
)
|
|
}
|