doc: add additional semantic code and event handler

2023-01-30 14:34:35 -08:00
parent 97c674e241
commit 08bea4c56f
1 changed files with 41 additions and 1 deletions
@@ -17,7 +17,47 @@ const CreatePost = () => {
  const [generatingImg, setGeneratingImg] = useState(false);
  const [loading, setLoading] = useState(false);

-  return <div>CreatePost</div>;
+  const handleSubmit = () => {};
+
+  const handleChange = (e) => {};
+
+  const handleSurpriseMe = () => {};
+
+  return (
+    <section className="max-w-7xl mx-auto">
+      <div>
+        <h1 className="font-extrabold text-[#222328] text-[32px]">Create</h1>
+        <p className="mt-2 text-[#666e75] text-[16px] max-w[500px]">
+          Create imaginative and visually stunning images through DALL-E AI and
+          share them with the community
+        </p>
+      </div>
+
+      <form className="mt-16 max-w-3xl" onSubmit={handleSubmit}>
+        <div className="flex flex-col gap-5">
+          <FormField
+            label="Your Name"
+            type="text"
+            name="name"
+            placeholder="John Doe"
+            value={form.name}
+            handleChange={handleChange}
+          />
+
+          <FormField
+            label="Prompt"
+            type="text"
+            name="prompt"
+            placeholder="A plush toy robot sitting against a yellow wall"
+            value={form.prompt}
+            handleChange={handleChange}
+            isSurpriseMe
+            handleSurpriseMe={handleSurpriseMe}
+          />
+        </div>
+      </form>
+    </section>
+  );
 };

 export default CreatePost;