69 lines
3.2 KiB
TypeScript
69 lines
3.2 KiB
TypeScript
import React from 'react';
|
|
import { WizardState } from '../types';
|
|
import { Instagram, Youtube, Activity } from 'lucide-react';
|
|
|
|
interface StepPlatformProps {
|
|
data: WizardState;
|
|
updateData: (updates: Partial<WizardState>) => void;
|
|
nextStep: () => void;
|
|
}
|
|
|
|
const StepPlatform: React.FC<StepPlatformProps> = ({ data, updateData, nextStep }) => {
|
|
|
|
const handleSelect = (platform: WizardState['platform']) => {
|
|
updateData({ platform });
|
|
setTimeout(nextStep, 150);
|
|
};
|
|
|
|
return (
|
|
<div className="space-y-8 animate-fade-in">
|
|
<div>
|
|
<h2 className="text-3xl font-bold tracking-tight text-gray-900 mb-3">Wybierz Platformę</h2>
|
|
<p className="text-gray-500 mb-8 text-lg">Gdzie opublikujesz materiał?</p>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
|
<button
|
|
onClick={() => handleSelect('instagram')}
|
|
className={`flex flex-col items-center justify-center p-10 rounded-md border transition-all duration-200 group ${
|
|
data.platform === 'instagram'
|
|
? 'border-[#EA4420] bg-[#EA4420]/5 text-[#EA4420]'
|
|
: 'border-gray-200 hover:border-[#EA4420] hover:shadow-md text-gray-600 bg-white'
|
|
}`}
|
|
>
|
|
<Instagram size={48} className={`mb-5 stroke-1 transition-colors ${data.platform === 'instagram' ? 'text-[#EA4420]' : 'text-gray-400 group-hover:text-[#EA4420]'}`} />
|
|
<span className="text-xl font-bold tracking-tight">Instagram</span>
|
|
<span className="text-sm opacity-75 mt-2 font-medium">Carousel / Post</span>
|
|
</button>
|
|
|
|
<button
|
|
onClick={() => handleSelect('youtube')}
|
|
className={`flex flex-col items-center justify-center p-10 rounded-md border transition-all duration-200 group ${
|
|
data.platform === 'youtube'
|
|
? 'border-[#EA4420] bg-[#EA4420]/5 text-[#EA4420]'
|
|
: 'border-gray-200 hover:border-[#EA4420] hover:shadow-md text-gray-600 bg-white'
|
|
}`}
|
|
>
|
|
<Youtube size={48} className={`mb-5 stroke-1 transition-colors ${data.platform === 'youtube' ? 'text-[#EA4420]' : 'text-gray-400 group-hover:text-[#EA4420]'}`} />
|
|
<span className="text-xl font-bold tracking-tight">YouTube</span>
|
|
<span className="text-sm opacity-75 mt-2 font-medium">Shorts / Video</span>
|
|
</button>
|
|
|
|
<button
|
|
onClick={() => handleSelect('strava')}
|
|
className={`flex flex-col items-center justify-center p-10 rounded-md border transition-all duration-200 group ${
|
|
data.platform === 'strava'
|
|
? 'border-[#EA4420] bg-[#EA4420]/5 text-[#EA4420]'
|
|
: 'border-gray-200 hover:border-[#EA4420] hover:shadow-md text-gray-600 bg-white'
|
|
}`}
|
|
>
|
|
<Activity size={48} className={`mb-5 stroke-1 transition-colors ${data.platform === 'strava' ? 'text-[#EA4420]' : 'text-gray-400 group-hover:text-[#EA4420]'}`} />
|
|
<span className="text-xl font-bold tracking-tight">Strava</span>
|
|
<span className="text-sm opacity-75 mt-2 font-medium">Activity / Photos</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default StepPlatform; |