classify web

components/PagesComponent/ProductDetail/ProductLocation.jsx

@@ -0,0 +1,50 @@
+import { IoLocationOutline } from "react-icons/io5";
+import dynamic from "next/dynamic";
+import { t } from "@/utils";
+
+const Map = dynamic(() => import("@/components/Location/Map"), {
+  ssr: false,
+});
+
+const ProductLocation = ({ productDetails }) => {
+  const handleShowMapClick = () => {
+    const locationQuery = `${
+      productDetails?.translated_item?.address || productDetails?.address
+    }`;
+    const googleMapsUrl = `https://www.google.com/maps?q=${locationQuery}&ll=${productDetails?.latitude},${productDetails?.longitude}&z=12&t=m`;
+    window.open(googleMapsUrl, "_blank");
+  };
+
+  return (
+    <div className="flex flex-col border rounded-lg ">
+      <div className="p-4">
+        <p className="font-bold">{t("postedIn")}</p>
+      </div>
+      <div className="border-b w-full"></div>
+      <div className="flex flex-col p-4 gap-4">
+        <div className="flex items-start gap-2   ">
+          <IoLocationOutline size={22} className="mt-1" />
+          <p className="w-full overflow-hidden text-ellipsis">
+            {productDetails?.translated_address}
+          </p>
+        </div>
+        <div className="rounded-lg overflow-hidden">
+          <Map
+            latitude={productDetails?.latitude}
+            longitude={productDetails?.longitude}
+          />
+        </div>
+        <div>
+          <button
+            className="border px-4 py-2 rounded-md w-full flex items-center gap-2 text-base  justify-center"
+            onClick={handleShowMapClick}
+          >
+            {t("showOnMap")}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ProductLocation;