twenty/front/src/App.tsx

import React from 'react';
import People from './pages/people/People';
import Companies from './pages/companies/Companies';
import AuthCallback from './pages/auth/Callback';
import Login from './pages/auth/Login';
import AppLayout from './layout/AppLayout';
import { Routes, Route, Navigate } from 'react-router-dom';
import RequireAuth from './components/auth/RequireAuth';
import Opportunities from './pages/opportunities/Opportunities';

function App() {
  const user = {
    id: '7dfbc3f7-6e5e-4128-957e-8d86808cdf6b',
    email: 'charles@twenty.com',
    first_name: 'Charles',
    last_name: 'Bochet',
  };

  const workspace = {
    id: '7dfbc3f7-6e5e-4128-957e-8d86808cdf6b',
    name: 'Claap',
    logo: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAJ82lDQ1BJQ0MgUHJvZmlsZQAASImFlnk8lWkbx+/nOfuG43DsHPuWfTvIvm/Z11SOY986Tra0SypMSpJQosZaNJUlI0mKygiFFjVkhDKNFqlU5jnMTE3v+3nf63yuz/X9XM99/851388fzw8AUgCLw4mDBQCIT0jiejlYMwICgxi4KYACkoAKmIDKYm/iWHl4uAIk/q7/jnfDAOLVuxo8rf98/j+DGha+iQ0A5IEwk83hJiG8D2Gf1CQOj0cRFuIiQyE8x+PIZYbRPA5dYdHlNT5eNgivAgBPZrG4kQAQmUifkcKORHSIAQhrJ4RFJyDM0zePiEtOQ7iH14+P3xiG8HuEVZD1HABIDN48od9oRv5LP/QffRYr8h+Oj0tm/3Uu3o2QwxN8vZEqjqQkiACaIA4kgzTAABzABRuRTjTSCUfu/r/vYy7vs0FWcsBmZEc0iARRIAnZb/+NlveyUhJIBSxkTTjScUV+Nrz3uCL5hr6sCtFvfe1lvAXALGxpaanta89VAYCLe5CzPPvaU24HgE8EgJ4cdjI3ZaXHu3qAAUTAD4SAGJAG8kAFaABdYAhMgSWwA87AHfiAQLAesJF545GpUsFWsAtkgRxwEBwBxaAMnALV4Cw4D5pBG7gKboDboB8MgUdgDEyCF2AOvAOLEAThIApEg8QgGUgRUod0ISZkDtlBrpAXFAiFQJFQApQMbYV2QzlQPlQMlUM10E/QJegqdBMagB5A49AM9Br6CKNgMiwES8FKsBbMhK1gF9gHXgdHwolwOpwJH4CL4Ar4DNwEX4Vvw0PwGPwCnkcBFAlFR8miNFBMlA3KHRWEikBxUdtR2ahCVAWqHtWK6kbdRY2hZlEf0Fg0Dc1Aa6BN0Y5oXzQbnYjejs5FF6Or0U3oLvRd9Dh6Dv0FQ8FIYtQxJhgnTAAmEpOKycIUYioxjZjrmCHMJOYdFoulY5WxRlhHbCA2BrsFm4s9jm3AdmAHsBPYeRwOJ4ZTx5nh3HEsXBIuC3cMdwZ3BTeIm8S9x5PwMnhdvD0+CJ+Az8AX4mvx7fhB/BR+kSBAUCSYENwJYYTNhDzCaUIr4Q5hkrBIpBKViWZEH2IMcRexiFhPvE4cJb4hkUhyJGOSJymatJNURDpH6iGNkz6QBclqZBtyMDmZfIBcRe4gPyC/oVAoShRLShAliXKAUkO5RnlCec9H49Pkc+IL49vBV8LXxDfI95KfwK/Ib8W/nj+dv5D/Av8d/lkBgoCSgI0AS2C7QInAJYERgXkqjapDdafGU3OptdSb1GlBnKCSoJ1gmGCm4CnBa4ITNBRNnmZDY9N2007TrtMmhbBCykJOQjFCOUJnhfqE5oQFhfWF/YTThEuELwuP0VF0JboTPY6eRz9PH6Z/FJESsRIJF9kvUi8yKLIgKiFqKRoumi3aIDok+lGMIWYnFit2SKxZ7LE4WlxN3FM8VfyE+HXxWQkhCVMJtkS2xHmJh5KwpJqkl+QWyVOSvZLzUtJSDlIcqWNS16RmpenSltIx0gXS7dIzMjQZc5lomQKZKzLPGcIMK0Yco4jRxZiTlZR1lE2WLZftk12UU5bzlcuQa5B7LE+UZ8pHyBfId8rPKcgouClsVahTeKhIUGQqRikeVexWXFBSVvJX2qvUrDStLKrspJyuXKc8qkJRsVBJVKlQuaeKVWWqxqoeV+1Xg9UM1KLUStTuqMPqhurR6sfVB1ZhVhmvSlhVsWpEg6xhpZGiUacxrknXdNXM0GzWfKmloBWkdUirW+uLtoF2nPZp7Uc6gjrOOhk6rTqvddV02boluvf0KHr2ejv0WvRe6avrh+uf0L9vQDNwM9hr0Gnw2dDIkGtYbzhjpGAUYlRqNMIUYnowc5k9xhhja+Mdxm3GH0wMTZJMzpv8YaphGmtaazq9Wnl1+OrTqyfM5MxYZuVmY+YM8xDzk+ZjFrIWLIsKi6eW8pZhlpWWU1aqVjFWZ6xeWmtbc60brRdsTGy22XTYomwdbLNt++wE7Xztiu2e2MvZR9rX2c85GDhscehwxDi6OB5yHHGScmI71TjNORs5b3PuciG7eLsUuzx1VXPlura6wW7ObofdRtcorklY0+wO3J3cD7s/9lD2SPT42RPr6eFZ4vnMS8drq1e3N817g3et9zsfa588n0e+Kr7Jvp1+/H7BfjV+C/62/vn+YwFaAdsCbgeKB0YHtgThgvyCKoPm19qtPbJ2MtggOCt4eJ3yurR1N9eLr49bf3kD/wbWhgshmBD/kNqQTyx3VgVrPtQptDR0jm3DPsp+EWYZVhA2E24Wnh8+FWEWkR8xHWkWeThyJsoiqjBqNtomujj6VYxjTFnMQqx7bFXsUpx/XEM8Pj4k/lKCYEJsQtdG6Y1pGwc46pwszliiSeKRxDmuC7dyE7Rp3aaWJCHk49mbrJK8J3k8xTylJOV9ql/qhTRqWkJa72a1zfs3T6Xbp/+4Bb2FvaVzq+zWXVvHt1ltK98ObQ/d3rlDfkfmjsmdDjurdxF3xe76JUM7Iz/j7W7/3a2ZUpk7Myf2OOypy+LL4maN7DXdW7YPvS96X99+vf3H9n/JDsu+laOdU5jzKZede+sHnR+Kflg6EHGgL88w78RB7MGEg8OHLA5V51Pz0/MnDrsdbipgFGQXvD2y4cjNQv3CsqPEo8lHx4pci1qOKRw7eOxTcVTxUIl1SUOpZOn+0oXjYccHT1ieqC+TKssp+3gy+uT9cofypgqlisJT2FMpp56d9jvd/SPzx5pK8cqcys9VCVVj1V7VXTVGNTW1krV5dXBdct3MmeAz/Wdtz7bUa9SXN9Abcs6Bc8nnnv8U8tPweZfznReYF+ovKl4sbaQ1ZjdBTZub5pqjmsdaAlsGLjlf6mw1bW38WfPnqjbZtpLLwpfz2ontme1LV9KvzHdwOmavRl6d6NzQ+ehawLV7XZ5dfdddrvfcsL9xrduq+0qPWU/bTZObl24xbzXfNrzd1GvQ2/iLwS+NfYZ9TXeM7rT0G/e3DqweaB+0GLx61/bujXtO924PrRkaGPYdvj8SPDJ2P+z+9IO4B68epjxcfLRzFDOa/VjgceETyScVv6r+2jBmOHZ53Ha896n300cT7IkXv2367dNk5jPKs8Ipmamaad3pthn7mf7na59PvuC8WJzN+p36e+lLlZcX/7D8o3cuYG7yFffV0uvcN2Jvqt7qv+2c95h/8i7+3eJC9nux99UfmB+6P/p/nFpM/YT7VPRZ9XPrF5cvo0vxS0scFpe1bAVQSMIREQC8rgKAEggArR/xD2tXPNdffgb6xtn8zeDO+FcuMlvxZcthCEA9UryQtOkA4BySSjsRbUsAeBbRxxLAenr/5F/xf//vO17xe7zAIs73pC2PHhz2LAffxYoX/Oac31fAm0IffF//BHDgtSSRPWioAAAAeGVYSWZNTQAqAAAACAAFARIAAwAAAAEAAQAAARoABQAAAAEAAABKARsABQAAAAEAAABSASgAAwAAAAEAAgAAh2kABAAAAAEAAABaAAAAAAAAAEgAAAABAAAASAAAAAEAAqACAAQAAAABAAAAMqADAAQAAAABAAAAMgAAAADJOUoaAAAACXBIWXMAAAsTAAALEwEAmpwYAAACBGlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iWE1QIENvcmUgNi4wLjAiPgogICA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPgogICAgICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgICAgICAgICB4bWxuczp0aWZmPSJodHRwOi8vbnMuYWRvYmUuY29tL3RpZmYvMS4wLyIKICAgICAgICAgICAgeG1sbnM6ZXhpZj0iaHR0cDovL25zLmFkb2JlLmNvbS9leGlmLz
  };

  return (
    <div>
      {
        <AppLayout user={user} workspace={workspace}>
          <Routes>
            <Route
              path="/"
              element={
                <RequireAuth>
                  <Navigate to="/people" replace />
                </RequireAuth>
              }
            />
            <Route
              path="/people"
              element={
                <RequireAuth>
                  <People />
                </RequireAuth>
              }
            />
            <Route
              path="/companies"
              element={
                <RequireAuth>
                  <Companies />
                </RequireAuth>
              }
            />
            <Route
              path="/opportunities"
              element={
                <RequireAuth>
                  <Opportunities />
                </RequireAuth>
              }
            />
            <Route path="/auth/callback" element={<AuthCallback />} />
            <Route path="/auth/login" element={<Login />} />
          </Routes>
        </AppLayout>
      }
    </div>
  );
}

export default App;