feat(): Adding a hider

Author: ar1603

src/router/PublicRoutes.tsx

@@ -1,25 +1,36 @@
 import {
   Navigate,
+  Outlet,
   Route,
   createBrowserRouter,
   createRoutesFromChildren,
 } from 'react-router-dom';
-import { LazyHostScreen } from './lazyScreen';
+import { LazyHiderScreen, LazyHostScreen } from './lazyScreen';
 import MainScreen from '../screens/mainFlow/MainScreen';
 import ArticlesScreen from '../screens/articles/ArticlesScreen';
 import ProjectsScreen from '../screens/projects/ProjectsScreen';
 import ArticleEditor from '@screens/articleEditor/ArticleEditor';
 
 const publicRouter = createBrowserRouter(
   createRoutesFromChildren(
-    <Route path="/" element={<LazyHostScreen />}>
-      <Route path="" element={<MainScreen />} />
-      <Route path="articles" element={<ArticlesScreen />} />
-      <Route path="privateRoute" element={<ArticleEditor />} />
-      <Route path="projects" element={<ProjectsScreen />}>
-        <Route path=":id" element={<ProjectsScreen />} />
+    <Route
+      path=""
+      element={
+        <>
+          <Outlet />
+        </>
+      }
+    >
+      <Route path="" element={<LazyHiderScreen />} />
+      <Route path="version2" element={<LazyHostScreen />}>
+        <Route path="" element={<MainScreen />} />
+        <Route path="articles" element={<ArticlesScreen />} />
+        <Route path="privateRoute" element={<ArticleEditor />} />
+        <Route path="projects" element={<ProjectsScreen />}>
+          <Route path=":id" element={<ProjectsScreen />} />
+        </Route>
+        <Route path="*" element={<Navigate to="/" replace />} />
       </Route>
-      <Route path="*" element={<Navigate to="/" replace />} />
     </Route>,
   ),
 );

src/router/lazyScreen/LazyMainFlowScreen.tsx

@@ -10,3 +10,13 @@ export const LazyHostScreen = () => {
     </LazyComponentProvider>
   );
 };
+
+const HiderScreen = lazy(() => import('@screens/hider/Hider'));
+
+export const LazyHiderScreen = () => {
+  return (
+    <LazyComponentProvider>
+      <HiderScreen />
+    </LazyComponentProvider>
+  );
+};

src/screens/hider/Hider.tsx

@@ -0,0 +1,25 @@
+import { Box, Text } from '@chakra-ui/react';
+import { TitleBoxContainer } from '@components';
+
+const Hider = () => {
+  return (
+    <TitleBoxContainer title={'Wrong turn 🚧'} bg={'black'}>
+      <Box
+        width={'100vw'}
+        height={'100vh'}
+        bg={'black'}
+        display={'flex'}
+        justifyContent={'center'}
+        alignItems={'center'}
+      >
+        <Text color={'white'} textAlign={'center'} fontSize={'2xl'}>
+          You cannot access this website until you know the person personally 😝
+          <br />
+          This is temporary🚧, I will remove this soon⏳.
+        </Text>
+      </Box>
+    </TitleBoxContainer>
+  );
+};
+
+export default Hider;