index.tsx 1.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657
  1. import { GoogleAnalytics } from "@next/third-parties/google";
  2. import clsx from "clsx";
  3. import { Red_Hat_Text, Red_Hat_Mono } from "next/font/google";
  4. import { ThemeProvider } from "next-themes";
  5. import type { ReactNode } from "react";
  6. import {
  7. IS_PRODUCTION_SERVER,
  8. GOOGLE_ANALYTICS_ID,
  9. AMPLITUDE_API_KEY,
  10. WALLETCONNECT_PROJECT_ID,
  11. } from "../../server-config";
  12. import { Amplitude } from "../Amplitude";
  13. import { HighlighterProvider } from "../Code/use-highlighted-code";
  14. import { EvmProvider } from "../EvmProvider";
  15. import { Footer } from "../Footer";
  16. import { Header } from "../Header";
  17. import { ReportAccessibility } from "../ReportAccessibility";
  18. const redHatText = Red_Hat_Text({
  19. subsets: ["latin"],
  20. variable: "--font-sans",
  21. });
  22. const redHatMono = Red_Hat_Mono({
  23. subsets: ["latin"],
  24. variable: "--font-mono",
  25. });
  26. type Props = {
  27. children: ReactNode;
  28. };
  29. export const Root = ({ children }: Props) => (
  30. <html
  31. lang="en"
  32. dir="ltr"
  33. className={clsx("h-dvh", redHatText.variable, redHatMono.variable)}
  34. // See https://github.com/pacocoursey/next-themes?tab=readme-ov-file#with-app
  35. suppressHydrationWarning
  36. >
  37. <body className="grid size-full grid-cols-1 grid-rows-[max-content_1fr_max-content] bg-white text-pythpurple-950 dark:bg-pythpurple-900 dark:text-white">
  38. <ThemeProvider attribute="class">
  39. <HighlighterProvider>
  40. <EvmProvider walletConnectProjectId={WALLETCONNECT_PROJECT_ID}>
  41. <Header className="z-10 border-b border-neutral-400 dark:border-neutral-600" />
  42. <div className="size-full">{children}</div>
  43. <Footer className="z-10 border-t border-neutral-400 dark:border-neutral-600" />
  44. </EvmProvider>
  45. </HighlighterProvider>
  46. </ThemeProvider>
  47. </body>
  48. {GOOGLE_ANALYTICS_ID && <GoogleAnalytics gaId={GOOGLE_ANALYTICS_ID} />}
  49. {AMPLITUDE_API_KEY && <Amplitude apiKey={AMPLITUDE_API_KEY} />}
  50. {!IS_PRODUCTION_SERVER && <ReportAccessibility />}
  51. </html>
  52. );