frontPanel/src/index.tsx

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import { BrowserRouter, Route, Routes } from 'react-router-dom';
import lightTheme from "./utils/themes/light";
import { ThemeProvider } from '@mui/material';
import CreateQuiz from './components/CreateQuiz/CreateQuiz';
import NavbarCreateQuiz from '@ui_kit/Header/NavbarCreateQuiz';
import darkTheme from "./utils/themes/dark";

import HorizontalLinearStepper from './ui_kit/Stepper';

import StartPage from "./pages/startPage/StartPage";
import Main from "./pages/main"
import FirstQuiz from "./pages/createQuize/FirstQuiz";
import QuestionsPage from "./pages/Questions/QuestionsPage";
import ContactFormPage from "./pages/ContactFormPage/ContactFormPage";
import InstallQuiz from "./pages/InstallQuiz/InstallQuiz";
import {Result} from "./pages/Result/Result";
import { Setting } from "./pages/Result/Setting";
import MyQuizzes from "./pages/createQuize/MyQuizzes";
import MyQuizzesFull from "./pages/createQuize/MyQuizzesFull";

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

const routeslink: {path: string; page: JSX.Element; header: boolean; sidebar: boolean} [] = [
    {path: "/", page: <Main/>, header: false, sidebar: false},
    {path: "/list", page: <FirstQuiz/>, header: false, sidebar: false},
    {path: "/list-empty", page: <FirstQuiz/>, header: false, sidebar: false},
    {path: "/list-full", page: <MyQuizzesFull/>, header: false, sidebar: false},
    {path: "/list-short", page: <MyQuizzes/>, header: false, sidebar: false},
    {path: "/create", page: <StartPage/>, header: true, sidebar: true},
    {path: "/questions", page: <QuestionsPage/>, header: true, sidebar: true},
    {path: "/contacts", page: <ContactFormPage/>, header: true, sidebar: true},
    {path: "/result", page: <Result/>, header: true, sidebar: true},
    {path: "/settings", page: <Setting />, header: true, sidebar: true},
    {path: "/install", page: <InstallQuiz/>, header: true, sidebar: true},
]

root.render(
    <React.StrictMode>
        <ThemeProvider theme={lightTheme}>
    <BrowserRouter>
        <Routes>
            {routeslink.map((e,i) =>(
                <Route key={i} path={e.path} element={e.page} header={e.header} sidebar={e.sidebar} />
            ))}
          {/*<Route path="/" element={ <Main /> }/>*/}
          {/*<Route path="/list" element={<FirstQuiz/>} />*/}
          {/*<Route path="/list-empty" element={<FirstQuiz/>} />*/}
          {/*<Route path="/list-full" element={<MyQuizzesFull/>} />*/}
          {/*<Route path="/list-short" element={<MyQuizzes/>} />*/}

          {/*<Route path="/create" element={<StartPage/>} />*/}
          {/*<Route path="/questions" element={<QuestionsPage/>} />*/}
          {/*<Route path='/contacts' element={<ContactFormPage/>} />*/}
          {/*<Route path='/result' element={<Result/>} />*/}
          {/*<Route path="/settings" element={<Setting />} />*/}
          {/*<Route path='/install' element={<InstallQuiz/>} />*/}

        </Routes>
    </BrowserRouter>
    </ThemeProvider>
  </React.StrictMode>
);



// <Route path="/quizes" element={<Quizes/>}/>
// <Route path="/projects" element={<Projects/>}  />
// <Route path="/gallery" element={<Gallery/>} />
// <Route path="/create/quiz" element={<><NavbarCreateQuiz /></>} />
// <Route path="/create/start" element={<><NavbarCreateQuiz /></>} />
// <Route path="/create/settings" element={<><NavbarCreateQuiz /><CreateQuiz /></>} />
// <Route path="/create/stepper" element={<><NavbarCreateQuiz /><HorizontalLinearStepper/></>} />