Pierwszy wrzut promptstory

2026-02-15 13:22:48 +01:00
commit 27a3c6024f
27 changed files with 2833 additions and 0 deletions
--- a/components/StepContext.tsx
+++ b/components/StepContext.tsx
@@ -0,0 +1,109 @@
+import React from 'react';
+import { WizardState, Step } from '../types';
+import { Camera, BookOpen, Ghost, Sword } from 'lucide-react';
+
+interface StepContextProps {
+  data: WizardState;
+  updateData: (updates: Partial<WizardState>) => void;
+  nextStep: () => void;
+}
+
+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
+    }
+  };
+
+  const handleStyleSelect = (storyStyle: WizardState['storyStyle']) => {
+      updateData({ storyStyle });
+      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 Kontekst</h2>
+        <p className="text-gray-500 mb-8 text-lg">Jaki rodzaj historii chcesz opowiedzieć?</p>
+        
+        {/* Main Context Selection */}
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
+          <button
+            onClick={() => handleContextSelect('relacja')}
+            className={`flex flex-col items-center justify-center p-10 rounded-md border transition-all duration-200 group ${
+              data.context === 'relacja'
+                ? 'border-[#EA4420] bg-[#EA4420]/5 text-[#EA4420]'
+                : 'border-gray-200 hover:border-[#EA4420] hover:shadow-md text-gray-600 bg-white'
+            }`}
+          >
+            <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>
+          </button>
+
+          <button
+            onClick={() => handleContextSelect('opowiesc')}
+            className={`flex flex-col items-center justify-center p-10 rounded-md border transition-all duration-200 group ${
+              data.context === 'opowiesc'
+                ? 'border-[#EA4420] bg-[#EA4420]/5 text-[#EA4420]'
+                : 'border-gray-200 hover:border-[#EA4420] hover:shadow-md text-gray-600 bg-white'
+            }`}
+          >
+            <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>
+          </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>
+                
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                    <button
+                        onClick={() => handleStyleSelect('noir')}
+                        className={`flex items-center p-6 rounded-md border transition-all duration-200 group text-left ${
+                        data.storyStyle === 'noir'
+                            ? 'border-gray-800 bg-gray-900 text-white shadow-lg'
+                            : 'border-gray-200 hover:border-gray-800 hover:shadow-md text-gray-600 bg-white'
+                        }`}
+                    >
+                        <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>
+                        </div>
+                    </button>
+
+                    <button
+                        onClick={() => handleStyleSelect('fantasy')}
+                        className={`flex items-center p-6 rounded-md border transition-all duration-200 group text-left ${
+                        data.storyStyle === 'fantasy'
+                            ? 'border-purple-600 bg-purple-50 text-purple-700'
+                            : 'border-gray-200 hover:border-purple-600 hover:shadow-md text-gray-600 bg-white'
+                        }`}
+                    >
+                        <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>
+                        </div>
+                    </button>
+                </div>
+            </div>
+        )}
+
+      </div>
+    </div>
+  );
+};
+
+export default StepContext;