99 lines
No EOL
2.5 KiB
TypeScript
99 lines
No EOL
2.5 KiB
TypeScript
import { Route, Routes, useLocation, useNavigate } from 'react-router-dom';
|
|
import AuthenticationScreen from './authentication';
|
|
import { Chat } from './chat';
|
|
|
|
import DashboardPage from './dashboard';
|
|
import TaskPage from './tasks';
|
|
import TemplatesPage from './templates';
|
|
import { DriveScreen } from './drive';
|
|
import SyncPage from './sync/page';
|
|
import { Button } from './components/ui/button';
|
|
import MailPage from './mail';
|
|
|
|
const examples = [
|
|
{ name: "Home", href: "authentication" },
|
|
{ name: "Dashboard", href: "dashboard" },
|
|
{ name: "Chat", href: "chat" },
|
|
{ name: "Mail", href: "mail" },
|
|
{ name: "Drive", href: "drive" },
|
|
{ name: "Tasks", href: "tasks" },
|
|
{ name: "Meet", href: "meet" },
|
|
{ name: "Templates", href: "templates" },
|
|
{ name: "Settings", href: "sync" },
|
|
{ name: "Help", href: "help" },
|
|
];
|
|
|
|
const ExamplesNav = () => {
|
|
const location = useLocation();
|
|
const navigate = useNavigate();
|
|
|
|
return (
|
|
<div className="examples-nav-container">
|
|
<div className="examples-nav-inner">
|
|
{examples.map((example) => (
|
|
<Button
|
|
key={example.href}
|
|
onClick={() => navigate(example.href)}
|
|
className={`example-button ${location.pathname.includes(example.href) ? 'active' : ''
|
|
}`}
|
|
>
|
|
{example.name}
|
|
</Button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
|
|
export function RootLayout() {
|
|
return (
|
|
<div className="app-container">
|
|
<ExamplesNav />
|
|
<main className="app-main">
|
|
<Routes>
|
|
<Route path="authentication" element={
|
|
<>
|
|
<AuthenticationScreen />
|
|
</>
|
|
} />
|
|
<Route path="chat" element={
|
|
<>
|
|
<Chat />
|
|
|
|
</>
|
|
} />
|
|
<Route path="dashboard" element={
|
|
<>
|
|
<DashboardPage />
|
|
|
|
</>
|
|
} />
|
|
<Route path="mail" element={
|
|
<>
|
|
<MailPage />
|
|
|
|
</>
|
|
} />
|
|
<Route path="drive" element={<DriveScreen />} />
|
|
<Route path="tasks" element={
|
|
<>
|
|
<TaskPage />
|
|
|
|
</>
|
|
} />
|
|
<Route path="meet" element={<div>Meet Screen (Placeholder)</div>} />
|
|
<Route path="templates" element={
|
|
<>
|
|
<TemplatesPage />
|
|
|
|
</>
|
|
} />
|
|
<Route path="sync" element={<SyncPage />} />
|
|
</Routes>
|
|
</main>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default RootLayout; |