56 lines
2.3 KiB
TypeScript
56 lines
2.3 KiB
TypeScript
import React from 'react';
|
|
import { WizardState, EventType } from '../types';
|
|
import { Trophy, Tent, Ticket, PartyPopper, Briefcase, Sparkles } from 'lucide-react';
|
|
|
|
interface StepEventTypeProps {
|
|
data: WizardState;
|
|
updateData: (updates: Partial<WizardState>) => void;
|
|
nextStep: () => void;
|
|
}
|
|
|
|
const StepEventType: React.FC<StepEventTypeProps> = ({ data, updateData, nextStep }) => {
|
|
|
|
const handleSelect = (eventType: EventType) => {
|
|
updateData({ eventType });
|
|
setTimeout(nextStep, 150);
|
|
};
|
|
|
|
const types: { id: EventType; label: string; icon: React.ReactNode }[] = [
|
|
{ id: 'sport', label: 'Wydarzenie Sportowe', icon: <Trophy size={32} /> },
|
|
{ id: 'culture', label: 'Wydarzenie Kulturalne', icon: <Ticket size={32} /> },
|
|
{ id: 'trip', label: 'Wycieczka / Podróż', icon: <Tent size={32} /> },
|
|
{ id: 'party', label: 'Impreza', icon: <PartyPopper size={32} /> },
|
|
{ id: 'work', label: 'Praca / Konferencja', icon: <Briefcase size={32} /> },
|
|
{ id: 'other', label: 'Inne', icon: <Sparkles size={32} /> },
|
|
];
|
|
|
|
return (
|
|
<div className="space-y-8 animate-fade-in">
|
|
<div>
|
|
<h2 className="text-3xl font-bold tracking-tight text-gray-900 mb-3">Rodzaj Wydarzenia</h2>
|
|
<p className="text-gray-500 mb-8 text-lg">Czego dotyczy Twoja relacja?</p>
|
|
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
|
|
{types.map((type) => (
|
|
<button
|
|
key={type.id}
|
|
onClick={() => handleSelect(type.id)}
|
|
className={`flex flex-col items-center justify-center p-6 rounded-md border text-center transition-all duration-200 group h-40 ${
|
|
data.eventType === type.id
|
|
? 'border-[#EA4420] bg-[#EA4420]/5 text-[#EA4420]'
|
|
: 'border-gray-200 hover:border-[#EA4420] hover:shadow-md text-gray-600 bg-white'
|
|
}`}
|
|
>
|
|
<div className={`mb-4 transition-colors ${data.eventType === type.id ? 'text-[#EA4420]' : 'text-gray-400 group-hover:text-[#EA4420]'}`}>
|
|
{type.icon}
|
|
</div>
|
|
<span className="font-bold text-sm leading-tight">{type.label}</span>
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default StepEventType; |