95 lines
3.2 KiB
TypeScript
95 lines
3.2 KiB
TypeScript
"use client";
|
|
|
|
import "tailwindcss/tailwind.css";
|
|
|
|
import Script from "next/script";
|
|
import React, { Suspense, useEffect, useState } from "react";
|
|
import NightModeToggle from "@/components/NightModeToggle";
|
|
import Navbar from "@/components/NavigationBar";
|
|
import KofiWidget from "@/components/KofiWidget";
|
|
|
|
export default function RootLayout({ children }: { children: React.ReactNode }) {
|
|
const [isDarkMode, setIsDarkMode] = useState(false);
|
|
|
|
useEffect(() => {
|
|
const savedTheme = localStorage.getItem("theme");
|
|
const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
|
|
|
|
const shouldEnableDark = savedTheme === "dark" || (!savedTheme && prefersDark);
|
|
setIsDarkMode(shouldEnableDark);
|
|
|
|
if (shouldEnableDark) {
|
|
document.documentElement.classList.add("dark");
|
|
} else {
|
|
document.documentElement.classList.remove("dark");
|
|
}
|
|
}, []);
|
|
|
|
const toggleDarkMode = () => {
|
|
const newTheme = isDarkMode ? "light" : "dark";
|
|
setIsDarkMode(!isDarkMode);
|
|
localStorage.setItem("theme", newTheme);
|
|
|
|
document.documentElement.classList.toggle("dark", !isDarkMode);
|
|
};
|
|
|
|
const Default_Fallback = () => (
|
|
<div className="flex items-center justify-center min-h-screen bg-gray-200 dark:bg-gray-800 text-gray-600 dark:text-gray-300">
|
|
<img
|
|
src="/logo.png" // Replace this with the actual path to your logo
|
|
alt="Loading..."
|
|
className="h-16 w-16 animate-bounce" // Add animation if desired
|
|
/>
|
|
<span className="ml-3 text-lg">Loading content...</span>
|
|
</div>
|
|
)
|
|
|
|
return (
|
|
<html lang="en" className={isDarkMode ? "dark" : ""} suppressHydrationWarning>
|
|
<head>
|
|
<script
|
|
dangerouslySetInnerHTML={{
|
|
__html: `
|
|
(function() {
|
|
const savedTheme = localStorage.getItem('theme');
|
|
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
|
|
if (savedTheme === 'dark' || (!savedTheme && prefersDark)) {
|
|
document.documentElement.classList.add('dark');
|
|
} else {
|
|
document.documentElement.classList.remove('dark');
|
|
}
|
|
})();
|
|
`,
|
|
}}
|
|
/>
|
|
<Script
|
|
async
|
|
src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1843060382170565"
|
|
crossOrigin="anonymous"></Script>
|
|
<Script
|
|
src="https://www.googletagmanager.com/gtag/js?id=GTM-5GC99LSP"
|
|
strategy="afterInteractive"
|
|
/>
|
|
<Script id="google-analytics" strategy="afterInteractive">
|
|
{`
|
|
window.dataLayer = window.dataLayer || [];
|
|
function gtag(){dataLayer.push(arguments);}
|
|
gtag('js', new Date());
|
|
gtag('config', 'GTM-5GC99LSP');
|
|
`}
|
|
</Script>
|
|
</head>
|
|
<body className="bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-gray-100 min-h-screen">
|
|
<KofiWidget />
|
|
<Navbar />
|
|
<Suspense fallback={<Default_Fallback />}>
|
|
<main className="relative">{children}</main>
|
|
</Suspense>
|
|
<div className="fixed bottom-4 right-4">
|
|
<NightModeToggle isDarkMode={isDarkMode} toggleDarkMode={toggleDarkMode} />
|
|
</div>
|
|
</body>
|
|
</html>
|
|
);
|
|
}
|