DevEvent_Tracker/app/layout.tsx at e86b8f8eb04145c0806865c89a78d88f960900ef · AnushkaWagh03/DevEvent_Tracker · GitHub

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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
import type { Metadata } from "next";
import { Suspense } from "react";
import "./globals.css";
import LightRays from "../components/LightRays";
import Navbar from "../components/Navbar";
import { PostHogProvider } from "./providers";
import { Toaster } from "sonner";
import BackToTop from '../components/BackToTop';

const themeScript = `
  try {
    const savedTheme = localStorage.getItem('devevent-theme');
    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
    const theme = savedTheme === 'light' || savedTheme === 'dark'
      ? savedTheme
      : (prefersDark ? 'dark' : 'light');
    document.documentElement.classList.toggle('dark', theme === 'dark');
    document.documentElement.dataset.theme = theme;
  } catch (_) {}
`;
export const metadata: Metadata = {
  title: "DevEvent",
  description: "The Hub for Every Dev Event that you Mustn't Miss",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en" suppressHydrationWarning>
      <head>
        <script dangerouslySetInnerHTML={{ __html: themeScript }} />
      </head>
      <body>
        <Toaster richColors position="top-right" />
        <Suspense fallback={null}>
          <PostHogProvider>
            <Navbar />
            <div className="absolute inset-0 top-0 z-[-1] min-h-screen pointer-events-none">
              <LightRays
                raysOrigin="top-center-offset"
                raysColor="#5dfeca"
                raysSpeed={0.5}
                lightSpread={0.9}
                rayLength={1.4}
                followMouse={true}
                mouseInfluence={0.02}
                noiseAmount={0}
                distortion={0}
                className="custom-rays"
                pulsating={false}
                fadeDistance={1}
                saturation={1}
              />
            </div>
            <main>
              {children}
            </main>
            <BackToTop/>
          </PostHogProvider>
        </Suspense>
      </body>
    </html>
  );
}