75 lines
2.1 KiB
TypeScript
75 lines
2.1 KiB
TypeScript
|
"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>
|
||
|
|
);
|
||
|
|
}
|