1import { Navigate } from 'react-router-dom';
2
3export const ProtectedRoute = ({ user,children }) => {
4  if (!user) {
5   return <Navigate to="/login" replace />;
6    }
7  return children;
8  };
9

1          <Routes>
2            <Route
3              path="/"
4              element={
5                <ProtectedRoute user={user}>
6                  <Home user={user} />
7                </ProtectedRoute>
8              }
9            />
10            </Routes>

1import { useEffect } from 'react';
2import { useNavigate } from 'react-router-dom';
3import { PBUser } from '../../utils/types/types';
4
5export const useAuthGuard = (user:PBUser,test_mode:boolean) => {
6    const navigate = useNavigate();
7
8    useEffect(() => {
9        if (!user?.email && !test_mode) {
10            navigate("/auth");
11        }
12    }, [user?.email]);
13};

1import { Outlet} from 'react-router-dom';
2import { Toolbar } from '../../components/toolbar/Toolbar';
3import { PBUser } from '../../utils/types/types';
4import { useAuthGuard } from './../../shared/hooks/useAuthGuard';
5
6interface RootLayoutProps {
7  user: PBUser;
8  test_mode: boolean;
9}
10
11export const RootLayout = ({user,test_mode}: RootLayoutProps) => {
12
13  useAuthGuard(user,test_mode)
14
15  return (
16    <div className="w-full h-full dark:bg-slate-900">
17      <div
18        className="h-14 w-full  bg-slate-700 dark:bg-slate-800
19          bg-opacity-30 dark:bg-opacity-90 max-h-[50px] p-1
20         sticky top-0 z-40"
21      >
22        <Toolbar user={user} />
23      </div>
24      <main className=" w-full h-[90%] fixed top-12 overflow-y-scroll">
25        <Outlet />
26      </main>
27    </div>
28  );
29};
30