import { type AppType } from "next/app";
import { type Session } from "next-auth";
import { SessionProvider, useSession } from "next-auth/react";
import { api } from "~/utils/api";
import "~/styles/globals.css";
import { StyledEngineProvider } from "@mui/joy/styles";
import { CssVarsProvider } from "@mui/joy/styles";
import GlobalStyles from "@mui/joy/GlobalStyles";
import CssBaseline from "@mui/joy/CssBaseline";
import customTheme from "~/theme";
import Navigation from "~/components/Navigation";
import Header from "~/components/Header";
import Box from "@mui/joy/Box";
import Head from "next/head";
const MyApp: AppType<{ session: Session | null }> = ({
Component,
pageProps: { session, ...pageProps },
}) => {
return (
<>
MF Store
({
px: {
xs: 2,
md: 6,
},
pt: {
xs: `calc(${theme.spacing(2)} + var(--Header-height))`,
sm: `calc(${theme.spacing(2)} + var(--Header-height))`,
md: 3,
},
pb: {
xs: 2,
sm: 2,
md: 3,
},
flex: 1,
display: "flex",
flexDirection: "column",
minWidth: 0,
height: "100dvh",
gap: 1,
})}
>
);
};
export default api.withTRPC(MyApp);
function Auth({ children }) {
// if `{ required: true }` is supplied, `status` can only be "loading" or "authenticated"
const { status } = useSession({ required: true });
if (status === "loading") {
return Loading...
;
}
return children;
}