feat: use Next.js 13 App directory

front/app/organizations/new.tsx

@@ -0,0 +1,51 @@
+import React from "react";
+import Layout from "../../components/UI/Layout";
+import { Title } from "../../components/UI/Elements/Styles/Title";
+import { createNewOrganization } from "../../services/orgs";
+
+const Organizations = () => {
+  const [name, setName] = React.useState("");
+  const [description, setDescription] = React.useState("");
+  const [email, setEmail] = React.useState("");
+  const [slug, setSlug] = React.useState("");
+
+  const handleNameChange = (e: any) => {
+    setName(e.target.value);
+  };
+
+  const handleDescriptionChange = (e: any) => {
+    setDescription(e.target.value);
+  };
+
+  const handleEmailChange = (e: any) => {
+    setEmail(e.target.value);
+  };
+
+  const handleSlugChange = (e: any) => {
+    setSlug(e.target.value);
+  };
+
+  const handleSubmit = async (e: any) => {
+    e.preventDefault();
+    console.log({ name, description, email });
+    const status = await createNewOrganization({ name, description, email, slug });
+    alert(JSON.stringify(status));
+  };
+
+  return (
+    <Layout>
+      <Title>New Organization</Title>
+      Name: <input onChange={handleNameChange} type="text" />
+      <br />
+      Description: <input onChange={handleDescriptionChange} type="text" />
+      <br />
+      Slug: <input onChange={handleSlugChange} type="text" />
+      <br />
+      Email Address: <input onChange={handleEmailChange} type="text" />
+      <br />
+      <button onClick={handleSubmit}>Create</button>
+    </Layout>
+  );
+};
+
+export default Organizations;