Create index.tsx
This commit is contained in:
parent
57f1c6f941
commit
28da5d633b
82
documentation/src/pages/contact/index.tsx
Normal file
82
documentation/src/pages/contact/index.tsx
Normal file
|
@ -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;
|
||||
|
Loading…
Reference in a new issue