107 lines
4.4 KiB
TypeScript
107 lines
4.4 KiB
TypeScript
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; |