diff options
| author | Maksymilian <maks@jopek.eu> | 2022-09-23 09:44:56 +0200 |
|---|---|---|
| committer | Maksymilian <maks@jopek.eu> | 2022-09-23 09:44:56 +0200 |
| commit | 8886308c56223f04df535a065234414a6deb11ba (patch) | |
| tree | bf432ab5e6a4ae754c4017bd9e0e663c25ccc055 /src/App.svelte | |
| download | svelte-pokeapi-master.tar.gz svelte-pokeapi-master.tar.zst svelte-pokeapi-master.zip | |
Diffstat (limited to 'src/App.svelte')
| -rw-r--r-- | src/App.svelte | 62 |
1 files changed, 62 insertions, 0 deletions
diff --git a/src/App.svelte b/src/App.svelte new file mode 100644 index 0000000..f56f6bb --- /dev/null +++ b/src/App.svelte @@ -0,0 +1,62 @@ +<script> + import "./lib/Tailwind.css"; + import { Router, Link, Route } from "svelte-routing"; + import Home from "./routes/Home.svelte"; + import About from "./routes/About.svelte"; + import Blog from "./routes/Blog.svelte"; + + export let url = ""; +</script> + +<Router {url}> + <header class="text-gray-600 body-font"> + <div + class="container mx-auto flex flex-wrap p-5 flex-col md:flex-row items-center" + > + <a + class="flex title-font font-medium items-center text-gray-900 mb-4 md:mb-0" + > + <svg + xmlns="http://www.w3.org/2000/svg" + fill="none" + stroke="currentColor" + stroke-linecap="round" + stroke-linejoin="round" + stroke-width="2" + class="w-10 h-10 text-white p-2 bg-indigo-500 rounded-full" + viewBox="0 0 24 24" + > + <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" /> + </svg> + <span class="ml-3 text-xl">Tailblocks</span> + </a> + <nav + class="md:ml-auto md:mr-auto flex flex-wrap items-center text-base justify-center" + > + <Link class="mr-5 hover:text-gray-900" to="/">Home</Link> + <Link class="mr-5 hover:text-gray-900" to="about">About</Link> + <Link class="mr-5 hover:text-gray-900" to="blog">Blog</Link> + </nav> + <button + class="inline-flex items-center bg-gray-100 border-0 py-1 px-3 focus:outline-none hover:bg-gray-200 rounded text-base mt-4 md:mt-0" + >Button + <svg + fill="none" + stroke="currentColor" + stroke-linecap="round" + stroke-linejoin="round" + stroke-width="2" + class="w-4 h-4 ml-1" + viewBox="0 0 24 24" + > + <path d="M5 12h14M12 5l7 7-7 7" /> + </svg> + </button> + </div> + </header> + <div> + <Route path="blog" component={Blog} /> + <Route path="about" component={About} /> + <Route path="/"><Home /></Route> + </div> +</Router> |