48 lines
1.4 KiB
TypeScript
48 lines
1.4 KiB
TypeScript
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 (
|
|
<div className="absolute top-[73.5px] left-4 bg-black rounded-2xl z-50 text-white bg-opacity-40 w-[144px] pt-4">
|
|
<div className="flex justify-between px-4 text-[14px] font-medium">
|
|
<p>{day}</p>
|
|
<p>{formattedTime}</p>
|
|
</div>
|
|
<div className="flex justify-between px-4 text-[12px] opacity-60 border-b font-medium pb-4">
|
|
<p>
|
|
{date.getDate()} {month}
|
|
</p>
|
|
<p>{dayPart}</p>
|
|
</div>
|
|
<div className="px-4 items-center flex pb-2 pt-2">
|
|
<p className="text-[32px] font-medium">{temperature}°C</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default WeatherWidget;
|