48 lines
1.4 KiB
TypeScript
48 lines
1.4 KiB
TypeScript
|
"use client";
|
||
|
|
|
||
|
|
import { useState, useEffect, useContext } from "react";
|
||
|
|
import QuickLinks from "./QuickLinks";
|
||
|
|
import { DataContext } from "@/lib/data-context";
|
||
|
|
|
||
|
|
export default function DateWeatherLinksWelcome() {
|
||
|
|
const [date, setDate] = useState(new Date());
|
||
|
|
const data = useContext(DataContext);
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
const timer = setInterval(() => setDate(new Date()), 1000);
|
||
|
|
return () => clearInterval(timer);
|
||
|
|
}, []);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="glass rounded-lg p-6 shadow-lg">
|
||
|
|
<div className="flex justify-between items-center">
|
||
|
|
<div>
|
||
|
|
<h2 className="text-3xl font-bold text-gray-800 dark:text-gray-100">
|
||
|
|
{date.toLocaleDateString(undefined, {
|
||
|
|
weekday: "long",
|
||
|
|
year: "numeric",
|
||
|
|
month: "long",
|
||
|
|
day: "numeric",
|
||
|
|
})}
|
||
|
|
</h2>
|
||
|
|
<p className="text-xl text-gray-600 dark:text-gray-300">
|
||
|
|
{date.toLocaleTimeString()}
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
<div className="text-right">
|
||
|
|
<p className="text-4xl font-bold text-gray-800 dark:text-gray-100">
|
||
|
|
{data?.weather
|
||
|
|
? Math.round(data.weather.temperature * (9 / 5) + 32) + "°F"
|
||
|
|
: "--"}
|
||
|
|
</p>
|
||
|
|
<p className="text-xl text-gray-600 dark:text-gray-300">
|
||
|
|
{data?.weather ? data.weather.description : "--"}
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<br />
|
||
|
|
<QuickLinks />
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|