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:
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user