38 lines
1.1 KiB
TypeScript
38 lines
1.1 KiB
TypeScript
import { format } from "date-fns";
|
|
import { toZonedTime } from "date-fns-tz";
|
|
|
|
export default function WeatherWidget({
|
|
temperature,
|
|
}: {
|
|
temperature: number;
|
|
}) {
|
|
const timeZone = "Asia/Dubai";
|
|
const newDate = new Date();
|
|
const dubaiDate = toZonedTime(newDate, timeZone);
|
|
|
|
const day = format(dubaiDate, "EEE");
|
|
const month = format(dubaiDate, "MMM");
|
|
const date = format(dubaiDate, "d");
|
|
const time = format(dubaiDate, "h:mm");
|
|
const dayPart = format(dubaiDate, "a");
|
|
|
|
return (
|
|
<div className="absolute left-[2.222vw] top-[2.222vw] rounded-2xl space-y-4 min-w-[200px] w-[8.333vw] p-4 font-medium text-white bg-black bg-opacity-40 pointer-events-none max-[1440px]:hidden backdrop-blur-2xl">
|
|
<div>
|
|
<div className="flex justify-between">
|
|
<p>{day}</p>
|
|
<p>{time}</p>
|
|
</div>
|
|
<div className="flex justify-between opacity-60">
|
|
<p>
|
|
{date} {month}
|
|
</p>
|
|
<p>{dayPart}</p>
|
|
</div>
|
|
</div>
|
|
<hr className="-mx-4 border-white" />
|
|
<p className="text-[32px]">{temperature}°C</p>
|
|
</div>
|
|
);
|
|
}
|