| 1 | import { Suspense, type Component } from "solid-js"; |
| 2 | import { A, useLocation } from "@solidjs/router"; |
| 3 | |
| 4 | const App: Component<{ children: Element }> = (props) => { |
| 5 | const location = useLocation(); |
| 6 | |
| 7 | return ( |
| 8 | <> |
| 9 | <nav class="bg-gray-200 text-gray-900 px-4"> |
| 10 | <ul class="flex items-center"> |
| 11 | <li class="py-2 px-4"> |
| 12 | <A href="/" class="no-underline hover:underline"> |
| 13 | Home |
| 14 | </A> |
| 15 | </li> |
| 16 | <li class="py-2 px-4"> |
| 17 | <A href="/about" class="no-underline hover:underline"> |
| 18 | About |
| 19 | </A> |
| 20 | </li> |
| 21 | <li class="py-2 px-4"> |
| 22 | <A href="/error" class="no-underline hover:underline"> |
| 23 | Error |
| 24 | </A> |
| 25 | </li> |
| 26 | |
| 27 | <li class="text-sm flex items-center space-x-1 ml-auto"> |
| 28 | <span>URL:</span> |
| 29 | <input |
| 30 | class="w-75px p-1 bg-white text-sm rounded-lg" |
| 31 | type="text" |
| 32 | readOnly |
| 33 | value={location.pathname} |
| 34 | /> |
| 35 | </li> |
| 36 | </ul> |
| 37 | </nav> |
| 38 | |
| 39 | <main> |
| 40 | <Suspense>{props.children}</Suspense> |
| 41 | </main> |
| 42 | </> |
| 43 | ); |
| 44 | }; |
| 45 | |
| 46 | export default App; |