Aidan
dee931f3a8
p-4 will now be the default for small screens (mobile devices), and p-8 for sm+ sized devices. this does not apply everywhere, like in the TopPick.tsx component
39 lines
1.4 KiB
TypeScript
39 lines
1.4 KiB
TypeScript
import { Star } from 'lucide-react'
|
|
import type { FavoriteModel } from '../types'
|
|
|
|
interface FavoriteModelsProps {
|
|
models: FavoriteModel[]
|
|
}
|
|
|
|
export default function FavoriteModels({ models }: FavoriteModelsProps) {
|
|
return (
|
|
<section className="p-4 sm:p-8 border-2 border-gray-700 rounded-lg hover:border-gray-600 transition-colors duration-300">
|
|
<h2 className="text-2xl font-semibold mb-6 text-gray-200 flex items-center gap-2">
|
|
<Star size={24} />
|
|
Favorite Models
|
|
</h2>
|
|
<div className="space-y-4">
|
|
{models.map((model, index) => (
|
|
<div key={index} className="p-4 bg-gray-800/50 rounded-lg">
|
|
<div className="flex justify-between items-start mb-2">
|
|
<div>
|
|
<h3 className="font-semibold text-gray-200">{model.name}</h3>
|
|
<p className="text-sm text-gray-400">{model.provider}</p>
|
|
</div>
|
|
<div className="flex gap-1">
|
|
{[...Array(5)].map((_, i) => (
|
|
<Star
|
|
key={i}
|
|
size={14}
|
|
className={i < model.rating ? 'fill-yellow-400 text-yellow-400' : 'text-gray-600'}
|
|
/>
|
|
))}
|
|
</div>
|
|
</div>
|
|
<p className="text-sm text-gray-300">{model.review}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|