51 lines
2 KiB
TypeScript
51 lines
2 KiB
TypeScript
import { TbTool } from 'react-icons/tb'
|
|
import PaginatedCardList from '@/components/ui/PaginatedCardList'
|
|
import type { AIReview } from '../types'
|
|
|
|
interface FavoriteToolsProps {
|
|
reviews: AIReview[]
|
|
}
|
|
|
|
export default function FavoriteTools({ reviews }: FavoriteToolsProps) {
|
|
return (
|
|
<PaginatedCardList
|
|
items={reviews}
|
|
title="Favorite Tools"
|
|
icon={<TbTool size={24} />}
|
|
subtitle="Based on personal preference"
|
|
itemsPerPage={3}
|
|
getItemKey={(review) => review.tool}
|
|
renderItem={(review) => (
|
|
<div className="p-3 sm:p-4 bg-gray-800/50 rounded-lg">
|
|
<div className="flex justify-between items-center gap-2 mb-2 sm:mb-3">
|
|
<h3 className="font-semibold text-sm sm:text-base text-gray-200 truncate flex-1">{review.tool}</h3>
|
|
<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">
|
|
{review.rating.toFixed(1)}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div className="grid grid-cols-2 gap-2 mb-2 text-xs sm:text-sm">
|
|
<div>
|
|
<p className="text-green-400 font-medium mb-1 text-xs sm:text-sm">Pros:</p>
|
|
<ul className="text-gray-300 space-y-0.5 sm:space-y-1">
|
|
{review.pros.map((pro, i) => (
|
|
<li key={i} className="text-xs leading-tight">• {pro}</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
<div>
|
|
<p className="text-red-400 font-medium mb-1 text-xs sm:text-sm">Cons:</p>
|
|
<ul className="text-gray-300 space-y-0.5 sm:space-y-1">
|
|
{review.cons.map((con, i) => (
|
|
<li key={i} className="text-xs leading-tight">• {con}</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<p className="text-xs sm:text-sm text-blue-400 font-medium">{review.verdict}</p>
|
|
</div>
|
|
)}
|
|
/>
|
|
)
|
|
}
|