systems-obscure/src/templates/MainTemplate.tsx

// @ts-nocheck
import { Header } from "@/components/Header"
import { ThemeProvider } from "@/context/ThemeProvider"
import { useTheme } from "@/context/ThemeProvider"

const MainTemplate = (props) => {
  return (
    <ThemeProvider defaultTheme="light" storageKey="vite-ui-theme">
      <MainContent>{props.children}</MainContent>
    </ThemeProvider>
  )
}

const MainContent = ({ children }) => {
  const { theme } = useTheme()
  const classes =
    theme === "light"
      ? "min-h-screen w-full flex flex-col overflow-x-hidden mb-15"
      : "min-h-screen w-full flex flex-col overflow-x-hidden mb-15"

  return (
    <div className={classes}>
      <Header />
      <main className="flex-1 w-full px-2 md:px-4 flex justify-center pt-22">
        <div className="w-full max-w-3xl lg:max-w-3xl xl:max-w-3xl px-2 md:px-4 md:py-3 py-0">
          {children}
        </div>
      </main>
    </div>
  )
}
export default MainTemplate