Sprzątanie projektu - dodanie podglądu gpx - dodanie obsługi logo i avatara - dodanie editable config do prostej edycji tekstów na stronie

This commit is contained in:
Arek Bykowski
2026-02-15 18:43:34 +01:00
parent 78a34498d0
commit 981ce1d1b2
13 changed files with 459 additions and 386 deletions

View File

@@ -1,6 +1,8 @@
import React from 'react';
import { WizardState, Step } from '../types';
import { WizardState } from '../types';
import { Camera, BookOpen, Ghost, Sword } from 'lucide-react';
import { UI_TEXT } from '../_EDITABLE_CONFIG/ui_text';
interface StepContextProps {
data: WizardState;
@@ -11,13 +13,11 @@ interface StepContextProps {
const StepContext: React.FC<StepContextProps> = ({ data, updateData, nextStep }) => {
const handleContextSelect = (context: WizardState['context']) => {
// If selecting Relacja, clear storyStyle and move on
if (context === 'relacja') {
updateData({ context, storyStyle: null });
setTimeout(nextStep, 150);
} else {
// If selecting Opowiesc, just update context and stay for sub-step
updateData({ context, storyStyle: null }); // Reset style if switching back to opowiesc
updateData({ context, storyStyle: null });
}
};
@@ -29,10 +29,9 @@ const StepContext: React.FC<StepContextProps> = ({ data, updateData, nextStep })
return (
<div className="space-y-8 animate-fade-in">
<div>
<h2 className="text-3xl font-bold tracking-tight text-gray-900 mb-3">Wybierz Kontekst</h2>
<p className="text-gray-500 mb-8 text-lg">Jaki rodzaj historii chcesz opowiedzieć?</p>
<h2 className="text-3xl font-bold tracking-tight text-gray-900 mb-3">{UI_TEXT.stepContext.title}</h2>
<p className="text-gray-500 mb-8 text-lg">{UI_TEXT.stepContext.subtitle}</p>
{/* Main Context Selection */}
<div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
<button
onClick={() => handleContextSelect('relacja')}
@@ -43,8 +42,8 @@ const StepContext: React.FC<StepContextProps> = ({ data, updateData, nextStep })
}`}
>
<Camera size={48} className={`mb-5 stroke-1 transition-colors ${data.context === 'relacja' ? 'text-[#EA4420]' : 'text-gray-400 group-hover:text-[#EA4420]'}`} />
<span className="text-xl font-bold tracking-tight">Relacja (Vlog)</span>
<span className="text-sm opacity-75 mt-2 font-medium">Tu i teraz, emocje, akcja.</span>
<span className="text-xl font-bold tracking-tight">{UI_TEXT.stepContext.relacja.title}</span>
<span className="text-sm opacity-75 mt-2 font-medium">{UI_TEXT.stepContext.relacja.desc}</span>
</button>
<button
@@ -56,16 +55,15 @@ const StepContext: React.FC<StepContextProps> = ({ data, updateData, nextStep })
}`}
>
<BookOpen size={48} className={`mb-5 stroke-1 transition-colors ${data.context === 'opowiesc' ? 'text-[#EA4420]' : 'text-gray-400 group-hover:text-[#EA4420]'}`} />
<span className="text-xl font-bold tracking-tight">Opowieść</span>
<span className="text-sm opacity-75 mt-2 font-medium">Wspomnienia, refleksja, morał.</span>
<span className="text-xl font-bold tracking-tight">{UI_TEXT.stepContext.opowiesc.title}</span>
<span className="text-sm opacity-75 mt-2 font-medium">{UI_TEXT.stepContext.opowiesc.desc}</span>
</button>
</div>
{/* Sub-step for Opowiesc: Story Style */}
{data.context === 'opowiesc' && (
<div className="animate-fade-in border-t border-gray-100 pt-8">
<h3 className="text-xl font-bold tracking-tight text-gray-900 mb-3">Wybierz Styl Opowieści</h3>
<p className="text-gray-500 mb-6 text-sm">Nadaj historii unikalny klimat.</p>
<h3 className="text-xl font-bold tracking-tight text-gray-900 mb-3">{UI_TEXT.stepContext.styles.title}</h3>
<p className="text-gray-500 mb-6 text-sm">{UI_TEXT.stepContext.styles.subtitle}</p>
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
<button
@@ -78,8 +76,8 @@ const StepContext: React.FC<StepContextProps> = ({ data, updateData, nextStep })
>
<Ghost size={32} className={`mr-4 stroke-1 ${data.storyStyle === 'noir' ? 'text-white' : 'text-gray-400 group-hover:text-gray-900'}`} />
<div>
<span className="text-lg font-bold tracking-tight block">Kryminał NOIR</span>
<span className={`text-xs block mt-1 ${data.storyStyle === 'noir' ? 'text-gray-400' : 'text-gray-500'}`}>Mrok, deszcz, cyniczny detektyw.</span>
<span className="text-lg font-bold tracking-tight block">{UI_TEXT.stepContext.styles.noir.title}</span>
<span className={`text-xs block mt-1 ${data.storyStyle === 'noir' ? 'text-gray-400' : 'text-gray-500'}`}>{UI_TEXT.stepContext.styles.noir.desc}</span>
</div>
</button>
@@ -93,17 +91,16 @@ const StepContext: React.FC<StepContextProps> = ({ data, updateData, nextStep })
>
<Sword size={32} className={`mr-4 stroke-1 ${data.storyStyle === 'fantasy' ? 'text-purple-600' : 'text-gray-400 group-hover:text-purple-600'}`} />
<div>
<span className="text-lg font-bold tracking-tight block">Przygoda Fantasy</span>
<span className="text-xs text-gray-500 block mt-1">Epicka podróż, magia, artefakty.</span>
<span className="text-lg font-bold tracking-tight block">{UI_TEXT.stepContext.styles.fantasy.title}</span>
<span className="text-xs text-gray-500 block mt-1">{UI_TEXT.stepContext.styles.fantasy.desc}</span>
</div>
</button>
</div>
</div>
)}
</div>
</div>
);
};
export default StepContext;
export default StepContext;