weather widget

client/src/components/masterplanPage/map/Map.tsx

@@ -8,6 +8,7 @@ import ZoomControlls from "./ZoomControlls";
 import { Clouds } from "./Clouds";
 import { getWeather } from "../../../api/weather";
 import { useEffect } from "react";
+import WeatherWidget from "./WeatherWidget";
 
 const Map = () => {
   const { hoveredMarker } = useMarker();
@@ -40,6 +41,7 @@ const Map = () => {
           animationTime: 500,
         }}
       >
+        <WeatherWidget />
         <ZoomControlls />
         <TransformComponent
           wrapperStyle={{

client/src/components/masterplanPage/map/WeatherWidget.tsx

@@ -0,0 +1,49 @@
+import { useEffect, useState } from "react";
+import { getWeather } from "../../../api/weather";
+
+const WeatherWidget = () => {
+  const [temperature, setTemperature] = useState(0);
+
+  const date = new Date();
+
+  const day = date.toLocaleDateString("en-US", {
+    weekday: "short",
+  });
+  const month = date.toLocaleDateString("en-US", {
+    month: "short",
+  });
+
+  const hours = date.getHours() > 12 ? date.getHours() - 12 : date.getHours();
+  const minutes = String(date.getMinutes()).padStart(2, "0");
+  const dayPart = `${date.getHours() >= 12 ? "PM" : "AM"}`;
+  const formattedTime = `${hours}:${minutes}`;
+
+  useEffect(() => {
+    getWeather().then((data) => {
+      const temp = Math.round(data[0].main.temp);
+      setTemperature(temp);
+    });
+
+    return () => {};
+  }, []);
+
+  return (
+    <div className="absolute top-[73.5px] left-4 bg-black rounded-lg z-50 text-white bg-opacity-40 w-[144px] py-2">
+      <div className="flex justify-between px-2 text-[14px] font-medium">
+        <p>{day}</p>
+        <p>{formattedTime}</p>
+      </div>
+      <div className="flex justify-between px-2 text-[12px] opacity-60 py-1 border-b font-medium">
+        <p>
+          {date.getDate()} {month}
+        </p>
+        <p>{dayPart}</p>
+      </div>
+      <div className="pt-2 px-2">
+        <p className="text-[32px] font-medium">{temperature}°C</p>
+      </div>
+    </div>
+  );
+};
+
+export default WeatherWidget;