weather widget

2024-07-30 11:32:29 +05:00
parent 354d0e7d2d
commit a460d2e840
2 changed files with 51 additions and 0 deletions
@@ -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;