contact add to telegram bot

components/pageParts/contact.tsx

@@ -1,28 +1,83 @@
+"use client";
+
+import { useTranslation } from "react-i18next";
 import Text from "../lib_components/text";
+import axios from "axios";
+import { FormEvent } from "react";
 
 export default function Contact() {
-  return (
-    <section dir="ltr" className="relative w-full bg-primary py-20 flex justify-center mt-40 px-4">
-      <div className="mx-auto absolute z-20 -top-25 bg-secondary max-w-[1200px] w-full py-10 flex flex-col items-center clip-trapezoid">
-        <div id="contactClip" className="w-full flex flex-col items-center justify-center">
-          <h2 className="text-2xl md:text-3xl font-bold text-primary mb-5 text-center">
-          <Text txt="contact-h2"/>
-        </h2>
+  const { t } = useTranslation();
 
-        {/* Input va Button bloki */}
-        <div className="flex max-sm:flex-col gap-5 w-full max-w-2xl px-4">
-          <input
-            type="text"
-            placeholder="Your phone number"
-            className="flex-1 py-3 px-5 bg-white text-gray-600 placeholder-gray-400 text-lg clip-input focus:outline-none"
-          />
-          <button className="bg-primary sm:-ml-5 text-white sm:px-6 sm:py-3 p-2 text-lg font-medium clip-button">
-            <Text txt="call"/>
-          </button>
-        </div>
+  const sendMessage = async (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+
+    const form = event.currentTarget;
+    const nameInput = form.elements.namedItem("name") as HTMLInputElement;
+    const name = nameInput?.value?.trim();
+
+    if (!name) {
+      alert("Iltimos, telefon raqamingizni kiriting!");
+      return;
+    }
+
+    try {
+      const token = "7940057045:AAHRFPvgUCo_7pqpXD6uq4li7-_DYx2J96g"; // Use environment variable
+      const chatId = 6134458285;
+
+      if (!token || !chatId) {
+        throw new Error("Telegram token yoki chat ID topilmadi!");
+      }
+
+      const message = `📞 Yangi kontakt: ${name}`;
+
+      await axios.post(`https://api.telegram.org/bot${token}/sendMessage`, {
+        chat_id: chatId,
+        text: message,
+      });
+
+      alert("✅ Muvaffaqiyatli yuborildi!");
+      form.reset();
+    } catch (error) {
+      console.error("Yuborishda xatolik:", error);
+      alert("❌ Yuborishda xatolik yuz berdi!");
+    }
+  };
+
+  return (
+    <section
+      dir="ltr"
+      className="relative w-full bg-primary py-20 flex justify-center mt-40 px-4"
+    >
+      <div className="mx-auto absolute z-20 -top-25 bg-secondary max-w-[1200px] w-full py-10 flex flex-col items-center clip-trapezoid">
+        <div
+          id="contactClip"
+          className="w-full flex flex-col items-center justify-center"
+        >
+          <h2 className="text-2xl md:text-3xl font-bold text-primary mb-5 text-center">
+            <Text txt="contact-h2" />
+          </h2>
+
+          {/* Form */}
+          <form
+            className="flex max-sm:flex-col gap-5 w-full max-w-2xl px-4"
+            onSubmit={sendMessage}
+          >
+            <input
+              type="text"
+              name="name"
+              placeholder="Your phone number"
+              required
+              className="flex-1 py-3 px-5 bg-white text-gray-600 placeholder-gray-400 text-lg clip-input focus:outline-none"
+            />
+            <button
+              type="submit"
+              className="bg-primary sm:-ml-5 text-white sm:px-6 sm:py-3 p-2 text-lg font-medium clip-button"
+            >
+              {t("call")}
+            </button>
+          </form>
         </div>
       </div>
-      {/* <div className="bg-[#d38307] clip-part absolute -top-25 py-[50px] px-18 left-[97px] z-10" ></div> */}
     </section>
   );
 }