import type { Component } from 'solid-js';
import { Link, useRoutes, useLocation, useNavigate } from '@solidjs/router';
import { routes } from './routes';
import { UserInfoProvider, loadUserInfo } from './user_info';
import { ChangeSession } from './change_session';
import bookSvgUrl from './assets/book.svg'
const App: Component = () => {
const location = useLocation();
const navigate = useNavigate();
const Route = useRoutes(routes);
return (
<UserInfoProvider whoami={loadUserInfo()}>
<nav>
<img alt="Allredlib logo" class="logo" src={bookSvgUrl} width="125" height="125" />
<select
value={location.pathname}
onChange={e => {
navigate(e.target.value)
}}>
<option value="/">Home</option>
<option value="/about">About</option>
<option value="/creators">Authors</option>
<option value="/books">Books</option>
<ChangeSession />
</select>
</nav>
<main>
<Route />
</main>
</UserInfoProvider>
);
};
export default App;