GNXSOFT.COM

gnx-react/components/examples/ContactForm.tsx

@@ -0,0 +1,137 @@
+'use client';
+
+import { useState } from 'react';
+
+export default function ContactForm() {
+  const [formData, setFormData] = useState({
+    name: '',
+    email: '',
+    subject: '',
+    message: ''
+  });
+  const [loading, setLoading] = useState(false);
+  const [success, setSuccess] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+    setFormData({
+      ...formData,
+      [e.target.name]: e.target.value
+    });
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setLoading(true);
+    setError(null);
+
+    // Simulate form submission
+    setTimeout(() => {
+      setSuccess(true);
+      setFormData({ name: '', email: '', subject: '', message: '' });
+      setLoading(false);
+    }, 2000);
+  };
+
+  if (success) {
+    return (
+      <div className="alert alert-success" role="alert">
+        <h4 className="alert-heading">Message Sent!</h4>
+        <p>Thank you for your message. We&apos;ll get back to you soon.</p>
+        <button 
+          className="btn btn-outline-success"
+          onClick={() => setSuccess(false)}
+        >
+          Send Another Message
+        </button>
+      </div>
+    );
+  }
+
+  return (
+    <div className="container py-5">
+      <div className="row justify-content-center">
+        <div className="col-md-8">
+          <h2 className="text-center mb-4">Contact Us</h2>
+          
+          {error && (
+            <div className="alert alert-danger" role="alert">
+              {error}
+            </div>
+          )}
+
+          <form onSubmit={handleSubmit}>
+            <div className="row">
+              <div className="col-md-6 mb-3">
+                <label htmlFor="name" className="form-label">Name *</label>
+                <input
+                  type="text"
+                  className="form-control"
+                  id="name"
+                  name="name"
+                  value={formData.name}
+                  onChange={handleChange}
+                  required
+                />
+              </div>
+              <div className="col-md-6 mb-3">
+                <label htmlFor="email" className="form-label">Email *</label>
+                <input
+                  type="email"
+                  className="form-control"
+                  id="email"
+                  name="email"
+                  value={formData.email}
+                  onChange={handleChange}
+                  required
+                />
+              </div>
+            </div>
+            
+            <div className="mb-3">
+              <label htmlFor="subject" className="form-label">Subject</label>
+              <input
+                type="text"
+                className="form-control"
+                id="subject"
+                name="subject"
+                value={formData.subject}
+                onChange={handleChange}
+              />
+            </div>
+            
+            <div className="mb-3">
+              <label htmlFor="message" className="form-label">Message *</label>
+              <textarea
+                className="form-control"
+                id="message"
+                name="message"
+                rows={5}
+                value={formData.message}
+                onChange={handleChange}
+                required
+              ></textarea>
+            </div>
+            
+            <div className="text-center">
+              <button 
+                type="submit" 
+                className="btn btn-primary btn-lg"
+                disabled={loading}
+              >
+                {loading ? (
+                  <>
+                    <span className="spinner-border spinner-border-sm me-2" role="status"></span>
+                    Sending...
+                  </>
+                ) : (
+                  'Send Message'
+                )}
+              </button>
+            </div>
+          </form>
+        </div>
+      </div>
+    </div>
+  );
+}