index.tsx

import React from 'react'
import ReactDOM, { Container } from 'react-dom/client'
import {
    Outlet,
    Route,
    RouterProvider,
    createBrowserRouter,
    createRoutesFromElements,
} from 'react-router-dom'
import './index.scss'
import Landingpage from './pages/landingpage/landingpage'
import LoginPage from './pages/login/login'

import './i18n/config'
import { I18nextProvider } from 'react-i18next'
import i18next from 'i18next'
import { Provider } from 'react-redux'
import { store } from './stores'

const root = ReactDOM.createRoot(document.getElementById('root') as Container)

// create a proper routing
const router = createBrowserRouter(
    createRoutesFromElements(
        <>
            <Route element={<Outlet />}>
                <Route path="/" element={<Landingpage />} />
                <Route path="/login" element={<LoginPage />} />
            </Route>
        </>
    )
)

root.render(
    <React.StrictMode>
        <Provider store={store}>
            <I18nextProvider i18n={i18next}>
                <RouterProvider router={router} />
            </I18nextProvider>
        </Provider>
    </React.StrictMode>
)