From 055455db6e61c45c6442d63d3e4c28fc488b7bdb Mon Sep 17 00:00:00 2001
From: Thatsaphorn Atchariyaphap <thatsaphorn@outlook.de>
Date: Mon, 21 Apr 2025 02:13:49 +0200
Subject: [PATCH]  Update object and function formatting

---
 .../Contact/Section/ContactFormSection.tsx    | 117 +++++++-----------
 1 file changed, 43 insertions(+), 74 deletions(-)

diff --git a/components/Contact/Section/ContactFormSection.tsx b/components/Contact/Section/ContactFormSection.tsx
index 15b336e..0e383f1 100644
--- a/components/Contact/Section/ContactFormSection.tsx
+++ b/components/Contact/Section/ContactFormSection.tsx
@@ -1,8 +1,8 @@
 'use client';
 
-import React, {useState} from "react";
-import {motion} from "framer-motion";
-import {useThemeColors} from "@/utils/useThemeColors";
+import React, { useState } from "react";
+import { motion } from "framer-motion";
+import { useThemeColors } from "@/utils/useThemeColors";
 import HCaptcha from "@hcaptcha/react-hcaptcha";
 
 const ContactFormSection = () => {
@@ -28,7 +28,7 @@ const ContactFormSection = () => {
         : "ES_ff59a664dc764f92870bf2c7b4eab7c5";
 
     const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
-        setForm({...form, [e.target.name]: e.target.value});
+        setForm({ ...form, [e.target.name]: e.target.value });
     };
 
     const handleSubmit = async (e: React.FormEvent) => {
@@ -45,18 +45,18 @@ const ContactFormSection = () => {
         try {
             const res = await fetch("/api/contact", {
                 method: "POST",
-                headers: {"Content-Type": "application/json"},
-                body: JSON.stringify({...form, captcha: captchaToken}),
+                headers: { "Content-Type": "application/json" },
+                body: JSON.stringify({ ...form, captcha: captchaToken }),
             });
 
             if (res.ok) {
                 setSubmitted(true);
-                setForm({name: "", email: "", company: "", phone: "", website: "", message: ""});
+                setForm({ name: "", email: "", company: "", phone: "", website: "", message: "" });
             } else {
                 const resJson = await res.json();
                 setError(resJson?.error || "Ein Fehler ist aufgetreten. Bitte versuche es später erneut.");
             }
-        } catch (err) {
+        } catch (_err) {
             setError("Serverfehler. Bitte versuche es später erneut.");
         }
 
@@ -67,77 +67,46 @@ const ContactFormSection = () => {
         <div className="w-full px-6 sm:px-12 py-20 text-left transition-theme">
             <motion.h2
                 className="text-2xl sm:text-3xl font-bold mb-2"
-                style={{color: colors.primaryText}}
-                initial={{opacity: 0, y: 20}}
-                whileInView={{opacity: 1, y: 0}}
-                viewport={{once: true}}
-                transition={{duration: 0.5}}
+                style={{ color: colors.primaryText }}
+                initial={{ opacity: 0, y: 20 }}
+                whileInView={{ opacity: 1, y: 0 }}
+                viewport={{ once: true }}
+                transition={{ duration: 0.5 }}
             >
                 Schreib uns eine Nachricht
             </motion.h2>
 
             <motion.p
                 className="text-sm mb-8 max-w-xl"
-                style={{color: colors.secondaryText}}
-                initial={{opacity: 0, y: 10}}
-                whileInView={{opacity: 1, y: 0}}
-                viewport={{once: true}}
-                transition={{duration: 0.5, delay: 0.2}}
+                style={{ color: colors.secondaryText }}
+                initial={{ opacity: 0, y: 10 }}
+                whileInView={{ opacity: 1, y: 0 }}
+                viewport={{ once: true }}
+                transition={{ duration: 0.5, delay: 0.2 }}
             >
                 Wir freuen uns über dein Interesse und melden uns schnellstmöglich bei dir zurück.
             </motion.p>
 
             {submitted ? (
-                <div className="text-green-600 font-semibold text-lg">✅ Deine Nachricht wurde erfolgreich
-                    gesendet!</div>
+                <div className="text-green-600 font-semibold text-lg">✅ Deine Nachricht wurde erfolgreich gesendet!</div>
             ) : (
                 <form className="space-y-6" onSubmit={handleSubmit}>
                     <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                         {[
-                            {
-                                label: "Dein Name *",
-                                name: "name",
-                                type: "text",
-                                required: true,
-                                placeholder: "Max Mustermann"
-                            },
-                            {
-                                label: "Deine E-Mail *",
-                                name: "email",
-                                type: "email",
-                                required: true,
-                                placeholder: "max@example.com"
-                            },
-                            {
-                                label: "Firmenname (optional)",
-                                name: "company",
-                                type: "text",
-                                required: false,
-                                placeholder: "Mustermann GmbH"
-                            },
-                            {
-                                label: "Telefonnummer (optional)",
-                                name: "phone",
-                                type: "tel",
-                                required: false,
-                                placeholder: "+49 123 456789"
-                            },
-                            {
-                                label: "Webseite (optional)",
-                                name: "website",
-                                type: "url",
-                                required: false,
-                                placeholder: "https://..."
-                            },
+                            { label: "Dein Name *", name: "name", type: "text", required: true, placeholder: "Max Mustermann" },
+                            { label: "Deine E-Mail *", name: "email", type: "email", required: true, placeholder: "max@example.com" },
+                            { label: "Firmenname (optional)", name: "company", type: "text", required: false, placeholder: "Mustermann GmbH" },
+                            { label: "Telefonnummer (optional)", name: "phone", type: "tel", required: false, placeholder: "+49 123 456789" },
+                            { label: "Webseite (optional)", name: "website", type: "url", required: false, placeholder: "https://..." },
                         ].map((field, index) => (
                             <motion.div
                                 key={field.name}
-                                initial={{opacity: 0, y: 10}}
-                                whileInView={{opacity: 1, y: 0}}
-                                viewport={{once: true}}
-                                transition={{duration: 0.5, delay: index * 0.1}}
+                                initial={{ opacity: 0, y: 10 }}
+                                whileInView={{ opacity: 1, y: 0 }}
+                                viewport={{ once: true }}
+                                transition={{ duration: 0.5, delay: index * 0.1 }}
                             >
-                                <label className="block font-semibold mb-1" style={{color: colors.primaryText}}>
+                                <label className="block font-semibold mb-1" style={{ color: colors.primaryText }}>
                                     {field.label}
                                 </label>
                                 <input
@@ -159,12 +128,12 @@ const ContactFormSection = () => {
                     </div>
 
                     <motion.div
-                        initial={{opacity: 0, y: 10}}
-                        whileInView={{opacity: 1, y: 0}}
-                        viewport={{once: true}}
-                        transition={{duration: 0.5, delay: 0.6}}
+                        initial={{ opacity: 0, y: 10 }}
+                        whileInView={{ opacity: 1, y: 0 }}
+                        viewport={{ once: true }}
+                        transition={{ duration: 0.5, delay: 0.6 }}
                     >
-                        <label className="block font-semibold mb-1" style={{color: colors.primaryText}}>
+                        <label className="block font-semibold mb-1" style={{ color: colors.primaryText }}>
                             Deine Nachricht *
                         </label>
                         <textarea
@@ -185,12 +154,12 @@ const ContactFormSection = () => {
 
                     <motion.div
                         className="pt-2"
-                        initial={{opacity: 0, y: 10}}
-                        whileInView={{opacity: 1, y: 0}}
-                        viewport={{once: true}}
-                        transition={{duration: 0.5, delay: 0.7}}
+                        initial={{ opacity: 0, y: 10 }}
+                        whileInView={{ opacity: 1, y: 0 }}
+                        viewport={{ once: true }}
+                        transition={{ duration: 0.5, delay: 0.7 }}
                     >
-                        <HCaptcha sitekey={hCaptchaSiteKey} onVerify={setCaptchaToken}/>
+                        <HCaptcha sitekey={hCaptchaSiteKey} onVerify={setCaptchaToken} />
                     </motion.div>
 
                     {error && (
@@ -201,10 +170,10 @@ const ContactFormSection = () => {
 
                     <motion.div
                         className="pt-4 flex justify-end"
-                        initial={{opacity: 0, y: 10}}
-                        whileInView={{opacity: 1, y: 0}}
-                        viewport={{once: true}}
-                        transition={{duration: 0.5, delay: 0.8}}
+                        initial={{ opacity: 0, y: 10 }}
+                        whileInView={{ opacity: 1, y: 0 }}
+                        viewport={{ once: true }}
+                        transition={{ duration: 0.5, delay: 0.8 }}
                     >
                         <button
                             type="submit"