spotube/website/pages/_app.tsx
2022-09-23 13:39:39 +06:00

137 lines
3.6 KiB
TypeScript
Executable File

import "../styles/globals.css";
import type { AppProps } from "next/app";
import {
ChakraProvider,
extendTheme,
withDefaultColorScheme,
} from "@chakra-ui/react";
import Navbar from "components/Navbar";
import { chakra } from "@chakra-ui/react";
import { mode } from "@chakra-ui/theme-tools";
import Head from "next/head";
import { useRouter } from "next/router";
// import Script from "next/script";
// import * as gtag from "configurations/gtag";
// import AdDetector from "components/AdDetector";
import Footer from "components/Footer";
import NextNProgress from "nextjs-progressbar";
const customTheme = extendTheme(
{
styles: {
global: (props: any) => ({
body: {
bg: mode("white", "#171717")(props),
},
}),
},
colors: {
green: {
50: "#d4f3df",
100: "#b7ecca",
200: "#9be4b4",
300: "#61d48a",
400: "#45cd74",
500: "#32ba62",
600: "#2b9e53",
700: "#238144",
800: "#1b6435",
900: "#134826",
},
components: {
Link: {
baseStyle: {
color: "green",
},
},
},
},
},
withDefaultColorScheme({ colorScheme: "green" })
);
function MyApp({ Component, pageProps }: AppProps) {
const router = useRouter();
// useEffect(() => {
// const handleRouteChange = (url: string) => {
// gtag.pageview(url);
// };
// router.events.on("routeChangeComplete", handleRouteChange);
// router.events.on("hashChangeComplete", handleRouteChange);
// return () => {
// router.events.off("routeChangeComplete", handleRouteChange);
// router.events.off("hashChangeComplete", handleRouteChange);
// };
// }, [router.events]);
return (
<>
{/* <Script
async
onError={(e) => {
console.error("Script failed to load", e);
}}
src={`https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=${process.env.NEXT_PUBLIC_ADSENSE_ID}`}
crossOrigin="anonymous"
/> */}
{/* Global Site Tag (gtag.js) - Google Analytics */}
{/* <Script
strategy="afterInteractive"
src={`https://www.googletagmanager.com/gtag/js?id=${gtag.GA_TRACKING_ID}`}
/> */}
{/* <Script
id="gtag-init"
strategy="afterInteractive"
dangerouslySetInnerHTML={{
__html: `
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', '${gtag.GA_TRACKING_ID}', {
page_path: window.location.pathname,
});
`,
}}
/> */}
<ChakraProvider theme={customTheme}>
<Head>
<link
rel="apple-touch-icon"
sizes="180x180"
href="/apple-touch-icon.png"
/>
<link
rel="icon"
type="image/png"
sizes="32x32"
href="/favicon-32x32.png"
/>
<link
rel="icon"
type="image/png"
sizes="16x16"
href="/favicon-16x16.png"
/>
<link rel="manifest" href="/site.webmanifest" />
<title>Spotube</title>
</Head>
<NextNProgress color="#45cd74" />
<chakra.div
minH="100vh"
display="flex"
flexDir="column"
justifyContent="space-between"
>
<div>
<Navbar />
<Component {...pageProps} />
</div>
<Footer />
</chakra.div>
</ChakraProvider>
</>
);
}
export default MyApp;