39 lines
1.1 KiB
TypeScript
39 lines
1.1 KiB
TypeScript
export default function WeatherWidget({
|
|
temperature,
|
|
}: {
|
|
temperature: number;
|
|
}) {
|
|
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}`;
|
|
|
|
return (
|
|
<div className="absolute left-[2.222vw] top-[2.222vw] rounded-2xl space-y-4 min-w-50 w-[8.333vw] p-4 font-medium text-white bg-black/40 pointer-events-none max-[1440px]:hidden backdrop-blur-2xl">
|
|
<div>
|
|
<div className="flex justify-between">
|
|
<p>{day}</p>
|
|
<p>{formattedTime}</p>
|
|
</div>
|
|
<div className="opacity-60 flex justify-between">
|
|
<p>
|
|
{date.getDate()} {month}
|
|
</p>
|
|
<p>{dayPart}</p>
|
|
</div>
|
|
</div>
|
|
<hr className="-mx-4 border-white" />
|
|
<p className="text-[32px]">{temperature}°C</p>
|
|
</div>
|
|
);
|
|
}
|