|
|
@@ -0,0 +1,82 @@
|
|
|
+import React, { useState } from "react";
|
|
|
+import Head from "@docusaurus/Head";
|
|
|
+import { BlogFooter } from "@site/src/refine-theme/blog-footer";
|
|
|
+import { CommonHeader } from "@site/src/refine-theme/common-header";
|
|
|
+import { CommonLayout } from "@site/src/refine-theme/common-layout";
|
|
|
+import clsx from "clsx";
|
|
|
+
|
|
|
+const Contact: React.FC = () => {
|
|
|
+ const [formData, setFormData] = useState({ name: "", email: "", message: "" });
|
|
|
+
|
|
|
+ const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
|
|
|
+ const { name, value } = e.target;
|
|
|
+ setFormData((prevData) => ({ ...prevData, [name]: value }));
|
|
|
+ };
|
|
|
+
|
|
|
+ const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
|
|
|
+ e.preventDefault();
|
|
|
+ // TODO: Send form data to a server endpoint to handle email sending (not implemented here).
|
|
|
+ // Example: fetch('/api/send-email', { method: 'POST', body: JSON.stringify(formData) });
|
|
|
+ // Note: Ensure proper security measures and use a server for handling email submissions.
|
|
|
+ };
|
|
|
+
|
|
|
+ return (
|
|
|
+ <CommonLayout>
|
|
|
+ <Head title="CONTACT | OpenPanel">
|
|
|
+ <html data-page="contact" data-customized="true" />
|
|
|
+ </Head>
|
|
|
+ <div className="refine-prose">
|
|
|
+ <CommonHeader hasSticky={true} />
|
|
|
+
|
|
|
+ <div className="flex-1 flex flex-col pt-8 lg:pt-16 pb-32 max-w-[800px] w-full mx-auto px-2">
|
|
|
+ <h1>Contact Us</h1>
|
|
|
+
|
|
|
+ <form onSubmit={handleSubmit}>
|
|
|
+ <div className="mb-4">
|
|
|
+ <label htmlFor="name">Name:</label>
|
|
|
+ <input
|
|
|
+ type="text"
|
|
|
+ id="name"
|
|
|
+ name="name"
|
|
|
+ value={formData.name}
|
|
|
+ onChange={handleChange}
|
|
|
+ required
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div className="mb-4">
|
|
|
+ <label htmlFor="email">Email:</label>
|
|
|
+ <input
|
|
|
+ type="email"
|
|
|
+ id="email"
|
|
|
+ name="email"
|
|
|
+ value={formData.email}
|
|
|
+ onChange={handleChange}
|
|
|
+ required
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div className="mb-4">
|
|
|
+ <label htmlFor="message">Message:</label>
|
|
|
+ <textarea
|
|
|
+ id="message"
|
|
|
+ name="message"
|
|
|
+ value={formData.message}
|
|
|
+ onChange={handleChange}
|
|
|
+ required
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <button type="submit" className="bg-blue-500 text-white px-4 py-2">
|
|
|
+ Submit
|
|
|
+ </button>
|
|
|
+ </form>
|
|
|
+ </div>
|
|
|
+ <BlogFooter />
|
|
|
+ </div>
|
|
|
+ </CommonLayout>
|
|
|
+ );
|
|
|
+};
|
|
|
+
|
|
|
+export default Contact;
|
|
|
+
|
Stefan Pejcic