aidan/aidxnCC
1
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat (v1.0.0): initial refactor and redesign

Browse source
This commit is contained in:
Aidan 2025-10-09 04:12:05 -04:00
parent 3058aa1ab4
commit fe9b50b30e
134 changed files with 17792 additions and 3670 deletions
Download patch file Download diff file Expand all files Collapse all files

54
app/ai/components/FavoriteModels.tsx
View file

@ -1,4 +1,5 @@
import { Brain, Star } from 'lucide-react'
import { Brain } from 'lucide-react'
import PaginatedCardList from '@/components/ui/PaginatedCardList'
import type { FavoriteModel } from '../types'
interface FavoriteModelsProps {
@ -7,36 +8,29 @@ interface FavoriteModelsProps {
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">
<div className="flex flex-row justify-between">
<h2 className="text-2xl font-semibold mb-6 text-gray-200 flex items-center gap-2">
<Brain size={24} />
Favorite Models
</h2>
<p className="text-muted-foreground italic text-sm">Based on personal preference</p>
</div>
<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>
<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>
<p className="text-sm text-gray-300">{model.review}</p>
</div>
))}
</div>
</section>
<p className="text-xs sm:text-sm text-gray-300 leading-relaxed">{model.review}</p>
</div>
)}
/>
)
}