judge4c-demo/src/components/snippet-edit-form.tsx

"use client";

import { useState } from "react";
import * as actions from "@/actions";
import { Snippet } from "@prisma/client";
import { Editor } from "@monaco-editor/react";

interface SnippetEditFormProps {
  snippet: Snippet;
}

export default function SnippetEditForm({ snippet }: SnippetEditFormProps) {
  const [code, setCode] = useState(snippet.code);

  const handleEditorChange = (value: string = "") => {
    setCode(value);
  };

  const editSnippetAction = actions.editSnippet.bind(null, snippet.id, code);

  return (
    <div>
      <Editor
        height="40vh"
        theme="vs-light"
        language="c"
        defaultValue={snippet.code}
        options={{ minimap: { enabled: false } }}
        onChange={handleEditorChange}
      />
      <form action={editSnippetAction} className="flex justify-end pr-4">
        <button type="submit" className="p-2 border rounded">
          Save
        </button>
      </form>
    </div>
  );
}