Layout.tsx

import { ReactNode } from "react"
import Navbar from "./Navbar"
import { useUser } from "@clerk/remix"
import { Toaster } from "./ui/toaster"
import Spinner from "./Spinner"
import { PosthogPageview } from "~/posthog/PosthogPageview"
import OnboardingDialog from "./OnboardingDialog"
import { useLoaderData } from "@remix-run/react"
import { clerkLoader } from "~/loaders"
import { useQuery } from "convex/react"
import { api } from "convex/_generated/api"

type Props = {
  children: ReactNode
}


function Layout({ children }: Props) {
  const { userId } = useLoaderData<typeof clerkLoader>()
  const { isLoaded } = useUser()

  const isUserActive = useQuery(api.users.isActive, {
    clerkUserId: userId
  })

  if(!isLoaded || !isUserActive) {
    return (
      <div className="flex items-center justify-center">
        <Spinner />
      </div>
    )
  }

  return (
    <div className="flex flex-col justify-center md:mx-0">
      <Navbar />
      <div className="w-full px-4 flex flex-col justify-center mx-auto">
        <div className="max-w-[1280px] w-full mx-auto">
          { children }
        </div>
      </div>
      <Toaster />
      <PosthogPageview />
      <OnboardingDialog />
    </div>
  )
}

export default Layout