soufiane
6020dc7b93
- Create TicketPrizeDisplay component for prize icon rendering - Create TicketTableRow component for reusable ticket table rows - Refactor client/page.tsx and historique/page.tsx to use shared components - Reduces code duplication from 3.07% to 2.8% 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
64 lines
2.4 KiB
TypeScript
64 lines
2.4 KiB
TypeScript
'use client';
|
|
|
|
import React from 'react';
|
|
import { PRIZE_CONFIG } from '@/utils/constants';
|
|
|
|
interface TicketPrizeDisplayProps {
|
|
prizeType: string;
|
|
className?: string;
|
|
}
|
|
|
|
const PRIZE_ICONS: Record<string, React.ReactNode> = {
|
|
INFUSEUR: (
|
|
<svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
|
|
<path d="M20 3H4v10c0 2.21 1.79 4 4 4h6c2.21 0 4-1.79 4-4v-3h2c1.11 0 2-.9 2-2V5c0-1.11-.89-2-2-2zm0 5h-2V5h2v3zM4 19h16v2H4z"/>
|
|
</svg>
|
|
),
|
|
THE_SIGNATURE: (
|
|
<svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
|
|
<path d="M20 3H4v10c0 2.21 1.79 4 4 4h6c2.21 0 4-1.79 4-4v-3h2c1.11 0 2-.9 2-2V5c0-1.11-.89-2-2-2zm0 5h-2V5h2v3z"/>
|
|
</svg>
|
|
),
|
|
COFFRET_DECOUVERTE: (
|
|
<svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
|
|
<path d="M20 6h-2.18c.11-.31.18-.65.18-1 0-1.66-1.34-3-3-3-1.05 0-1.96.54-2.5 1.35l-.5.67-.5-.68C10.96 2.54 10.05 2 9 2 7.34 2 6 3.34 6 5c0 .35.07.69.18 1H4c-1.11 0-1.99.89-1.99 2L2 19c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V8c0-1.11-.89-2-2-2zm-5-2c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zM9 4c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm11 15H4v-2h16v2zm0-5H4V8h5.08L7 10.83 8.62 12 11 8.76l1-1.36 1 1.36L15.38 12 17 10.83 14.92 8H20v6z"/>
|
|
</svg>
|
|
),
|
|
COFFRET_PRESTIGE: (
|
|
<svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
|
|
<path d="M12 2L4 5v6.09c0 5.05 3.41 9.76 8 10.91 4.59-1.15 8-5.86 8-10.91V5l-8-3zm6 9.09c0 4-2.55 7.7-6 8.83-3.45-1.13-6-4.82-6-8.83v-4.7l6-2.25 6 2.25v4.7zM8 10.5l1.5 1.5L15 6.5 13.5 5z"/>
|
|
</svg>
|
|
),
|
|
THE_GRATUIT: (
|
|
<svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
|
|
<path d="M20 3H4v10c0 2.21 1.79 4 4 4h6c2.21 0 4-1.79 4-4v-3h2c1.11 0 2-.9 2-2V5c0-1.11-.89-2-2-2zm0 5h-2V5h2v3zM4 19h16v2H4z"/>
|
|
</svg>
|
|
),
|
|
};
|
|
|
|
export const TicketPrizeDisplay: React.FC<TicketPrizeDisplayProps> = ({
|
|
prizeType,
|
|
className = '',
|
|
}) => {
|
|
const prizeConfig = PRIZE_CONFIG[prizeType as keyof typeof PRIZE_CONFIG];
|
|
|
|
if (!prizeConfig) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<div className={`flex items-center gap-3 ${className}`}>
|
|
<div className={`w-10 h-10 rounded-full flex items-center justify-center ${prizeConfig.color}`}>
|
|
{PRIZE_ICONS[prizeType]}
|
|
</div>
|
|
<div>
|
|
<p className="text-sm font-medium text-[#5a5a4e]">
|
|
{prizeConfig.name}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default TicketPrizeDisplay;
|