1 files changed, 74 insertions, 0 deletions
diff --git a/app/page.tsx b/app/page.tsx
new file mode 100644
index 0000000..8584df0
--- /dev/null
+++ b/app/page.tsx
@@ -0,0 +1,74 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { useTheme } from "next-themes";
+import DateWeatherLinks from "./components/DateWeatherLinks";
+import WhoisChart from "./components/WhoisChart";
+import {
+  Data,
+  DataContext,
+  fetchWeather,
+  fetchWhois,
+} from "@/lib/data-context";
+
+export default function Home() {
+  // god i hate next.
+  const [mounted, setMounted] = useState<boolean>(false);
+  const { theme, setTheme } = useTheme();
+  const [data, setData] = useState<Data>({});
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  useEffect(() => {
+    const update = () =>
+      fetchWeather().then((weather) =>
+        setData((data) => data && { ...data, weather })
+      );
+    update();
+    const interval = setInterval(update, 5 * 60_000); // 5 mins
+    return () => clearInterval(interval);
+  }, []);
+
+  useEffect(() => {
+    const update = () =>
+      fetchWhois().then((whois) =>
+        setData((data) => data && { ...data, whois })
+      );
+    update();
+    const interval = setInterval(update, 5 * 1_000); // 5 seconds
+    return () => clearInterval(interval);
+  }, []);
+
+  if (!mounted) return null;
+
+  return (
+    <DataContext.Provider value={data}>
+      <div className="min-h-screen p-8">
+        <div className="max-w-4xl mx-auto">
+          <header className="glass p-6 flex justify-between items-center mb-8">
+            <h1 className="text-4xl font-bold text-gray-800 dark:text-gray-100">
+              🐧 Penguin New Tab
+            </h1>
+            <button
+              onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
+              className="p-2 rounded-full bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200"
+            >
+              {theme === "dark" ? "🌙" : "☀️"}
+            </button>
+          </header>
+          <main className="space-y-8">
+            <DateWeatherLinks />
+            <WhoisChart />
+          </main>
+          <footer className="mt-8 text-center">
+            <p className="text-sm text-gray-600 dark:text-gray-400">
+              Made with 💖 by Penguin Lovers
+            </p>
+          </footer>
+        </div>
+      </div>
+    </DataContext.Provider>
+  );
+}