59 lines
1.4 KiB
TypeScript
59 lines
1.4 KiB
TypeScript
"use client";
|
|
import React from "react";
|
|
import SimpleMDE from "react-simplemde-editor";
|
|
import "easymde/dist/easymde.min.css";
|
|
import { useForm, Controller } from "react-hook-form";
|
|
import { FormEvent } from "react";
|
|
|
|
interface IssueForm {
|
|
title: string;
|
|
description: string;
|
|
}
|
|
|
|
const NewIssuePage = () => {
|
|
const { register, control, handleSubmit } = useForm<IssueForm>();
|
|
// console.log(register('title'))
|
|
|
|
// handle form submit
|
|
async function onSubmit(event: FormEvent<HTMLFormElement>) {
|
|
event.preventDefault();
|
|
|
|
const formData = new FormData(event.currentTarget);
|
|
const response = await fetch("/api/issues", {
|
|
method: "POST",
|
|
body: formData,
|
|
});
|
|
|
|
// Handle response if necessary
|
|
// const data = await response.json();
|
|
// ...
|
|
}
|
|
|
|
return (
|
|
<form
|
|
className="max-w-xl"
|
|
// onSubmit={handleSubmit((data) => console.log(data))}
|
|
onSubmit={onSubmit}
|
|
>
|
|
<input
|
|
type="text"
|
|
placeholder="Type Here"
|
|
className="input w-full border-zinc-300 mb-2"
|
|
{...register("title")}
|
|
/>
|
|
<Controller
|
|
name="description"
|
|
control={control}
|
|
render={({ field }) => (
|
|
<SimpleMDE placeholder="Description" {...field}></SimpleMDE>
|
|
)}
|
|
/>
|
|
<button className="btn bg-emerald-400 text-black hover:bg-white">
|
|
Submit Ticket
|
|
</button>
|
|
</form>
|
|
);
|
|
};
|
|
|
|
export default NewIssuePage;
|