46 lines
1.3 KiB
TypeScript
46 lines
1.3 KiB
TypeScript
import { useEffect, useState } from "react";
|
|
import { getWeather } from "../api/weather";
|
|
|
|
export default function 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) => {
|
|
setTemperature(Math.round(data));
|
|
});
|
|
}, []);
|
|
|
|
return (
|
|
<div className="z-20 fixed left-10 top-10 rounded-2xl space-y-4 min-w-50 w-[7.5vw] p-4 font-medium text-white bg-black/40 pointer-events-none max-[1440px]:hidden">
|
|
<div>
|
|
<div className="flex justify-between">
|
|
<p>{day}</p>
|
|
<p>{formattedTime}</p>
|
|
</div>
|
|
<div className="flex justify-between opacity-60">
|
|
<p>
|
|
{date.getDate()} {month}
|
|
</p>
|
|
<p>{dayPart}</p>
|
|
</div>
|
|
</div>
|
|
<hr className="border-white -mx-4" />
|
|
<p className="text-[32px]">{temperature}°C</p>
|
|
</div>
|
|
);
|
|
}
|