soufiane
bb7148b26a
- Corriger les erreurs de contraste (text-primary-300 → text-primary-600) - Corriger la hiérarchie des titres (h3 → h2 pour GamePeriod et GrandPrize) - Supprimer les alt redondants sur les images décoratives (PrizeCard) - Ajouter aria-hidden sur les images décoratives - Ajouter aria-label descriptif sur le lien logo du Header - Utiliser les balises <time> pour les dates sémantiques - Convertir les textes importants en titres appropriés (h3, h4) - Mettre à jour les tests PrizeCard 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
69 lines
1.7 KiB
TypeScript
69 lines
1.7 KiB
TypeScript
'use client';
|
|
|
|
import React from 'react';
|
|
import Image from 'next/image';
|
|
import { cn } from '@/utils/helpers';
|
|
|
|
interface PrizeCardProps {
|
|
imageSrc: string;
|
|
imageAlt?: string;
|
|
badge: string;
|
|
title: string;
|
|
description: string;
|
|
isGrandPrix?: boolean;
|
|
className?: string;
|
|
}
|
|
|
|
export const PrizeCard: React.FC<PrizeCardProps> = ({
|
|
imageSrc,
|
|
badge,
|
|
title,
|
|
description,
|
|
isGrandPrix = false,
|
|
className,
|
|
}) => {
|
|
return (
|
|
<div
|
|
className={cn(
|
|
'bg-white rounded-xl shadow-md hover:shadow-xl transition-shadow overflow-hidden h-full flex flex-col',
|
|
isGrandPrix ? 'border-2 border-primary-500' : 'border border-beige-300',
|
|
className
|
|
)}
|
|
>
|
|
<div
|
|
className={cn(
|
|
'aspect-square flex items-center justify-center p-2',
|
|
isGrandPrix
|
|
? 'bg-gradient-to-br from-primary-50 to-primary-100'
|
|
: 'bg-gradient-to-br from-beige-50 to-beige-100'
|
|
)}
|
|
aria-hidden="true"
|
|
>
|
|
<Image
|
|
src={imageSrc}
|
|
alt=""
|
|
width={400}
|
|
height={400}
|
|
className="w-full h-full object-contain object-center"
|
|
/>
|
|
</div>
|
|
<div className="p-6">
|
|
<div
|
|
className={cn(
|
|
'inline-block text-sm font-bold px-3 py-1 rounded-full mb-3',
|
|
isGrandPrix
|
|
? 'bg-gradient-to-r from-primary-500 to-primary-600 text-white shadow-md'
|
|
: 'bg-gradient-to-r from-primary-100 to-primary-200 text-primary-600'
|
|
)}
|
|
>
|
|
{badge}
|
|
</div>
|
|
<h3 className="text-xl font-bold text-gray-800 mb-2">{title}</h3>
|
|
<p className="text-gray-600 text-sm mb-4">{description}</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default PrizeCard;
|