42 lines
1.4 KiB
TypeScript
42 lines
1.4 KiB
TypeScript
'use client';
|
|
|
|
import { cleanImageUrl, getRarityColor, getRarityLabel, type Reward } from '../lib/rewards';
|
|
|
|
interface RewardCardProps {
|
|
reward: Reward;
|
|
showValue?: boolean;
|
|
className?: string;
|
|
}
|
|
|
|
export default function RewardCard({ reward, showValue = true, className = '' }: RewardCardProps) {
|
|
return (
|
|
<div className={`bg-background/50 rounded-xl p-6 ${className}`}>
|
|
{reward.image && (
|
|
<div className="mb-4">
|
|
<img
|
|
src={cleanImageUrl(reward.image)}
|
|
alt={reward.name}
|
|
className="w-24 h-24 object-contain mx-auto rounded-lg"
|
|
onError={(e) => {
|
|
// Fallback to emoji if image fails to load
|
|
e.currentTarget.style.display = 'none';
|
|
e.currentTarget.nextElementSibling?.classList.remove('hidden');
|
|
}}
|
|
/>
|
|
<div className="text-4xl mb-4 hidden">🎯</div>
|
|
</div>
|
|
)}
|
|
<h3 className="text-xl font-semibold mb-2 text-center">{reward.name}</h3>
|
|
<div className="flex items-center justify-center gap-2 mb-4">
|
|
<span className={`px-3 py-1 rounded-full text-xs font-medium ${getRarityColor(reward.price)}`}>
|
|
{getRarityLabel(reward.price)}
|
|
</span>
|
|
</div>
|
|
{showValue && (
|
|
<p className="text-foreground/60 text-sm text-center">
|
|
Value: ${reward.price}
|
|
</p>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|