Pierwszy wrzut promptstory

2026-02-15 13:22:48 +01:00
commit 27a3c6024f
27 changed files with 2833 additions and 0 deletions
--- a/components/StepWaypoints.tsx
+++ b/components/StepWaypoints.tsx
@@ -0,0 +1,107 @@
+import React from 'react';
+import { WizardState, Waypoint } from '../types';
+import { Plus, Trash2, MapPin } from 'lucide-react';
+
+interface StepWaypointsProps {
+  data: WizardState;
+  updateData: (updates: Partial<WizardState>) => void;
+}
+
+const StepWaypoints: React.FC<StepWaypointsProps> = ({ data, updateData }) => {
+  
+  const addWaypoint = () => {
+    if (data.waypoints.length >= 10) return;
+    const newWaypoint: Waypoint = {
+      id: crypto.randomUUID(),
+      header: '',
+      context: ''
+    };
+    updateData({ waypoints: [...data.waypoints, newWaypoint] });
+  };
+
+  const removeWaypoint = (id: string) => {
+    if (data.waypoints.length <= 1) return; // Keep at least one
+    updateData({ waypoints: data.waypoints.filter(wp => wp.id !== id) });
+  };
+
+  const updateWaypoint = (id: string, field: keyof Waypoint, value: string) => {
+    const updatedWaypoints = data.waypoints.map(wp => 
+      wp.id === id ? { ...wp, [field]: value } : wp
+    );
+    updateData({ waypoints: updatedWaypoints });
+  };
+
+  return (
+    <div className="space-y-10 animate-fade-in">
+      <div className="flex justify-between items-center">
+        <div>
+          <h2 className="text-3xl font-bold tracking-tight text-gray-900 mb-3">Opisz Kluczowe Momenty</h2>
+          <p className="text-gray-500 text-lg">Gdzie nastąpił przełom? Co czułeś?</p>
+        </div>
+        <div className="text-sm font-bold bg-gray-100 px-4 py-2 rounded-md text-gray-600">
+          {data.waypoints.length} / 10
+        </div>
+      </div>
+
+      <div className="space-y-6">
+        {data.waypoints.map((wp, index) => (
+          <div key={wp.id} className="group relative bg-white border border-gray-200 rounded-md p-6 hover:border-[#EA4420]/30 transition-all">
+            <div className="flex gap-5">
+              <div className="mt-2 text-[#EA4420]">
+                <MapPin size={28} strokeWidth={1.5} />
+              </div>
+              <div className="flex-1 space-y-4">
+                 <div>
+                    <label className="block text-xs font-bold text-gray-400 mb-1 uppercase tracking-wider">
+                      Moment {index + 1} - Nagłówek
+                    </label>
+                    <input
+                      type="text"
+                      value={wp.header}
+                      onChange={(e) => updateWaypoint(wp.id, 'header', e.target.value)}
+                      placeholder="np. 10km - Ściana"
+                      className="w-full border-b border-gray-200 pb-2 focus:border-[#EA4420] focus:outline-none text-gray-900 font-bold text-lg placeholder-gray-300 bg-transparent transition-colors"
+                    />
+                 </div>
+                 <div>
+                    <label className="block text-xs font-bold text-gray-400 mb-1 uppercase tracking-wider">
+                      Kontekst / Emocje
+                    </label>
+                    <textarea
+                      value={wp.context}
+                      onChange={(e) => updateWaypoint(wp.id, 'context', e.target.value)}
+                      placeholder="Co się działo w głowie? Walka ze sobą czy euforia?"
+                      rows={2}
+                      className="w-full border border-gray-200 rounded-md p-3 text-base text-gray-700 focus:ring-1 focus:ring-[#EA4420] focus:border-[#EA4420] outline-none resize-none placeholder-gray-300 bg-gray-50/50"
+                    />
+                 </div>
+              </div>
+              
+              {data.waypoints.length > 1 && (
+                <button 
+                  onClick={() => removeWaypoint(wp.id)}
+                  className="opacity-0 group-hover:opacity-100 transition-opacity self-start p-2 text-gray-400 hover:text-[#EA4420] hover:bg-red-50 rounded-md"
+                  title="Usuń punkt"
+                >
+                  <Trash2 size={20} />
+                </button>
+              )}
+            </div>
+          </div>
+        ))}
+      </div>
+
+      {data.waypoints.length < 10 && (
+        <button
+          onClick={addWaypoint}
+          className="w-full py-5 border border-dashed border-gray-300 rounded-md text-gray-500 hover:border-[#EA4420] hover:text-[#EA4420] hover:bg-[#EA4420]/5 transition-all flex items-center justify-center space-x-2 group"
+        >
+          <Plus size={20} className="group-hover:scale-110 transition-transform" />
+          <span className="font-semibold">Dodaj kolejny punkt</span>
+        </button>
+      )}
+    </div>
+  );
+};
+
+export default StepWaypoints;