1 files changed, 47 insertions, 0 deletions
diff --git a/app/components/DateWeatherLinks.tsx b/app/components/DateWeatherLinks.tsx
new file mode 100644
index 0000000..1c004fa
--- /dev/null
+++ b/app/components/DateWeatherLinks.tsx
@@ -0,0 +1,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>
+  );
+}