import useRouterStore from '@/useRouterStore'
import { defineComponent, Transition } from 'vue'
import UserPage from '@/user/UserPage'
import BackgroundPage from '@/layout/background/BackgroundPage'
import ThemeProvider from '@/utils/ThemeProvider'
import BlockSettings from '@/layout/grid/BlockSettings'
export default defineComponent(() => {
  const router = useRouterStore()
  return () => (
    <div class="w-0 h-full flex-grow bg-white/80 backdrop-blur">
      <ThemeProvider>
        <Transition>
          {router.path === 'settings-user' ? (
            <UserPage />
          ) : router.path === 'settings-background' ? (
            <BackgroundPage />
          ) : router.path === 'settings-block' ? (
            <BlockSettings />
          ) : null}
        </Transition>
      </ThemeProvider>
    </div>
  )
})