<script lang="ts">
  import "./app.css";
  import { Router, Route, Link, navigate } from "svelte-routing";
  import Home from "./routes/Home.svelte";
  import "./app.css";
  import { Navbar, DarkMode, Heading } from "flowbite-svelte";
  import { HomeOutline } from "flowbite-svelte-icons";
  let url: string = $state("/");
</script>

<main class="flex-col h-screen items-center bg-gray-50 dark:bg-gray-900">
  <Router bind:url>
    <Navbar class="border-b">
      <button
        class="grid grid-cols-3 items-center"
        onclick={() => navigate("/")}
      >
        <HomeOutline />
        <span class="col-span-2">HOME</span>
      </button>
      <DarkMode />
    </Navbar>
    <Route path="/"><Home /></Route>
  </Router>
</main>
