mirror of
https://github.com/stefanpejcic/openpanel
synced 2025-06-26 18:28:26 +00:00
83 lines
3.2 KiB
TypeScript
83 lines
3.2 KiB
TypeScript
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;
|
|
|