Create IdeaFrom.jsx

component/IdeaFrom.jsx

@@ -0,0 +1,95 @@
+import { useState } from "react";
+
+export default function IdeaForm({ onSubmit }) {
+  const [industry, setIndustry] = useState("General / Cross-industry");
+  const [category, setCategory] = useState("Ice Breaking");
+  const [message, setMessage] = useState("");
+  const [audience, setAudience] = useState([]);
+  const [batchSize, setBatchSize] = useState("15-20");
+  const [duration, setDuration] = useState("10-20 mins");
+  const [delivery, setDelivery] = useState("In-person");
+  const [stage, setStage] = useState("Ice-breaker");
+  const [context, setContext] = useState("");
+  const [outcome, setOutcome] = useState("");
+  const [includeDialogues, setIncludeDialogues] = useState(false);
+
+  const audiences = ["First-line managers","Senior managers","Sales reps","New joiners","Cross-functional teams","Leadership team"];
+
+  function toggleAudience(a) {
+    setAudience(prev => prev.includes(a) ? prev.filter(x=>x!==a) : [...prev,a]);
+  }
+
+  function handleSubmit(e) {
+    e.preventDefault();
+    if (!message || audience.length===0 || !context || !outcome) {
+      alert("Please fill required fields");
+      return;
+    }
+    onSubmit({
+      industry, category, message, audience, batchSize, duration, delivery, stage, context, outcome, includeDialogues
+    });
+  }
+
+  return (
+    <form onSubmit={handleSubmit} className="space-y-3 p-3">
+      <select value={industry} onChange={e=>setIndustry(e.target.value)} className="w-full p-3 border rounded-md">
+        <option>General / Cross-industry</option>
+        <option>Pharmaceutical</option>
+        <option>Healthcare</option>
+        <option>Insurance</option>
+        <option>Technology</option>
+        <option>Education</option>
+        <option>Other</option>
+      </select>
+
+      <select value={category} onChange={e=>setCategory(e.target.value)} className="w-full p-3 border rounded-md">
+        <option>Ice Breaking</option>
+        <option>Activities During Workshop</option>
+        <option>Learning Solution</option>
+        <option>Energizer</option>
+      </select>
+
+      <textarea value={message} onChange={e=>setMessage(e.target.value)} placeholder="Message you want to drive" className="w-full p-3 border rounded-md" />
+
+      <div className="text-sm font-medium">Audience</div>
+      <div className="grid grid-cols-2 gap-2">
+        {audiences.map(a => (
+          <button type="button" key={a} onClick={()=>toggleAudience(a)} className={`p-2 border rounded ${audience.includes(a)?'bg-primary text-white':'bg-white'}`}>
+            {a}
+          </button>
+        ))}
+      </div>
+
+      <input value={batchSize} onChange={e=>setBatchSize(e.target.value)} className="w-full p-3 border rounded-md" />
+      <select value={duration} onChange={e=>setDuration(e.target.value)} className="w-full p-3 border rounded-md">
+        <option>5-10 mins</option>
+        <option>10-20 mins</option>
+        <option>20-30 mins</option>
+        <option>30-60 mins</option>
+      </select>
+
+      <div className="flex gap-2">
+        <label className="flex-1"><input type="radio" checked={delivery==='In-person'} onChange={()=>setDelivery('In-person')} /> In-person</label>
+        <label className="flex-1"><input type="radio" checked={delivery==='Virtual'} onChange={()=>setDelivery('Virtual')} /> Virtual</label>
+      </div>
+
+      <select value={stage} onChange={e=>setStage(e.target.value)} className="w-full p-3 border rounded-md">
+        <option>Ice-breaker</option>
+        <option>Mid-session energizer</option>
+        <option>Concept introduction</option>
+        <option>Deep-dive practice</option>
+        <option>Reflection/closing</option>
+      </select>
+
+      <textarea value={context} onChange={e=>setContext(e.target.value)} placeholder="Scenario context" className="w-full p-3 border rounded-md" />
+      <textarea value={outcome} onChange={e=>setOutcome(e.target.value)} placeholder="Desired outcome" className="w-full p-3 border rounded-md" />
+
+      <label className="flex items-center gap-2">
+        <input type="checkbox" checked={includeDialogues} onChange={e=>setIncludeDialogues(e.target.checked)} />
+        Include sample dialogues (roleplay only)
+      </label>
+
+      <button type="submit" className="w-full bg-primary text-white p-3 rounded-md">Generate Ideas</button>
+    </form>
+  );
+}