arebynd/promptstory
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Pierwszy wrzut promptstory

Browse Source
This commit is contained in:
Arek Bykowski
2026-02-15 13:22:48 +01:00
commit 27a3c6024f
27 changed files with 2833 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
components/StepPlatform.tsx Normal file
View File

@@ -0,0 +1,69 @@
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;