Update tinker_tickets_react/src/Components/CreateTicket/TicketForm.tsx

tinker_tickets_react/src/Components/CreateTicket/TicketForm.tsx

@@ -4,71 +4,70 @@ import TicketTextarea from "./TicketText";
 import type { CreateTicketFormData } from "../../types/ticket";
 
 interface TicketFormProps {
-onError: (msg: string | null) => void;
+  onError: (msg: string | null) => void;
 }
 
 const TicketForm: React.FC<TicketFormProps> = ({ onError }) => {
-const [form, setForm] = useState<CreateTicketFormData>({
+  const [form, setForm] = useState<CreateTicketFormData>({
-title: "",
+    title: "",
-status: "Open",
+    status: "Open",
-priority: "4",
+    priority: "4",
-category: "General",
+    category: "General",
-type: "Issue",
+    type: "Issue",
-description: "",
+    description: "",
-});
+  });
 
-function updateField(field: keyof CreateTicketFormData, value: string) {
+  function updateField(field: keyof CreateTicketFormData, value: string) {
-setForm((prev: CreateTicketFormData) => ({ ...prev, [field]: value }));
+    setForm(prev => ({ ...prev, [field]: value }));
-}
+  }
 
-function handleSubmit(e: React.FormEvent) {
+  function handleSubmit(e: React.FormEvent) {
-e.preventDefault();
+    e.preventDefault();
 
-```
+    if (!form.title.trim() || !form.description.trim()) {
-if (!form.title.trim() || !form.description.trim()) {
+      onError("Title and description are required.");
-  onError("Title and description are required.");
+      return;
-  return;
+    }
-}
 
-console.log("Submitting:", form);
+    console.log("Submitting:", form);
-// Later: POST to Express/PHP
+    // Later: POST to Express/PHP
-```
+  }
 
-}
+  return (
+    <form className="ticket-form" onSubmit={handleSubmit}>
+      <div className="ticket-details">
+        <div className="detail-group">
+          <label>Title</label>
+          <input
+            type="text"
+            value={form.title}
+            onChange={e => updateField("title", e.target.value)}
+            required
+          />
+        </div>
 
-return ( <form className="ticket-form" onSubmit={handleSubmit}> <div className="ticket-details"> <div className="detail-group"> <label>Title</label>
+        <TicketFieldRow form={form} updateField={updateField} />
-<input
-type="text"
-value={form.title}
-onChange={e => updateField("title", e.target.value)}
-required
-/> </div>
 
-```
+        <TicketTextarea
-    <TicketFieldRow form={form} updateField={updateField} />
+          label="Description"
+          value={form.description}
+          onChange={value => updateField("description", value)}
+          required
+        />
+      </div>
 
-    <TicketTextarea
+      <div className="ticket-footer">
-      label="Description"
+        <button type="submit" className="btn primary">Create Ticket</button>
-      value={form.description}
+        <button
-      onChange={value => updateField("description", value)}
+          type="button"
-      required
+          className="btn back-btn"
-    />
+          onClick={() => (window.location.href = "/")}
-  </div>
+        >
-
+          Cancel
-  <div className="ticket-footer">
+        </button>
-    <button type="submit" className="btn primary">Create Ticket</button>
+      </div>
-    <button
+    </form>
-      type="button"
+  );
-      className="btn back-btn"
-      onClick={() => (window.location.href = "/")}
-    >
-      Cancel
-    </button>
-  </div>
-</form>
-```
-
-);
 };
 
-export default TicketForm;
+export default TicketForm;