Init

src/components/GeneratorSelector.tsx

@@ -0,0 +1,63 @@
+import { useStore } from '@nanostores/react'
+import { appSettings, type GeneratorType } from '../stores'
+
+interface GeneratorSelectorProps {
+  onGenerate: () => void
+  isGenerating: boolean
+}
+
+export default function GeneratorSelector({ onGenerate, isGenerating }: GeneratorSelectorProps) {
+  console.log('GeneratorSelector rendering with props:', { onGenerate, isGenerating })
+
+  const settings = useStore(appSettings)
+  console.log('GeneratorSelector settings:', settings)
+
+  const handleGeneratorChange = (generator: GeneratorType) => {
+    console.log('Changing generator to:', generator)
+    appSettings.set({ ...settings, selectedGenerator: generator })
+  }
+
+  const handleGenerateClick = () => {
+    console.log('Generate button clicked in GeneratorSelector!')
+    console.log('onGenerate function:', onGenerate)
+    onGenerate()
+  }
+
+  const generators = [
+    { id: 'tixy' as const, name: 'Tixy', description: 'Mathematical expressions' },
+    { id: 'picsum' as const, name: 'Picsum', description: 'Random photos' },
+    { id: 'art-institute' as const, name: 'Art Institute', description: 'Famous artworks' },
+    { id: 'geometric-tiles' as const, name: 'Geo Tiles', description: 'Geometric patterns' }
+  ]
+
+  return (
+    <div className="border-b border-gray-800 p-6">
+      <div className="flex items-center space-x-6">
+        <button
+          onClick={handleGenerateClick}
+          disabled={isGenerating}
+          className="bg-white text-black px-6 py-2 font-medium hover:bg-gray-200 disabled:bg-gray-600 disabled:text-gray-400 disabled:cursor-not-allowed"
+        >
+          {isGenerating ? 'Generating...' : 'Generate'}
+        </button>
+
+        <div className="flex space-x-4">
+          {generators.map((generator) => (
+            <button
+              key={generator.id}
+              onClick={() => handleGeneratorChange(generator.id)}
+              className={`px-4 py-2 border ${
+                settings.selectedGenerator === generator.id
+                  ? 'border-white bg-white text-black'
+                  : 'border-gray-600 text-gray-300 hover:border-gray-400'
+              }`}
+            >
+              <div className="font-medium">{generator.name}</div>
+              <div className="text-xs opacity-75">{generator.description}</div>
+            </button>
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}