app/components/DateWeatherLinks.tsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

"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>
  );
}