34 lines
1.1 KiB
TypeScript
34 lines
1.1 KiB
TypeScript
import Card from '@/ui/Card';
|
|
|
|
interface BonusPointsCardProps {
|
|
bonusSummary: string[];
|
|
}
|
|
|
|
export function BonusPointsCard({ bonusSummary }: BonusPointsCardProps) {
|
|
if (!bonusSummary || bonusSummary.length === 0) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<Card>
|
|
<div className="mb-4">
|
|
<h3 className="text-lg font-semibold text-white">Bonus Points</h3>
|
|
<p className="text-sm text-gray-400 mt-1">Additional points for special achievements</p>
|
|
</div>
|
|
|
|
<div className="space-y-3">
|
|
{bonusSummary.map((bonus, idx) => (
|
|
<div
|
|
key={idx}
|
|
className="flex items-center gap-4 p-4 bg-deep-graphite rounded-lg border border-charcoal-outline transition-colors hover:border-primary-blue/30"
|
|
>
|
|
<div className="w-10 h-10 rounded-full bg-performance-green/10 border border-performance-green/20 flex items-center justify-center shrink-0">
|
|
<span className="text-performance-green text-lg font-bold">+</span>
|
|
</div>
|
|
<p className="text-sm text-gray-300 flex-1">{bonus}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</Card>
|
|
);
|
|
} |