Pierwszy wrzut promptstory

2026-02-15 13:22:48 +01:00
commit 27a3c6024f
27 changed files with 2833 additions and 0 deletions
--- a/components/StepEventType.tsx
+++ b/components/StepEventType.tsx
@@ -0,0 +1,56 @@
+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;