import type { AppProps } from "next/app";
import { ClerkProvider, SignedIn } from "@clerk/nextjs";
import { useRouter } from "next/router";
import SignUpPage from "./sign-up/[[...index]]";
import SignInPage from "./sign-in/[[...index]]";
import { api } from "~/utils/api";

import "../styles/globals.css";
import "../styles/App.css";

const publicPages = ['/contactUs']

function MyApp({ Component, pageProps }: AppProps) {
  const router = useRouter();

  if (publicPages.includes(router.pathname)) {
    return (
      <main>
        <Component {...pageProps} />
      </main>
    );
  } else {
    return (
      <ClerkProvider theme={theme} {...pageProps}>
        <main>
          <SignedIn>
            <Component {...pageProps} />
          </SignedIn>
          {router.pathname.match("/sign-up") ? <SignUpPage /> : <SignInPage />}
        </main>
        <footer>
        </footer>
      </ClerkProvider>
    );
  }
}

export default api.withTRPC(MyApp);

import type { AppProps } from "next/app";
import { ClerkProvider, SignedIn } from "@clerk/nextjs";
import { useRouter } from "next/router";
import SignUpPage from "./sign-up/[[...index]]";
import SignInPage from "./sign-in/[[...index]]";
import { api } from "~/utils/api";

import "../styles/globals.css";
import "../styles/App.css";

const publicPages = ['/contactUs']

function MyApp({ Component, pageProps }: AppProps) {
  const router = useRouter();

  if (publicPages.includes(router.pathname)) {
    return (
      <main>
        <Component {...pageProps} />
      </main>
    );
  } else {
    return (
      <ClerkProvider theme={theme} {...pageProps}>
        <main>
          <SignedIn>
            <Component {...pageProps} />
          </SignedIn>
          {router.pathname.match("/sign-up") ? <SignUpPage /> : <SignInPage />}
        </main>
        <footer>
        </footer>
      </ClerkProvider>
    );
  }
}

export default api.withTRPC(MyApp);