snapsteps/src/features/guides/components/Frame.tsx

import "./Frame.css";
import type { FrameType, StepType } from "../../../lib/schemas";
import Step from "./Step";

export default function Frame({
  frame,
  frameIndex,
  onRemove,
  addStep,
  removeStep,
  updateStep,
  updateTitle,
  reOrder,
}: {
  frame: FrameType;
  frameIndex: number;
  onRemove: (frameId: string) => void;
  addStep: (frameId: string) => void;
  removeStep: (stepId: string) => void;
  updateStep: (stepId: string, text: string) => void;
  updateTitle: (frameId: string, title: string) => void;
  reOrder: (startIndex: number, endIndex: number) => void;
}) {
  return (
    <div>
      <button type="button" onClick={() => reOrder(frameIndex, frameIndex - 1)}>
        Up
      </button>
      <button type="button" onClick={() => reOrder(frameIndex, frameIndex + 1)}>
        Down
      </button>

      <button type="button" onClick={() => onRemove(frame.id)}>
        Remove Frame
      </button>
      <label>
        Title
        <input
          type="text"
          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
      </button>
      {frame.steps.map((step: StepType, index: number) => (
        <Step
          key={step.id}
          step={step}
          index={index}
          removeStep={removeStep}
          updateStep={updateStep}
        />
      ))}
    </div>
  );
}