feat: connect title and description inputs to state

- Add updateTitle prop to Frame component
- Add handleUpdateFrameTitle to useNewGuide hook
- Wire onChange handlers for guide title, description, and frame title inputs

src/features/guides/components/Frame.tsx

@@ -7,23 +7,27 @@ export default function Frame({
   addStep,
   removeStep,
   updateStep,
+  updateTitle,
 }: {
   frame: FrameType;
   onRemove: (frameId: string) => void;
   addStep: (frameId: string) => void;
   removeStep: (stepId: string) => void;
   updateStep: (stepId: string, text: string) => void;
+  updateTitle: (frameId: string, title: string) => void;
 }) {
   return (
     <div>
       <button type="button" onClick={() => onRemove(frame.id)}>
         Remove Frame
       </button>
-      <label>Title</label>
+      <label>
+        Title
         <input
           type="text"
-        onChange={(e) => updateStep(frame.id, e.target.value)}
+          onChange={(e) => updateTitle(frame.id, e.target.value)}
         />
+      </label>
       <img src={URL.createObjectURL(frame.file)} alt={frame.title} />
       <button type="button" onClick={() => addStep(frame.id)}>
         Add Step

src/features/guides/hooks/useNewGuide.ts

@@ -44,6 +44,12 @@ export default function useNewGuide() {
     setFrames((prev) => [...prev, ...newFrameObjects]);
   };
 
+  const handleUpdateFrameTitle = (frameId: string, title: string) => {
+    setFrames((prev) =>
+      prev.map((frame) => (frame.id === frameId ? { ...frame, title } : frame)),
+    );
+  };
+
   const handleRemoveFrame = (frameId: string) => {
     setFrames((prev) => prev.filter((frame) => frame.id !== frameId));
   };
@@ -116,6 +122,7 @@ export default function useNewGuide() {
     handleUpdateTitle,
     handleUpdateDescription,
     handleAddFrames,
+    handleUpdateFrameTitle,
     handleAddSteps,
     handleRemoveFrame,
     handleUpdateStep,

src/features/guides/routes/NewGuide.tsx

@@ -9,6 +9,7 @@ export default function NewGuide() {
     handleUpdateTitle,
     handleUpdateDescription,
     handleAddFrames,
+    handleUpdateFrameTitle,
     handleAddSteps,
     handleRemoveFrame,
     handleRemoveStep,
@@ -21,11 +22,18 @@ export default function NewGuide() {
       <form className="new-guide__form" onSubmit={(e) => handleSaveGuide(e)}>
         <label>
           <span>Title</span>
-          <input type="text" name="title" />
+          <input
+            type="text"
+            name="title"
+            onChange={(e) => handleUpdateTitle(e.target.value)}
+          />
         </label>
         <label>
           <span>Description</span>
-          <textarea name="description" />
+          <textarea
+            name="description"
+            onChange={(e) => handleUpdateDescription(e.target.value)}
+          />
         </label>
 
         <FileUpload onChange={handleAddFrames} />
@@ -37,8 +45,9 @@ export default function NewGuide() {
               frame={frame}
               onRemove={handleRemoveFrame}
               addStep={handleAddSteps}
-              removeStep={handleRemoveStep}
               updateStep={handleUpdateStep}
+              removeStep={handleRemoveStep}
+              updateTitle={handleUpdateFrameTitle}
             />
           ))}