From d7f83b30b7988cd343ddd106e27720cda6e59c54 Mon Sep 17 00:00:00 2001 From: Pheonix Date: Tue, 9 Jun 2026 20:21:18 +0530 Subject: [PATCH] Update Contact.tsx --- src/pages/Contact/Contact.tsx | 502 ++++++++++++++++++---------------- 1 file changed, 268 insertions(+), 234 deletions(-) diff --git a/src/pages/Contact/Contact.tsx b/src/pages/Contact/Contact.tsx index a0bfccbd..e86ab9cb 100644 --- a/src/pages/Contact/Contact.tsx +++ b/src/pages/Contact/Contact.tsx @@ -1,22 +1,56 @@ import { useState, useContext } from "react"; -import { - Github, - Mail, - Phone, - Send, - X, - CheckCircle, -} from "lucide-react"; +import { Github, Mail, Phone, Send, X, CheckCircle } from "lucide-react"; import { ThemeContext } from "../../context/ThemeContext"; import type { ThemeContextType } from "../../context/ThemeContext"; function Contact() { const [showPopup, setShowPopup] = useState(false); const [isSubmitting, setIsSubmitting] = useState(false); + const [formData, setFormData] = useState({ + fullName: "", + email: "", + subject: "", + message: "", + }); + const [errors, setErrors] = useState>({}); + const themeContext = useContext(ThemeContext) as ThemeContextType; const { mode } = themeContext; - const handleSubmit = async () => { + const validateForm = () => { + const newErrors: Record = {}; + + if (!formData.fullName.trim()) newErrors.fullName = "Full name is required"; + if (!formData.email.trim()) { + newErrors.email = "Email is required"; + } else if (!/\S+@\S+\.\S+/.test(formData.email)) { + newErrors.email = "Please enter a valid email address"; + } + if (!formData.subject) newErrors.subject = "Please select a subject"; + if (!formData.message.trim()) newErrors.message = "Message is required"; + + setErrors(newErrors); + return Object.keys(newErrors).length === 0; + }; + + const handleInputChange = ( + e: React.ChangeEvent< + HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement + >, + ) => { + const { name, value } = e.target; + setFormData((prev) => ({ ...prev, [name]: value })); + + if (errors[name]) { + setErrors((prev) => ({ ...prev, [name]: "" })); + } + }; + + const handleSubmit = async (e: React.FormEvent) => { + e.preventDefault(); + + if (!validateForm()) return; + setIsSubmitting(true); // Simulate API call @@ -25,6 +59,10 @@ function Contact() { setIsSubmitting(false); setShowPopup(true); + // Reset form + setFormData({ fullName: "", email: "", subject: "", message: "" }); + setErrors({}); + // Auto-close popup after 5 seconds setTimeout(() => { setShowPopup(false); @@ -37,287 +75,284 @@ function Contact() { return (
- {/* Animated background elements */} -
-
-
-
+ {/* Subtle background elements */} +
+
+
-
+
{/* Header Section */} -
-
+
+
Logo
-

- GitHub Tracker +

+ Get In Touch

-

- Get in touch with us to discuss your project tracking needs or - report any issues +

+ Have questions about GitHub Tracker? Need help with your dashboard, + or want to suggest new features? Our team is here to support you.

-
- {/* Contact Info Cards */} -
-
-

+ {/* Contact Info */} +
+
+

+ Support Channels +

+

+ Choose the best way to reach us based on your needs +

+
+ +
+ {/* Phone */} +
- Let's Connect -

-

+

+ +
+
+

+ Phone Support +

+

(555) 123-4567

+

+ Mon–Fri, 9AM–5PM PST +

+
+
+
+ + {/* Email */} +
- We're here to help you track and manage your GitHub - repositories more effectively -

-
+
+
+ +
+
+

+ Email Support +

+ + support@githubtracker.dev + +

+ Responses within 24 hours +

+
+
+
-
- {[...Array(3)].map((_, index) => { - const contactTypes = [ - { - title: "Phone Support", - iconBg: "from-blue-500 to-cyan-500", - detail: "(123) 456-7890", - sub: "Mon-Fri, 9AM-6PM EST", - Icon: Phone, - }, - { - title: "Email Us", - iconBg: "from-purple-500 to-pink-500", - detail: "support@githubtracker.com", - sub: "We'll respond within 24 hours", - Icon: Mail, - }, - { - title: "GitHub Issues", - iconBg: "from-green-500 to-teal-500", - detail: "github.com/yourorg/githubtracker", - sub: "Report bugs & feature requests", - Icon: Github, - }, - ]; - const { title, iconBg, detail, sub, Icon } = - contactTypes[index]; - return ( -
-
-
- -
-
-

- {title} -

-

- {detail} -

-

- {sub} -

-
-
+ {/* GitHub */} +
+
+
+ +
+
+

+ GitHub Issues +

+ + github.com/yourorg/githubtracker + +

+ Report bugs • Request features +

- ); - })} +
+
{/* Contact Form */} -
-

+
- Send us a Message -

+

+ Send a Message +

-
-
+
{/* Full Name */}
-
{/* Email */}
-
{/* Subject */}
-
{/* Message */} -
-
-
+
@@ -325,20 +360,19 @@ function Contact() { {/* Success Popup */} {showPopup && (
- -
- Thank you for contacting us! We will get back to you shortly. + +
+
Message Sent Successfully
+

+ Thank you! We'll get back to you within 24 hours. +