107 lines
4.6 KiB
TypeScript
107 lines
4.6 KiB
TypeScript
|
|
import React from 'react';
|
|
import { WizardState, Tone, Goal } from '../types';
|
|
import { Laugh, Brain, Zap, MessageCircle, Share2, ShoppingBag } from 'lucide-react';
|
|
import { UI_TEXT } from '../_EDITABLE_CONFIG/ui_text';
|
|
|
|
interface StepToneGoalProps {
|
|
data: WizardState;
|
|
updateData: (updates: Partial<WizardState>) => void;
|
|
nextStep: () => void;
|
|
}
|
|
|
|
const StepToneGoal: React.FC<StepToneGoalProps> = ({ data, updateData, nextStep }) => {
|
|
|
|
const handleToneSelect = (tone: Tone) => {
|
|
updateData({ tone });
|
|
};
|
|
|
|
const handleGoalSelect = (goal: Goal) => {
|
|
updateData({ goal });
|
|
};
|
|
|
|
const isComplete = data.tone && data.goal;
|
|
|
|
const tones: { id: Tone; label: string; desc: string; icon: React.ReactNode }[] = [
|
|
{ id: 'funny', label: UI_TEXT.stepToneGoal.tones.funny.label, desc: UI_TEXT.stepToneGoal.tones.funny.desc, icon: <Laugh size={32} /> },
|
|
{ id: 'serious', label: UI_TEXT.stepToneGoal.tones.serious.label, desc: UI_TEXT.stepToneGoal.tones.serious.desc, icon: <Brain size={32} /> },
|
|
{ id: 'inspirational', label: UI_TEXT.stepToneGoal.tones.inspirational.label, desc: UI_TEXT.stepToneGoal.tones.inspirational.desc, icon: <Zap size={32} /> },
|
|
];
|
|
|
|
const goals: { id: Goal; label: string; desc: string; icon: React.ReactNode }[] = [
|
|
{ id: 'engagement', label: UI_TEXT.stepToneGoal.goals.engagement.label, desc: UI_TEXT.stepToneGoal.goals.engagement.desc, icon: <MessageCircle size={32} /> },
|
|
{ id: 'viral', label: UI_TEXT.stepToneGoal.goals.viral.label, desc: UI_TEXT.stepToneGoal.goals.viral.desc, icon: <Share2 size={32} /> },
|
|
{ id: 'sales', label: UI_TEXT.stepToneGoal.goals.sales.label, desc: UI_TEXT.stepToneGoal.goals.sales.desc, icon: <ShoppingBag size={32} /> },
|
|
];
|
|
|
|
return (
|
|
<div className="space-y-12 animate-fade-in">
|
|
|
|
{/* Sekcja 1: TON */}
|
|
<div>
|
|
<h2 className="text-3xl font-bold tracking-tight text-gray-900 mb-3">{UI_TEXT.stepToneGoal.toneTitle}</h2>
|
|
<p className="text-gray-500 mb-6 text-lg">{UI_TEXT.stepToneGoal.toneSubtitle}</p>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
|
{tones.map((t) => (
|
|
<button
|
|
key={t.id}
|
|
onClick={() => handleToneSelect(t.id)}
|
|
className={`flex flex-col items-center justify-center p-6 rounded-md border text-center transition-all duration-200 group h-48 ${
|
|
data.tone === t.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.tone === t.id ? 'text-[#EA4420]' : 'text-gray-400 group-hover:text-[#EA4420]'}`}>
|
|
{t.icon}
|
|
</div>
|
|
<span className="text-xl font-bold tracking-tight mb-2">{t.label}</span>
|
|
<span className="text-sm opacity-75 font-medium">{t.desc}</span>
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Sekcja 2: CEL */}
|
|
<div>
|
|
<h2 className="text-3xl font-bold tracking-tight text-gray-900 mb-3">{UI_TEXT.stepToneGoal.goalTitle}</h2>
|
|
<p className="text-gray-500 mb-6 text-lg">{UI_TEXT.stepToneGoal.goalSubtitle}</p>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
|
{goals.map((g) => (
|
|
<button
|
|
key={g.id}
|
|
onClick={() => handleGoalSelect(g.id)}
|
|
className={`flex flex-col items-center justify-center p-6 rounded-md border text-center transition-all duration-200 group h-48 ${
|
|
data.goal === g.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.goal === g.id ? 'text-[#EA4420]' : 'text-gray-400 group-hover:text-[#EA4420]'}`}>
|
|
{g.icon}
|
|
</div>
|
|
<span className="text-xl font-bold tracking-tight mb-2">{g.label}</span>
|
|
<span className="text-sm opacity-75 font-medium">{g.desc}</span>
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex justify-end pt-4">
|
|
<button
|
|
onClick={nextStep}
|
|
disabled={!isComplete}
|
|
className="bg-[#EA4420] text-white px-8 py-3 rounded-md font-bold hover:bg-[#d63b1a] transition-all disabled:opacity-50 disabled:cursor-not-allowed shadow-md"
|
|
>
|
|
{UI_TEXT.stepToneGoal.nextBtn}
|
|
</button>
|
|
</div>
|
|
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default StepToneGoal;
|