contact add to telegram bot
This commit is contained in:
@@ -39,12 +39,12 @@ export default function ProductCard({ data }: { data: ProductTypes }) {
|
||||
|
||||
{/* Pastki qism - matn */}
|
||||
<div className="bg-[#fafafa] w-full py-5 rounded-b-lg flex flex-col items-center justify-center space-y-1">
|
||||
<p className="font-medium text-gray-800 text-lg text-center">
|
||||
<div className="font-medium text-gray-800 text-lg text-center">
|
||||
<Text txt={data.truck_name} />
|
||||
</p>
|
||||
<p className="text-secondary text-sm text-center">
|
||||
</div>
|
||||
<div className="text-secondary text-sm text-center">
|
||||
<Text txt={data.desc} />
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
</motion.div>
|
||||
|
||||
@@ -14,7 +14,7 @@ declare global {
|
||||
type Props = { lat?: number; lng?: number; zoom?: number };
|
||||
|
||||
export default function GoogleMap({
|
||||
lat = 41.2628056, // rasmda ko‘rsatilgan koordinata (41°15'46.1"N 69°13'08.8"E)
|
||||
lat = 41.2628056,
|
||||
lng = 69.2191111,
|
||||
zoom = 17,
|
||||
}: Props) {
|
||||
@@ -28,24 +28,24 @@ export default function GoogleMap({
|
||||
const map = new google.maps.Map(mapRef.current, {
|
||||
center,
|
||||
zoom,
|
||||
mapTypeControl: true, // 🛰 Satellite tugmasi
|
||||
streetViewControl: true, // Street View tugmasi
|
||||
fullscreenControl: true, // Fullscreen
|
||||
zoomControl: true, // Zoom tugmalari
|
||||
mapTypeControl: true,
|
||||
streetViewControl: true,
|
||||
fullscreenControl: true,
|
||||
zoomControl: true,
|
||||
mapTypeControlOptions: {
|
||||
style: google.maps.MapTypeControlStyle.DEFAULT,
|
||||
position: google.maps.ControlPosition.RIGHT_BOTTOM, // Chap pastga Satellite
|
||||
position: google.maps.ControlPosition.RIGHT_BOTTOM,
|
||||
},
|
||||
});
|
||||
|
||||
// 📌 Marker
|
||||
new google.maps.Marker({
|
||||
position: center,
|
||||
// ✅ Yangi marker usuli
|
||||
new google.maps.marker.AdvancedMarkerElement({
|
||||
map,
|
||||
position: center,
|
||||
title: "Bizning manzil",
|
||||
});
|
||||
|
||||
// 🧭 Koordinata oynasini yaratamiz
|
||||
// 🧭 Qo‘shimcha koordinata oynasi
|
||||
const coordDiv = document.createElement("div");
|
||||
coordDiv.style.background = "#fff";
|
||||
coordDiv.style.padding = "15px 30px";
|
||||
@@ -59,19 +59,17 @@ export default function GoogleMap({
|
||||
`;
|
||||
map.controls[google.maps.ControlPosition.TOP_LEFT].push(coordDiv);
|
||||
};
|
||||
|
||||
if (window.google && window.google.maps && typeof window.initMap === "function") {
|
||||
window.initMap();
|
||||
}
|
||||
}, [lat, lng, zoom]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Script
|
||||
src={`https://maps.googleapis.com/maps/api/js?key=${process.env.NEXT_PUBLIC_GOOGLE_MAPS_API_KEY}&callback=initMap`}
|
||||
async
|
||||
defer
|
||||
src={`https://maps.googleapis.com/maps/api/js?key=AIzaSyARZe3FPgMT0p-CwDD-iYvpz2Mh8jkUxR0&callback=initMap&libraries=marker`}
|
||||
strategy="afterInteractive"
|
||||
/>
|
||||
<div ref={mapRef} style={{ width: "100%", height: "600px", overflow: "hidden" }} />
|
||||
<div ref={mapRef} style={{ width: "100%", height: "600px" }} />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user