105 lines
4.2 KiB
TypeScript
105 lines
4.2 KiB
TypeScript
import React from 'react';
|
|
import { WizardState, Tone, Goal } from '../types';
|
|
import { Laugh, Brain, Zap, MessageCircle, Share2, ShoppingBag } from 'lucide-react';
|
|
|
|
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: 'Luzak', desc: 'Humor, dystans, memy', icon: <Laugh size={32} /> },
|
|
{ id: 'serious', label: 'Ekspert', desc: 'Konkrety, wiedza, liczby', icon: <Brain size={32} /> },
|
|
{ id: 'inspirational', label: 'Mentor', desc: 'Emocje, głębia, lekcja', icon: <Zap size={32} /> },
|
|
];
|
|
|
|
const goals: { id: Goal; label: string; desc: string; icon: React.ReactNode }[] = [
|
|
{ id: 'engagement', label: 'Społeczność', desc: 'Komentarze i dyskusja', icon: <MessageCircle size={32} /> },
|
|
{ id: 'viral', label: 'Zasięg', desc: 'Udostępnienia (Share)', icon: <Share2 size={32} /> },
|
|
{ id: 'sales', label: 'Sprzedaż', desc: 'Kliknięcie w link / Zakup', 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">Wybierz Ton (Vibe)</h2>
|
|
<p className="text-gray-500 mb-6 text-lg">Jak chcesz brzmieć?</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">Wybierz Cel</h2>
|
|
<p className="text-gray-500 mb-6 text-lg">Co chcesz osiągnąć tym postem?</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>
|
|
|
|
{/* Next Button */}
|
|
<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"
|
|
>
|
|
Przejdź do szczegółów
|
|
</button>
|
|
</div>
|
|
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default StepToneGoal; |