<script>
  import logo from './assets/svelte.png'
  import Counter from './lib/Counter.svelte'
  import Stats from './components/Stats.svelte'
  import Map from './components/Map.svelte'
  import Routes from './components/Routes.svelte'
  import { Bee } from "@ethersphere/bee-js"


async function writefeed(){

 const bee = new Bee('http://localhost:1633') 
 
 const postageBatchId = await bee.createPostageBatch("100", 17)

await bee.setJsonFeed(
  postageBatchId,
  'some cool arbitraty topic', 
  { some: ['cool', { json: 'compatible' }, 'object']}, 
  { signer: '0x634fb5a872396d9693e5c9f9d7233cfa93f395c093371017ff44aa9ae6564cdd' }
)

const data = await bee.getJsonFeed(
  'some cool arbitraty topic', 
  { signer: '0x634fb5a872396d9693e5c9f9d7233cfa93f395c093371017ff44aa9ae6564cdd' }
)

console.log(data)
// Prints: { some: ['cool', { json: 'compatible' }, 'object']}}
}

writefeed()
</script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<main>

 <!-- Write your comments here -->
 
  <h1>Track your Bike!</h1>

  <div class="sorting">
    <Stats/>
    <Routes/>
  </div>
  
  <div class="sorting">
  <Map/>

  </div>
 
  <div class="routes">
    
    </div>
    
    
   



</main>


<style>
  :root {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
      Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  }

  main {
    text-align: center;
    padding: 1em;
    margin: 0 auto;
   
  }

  img {
    height: 16rem;
    width: 16rem;
  }

  h1 {
    color: #ff3e00;
    text-transform: uppercase;
    font-size: 4rem;
    font-weight: 100;
    line-height: 1.1;
    margin: 2rem auto;
    max-width: 14rem;
 
  }

  p {
    max-width: 14rem;
    margin: 1rem auto;
    line-height: 1.35;
  }

  @media (min-width: 480px) {
    h1 {
      max-width: none;
    }

    p {
      max-width: none;
    }
  }
  

/* leaflet css*/
#map { height: 500px; width: 500px; margin-left: 50%; }

.sorting {
  /*display:flex;
  width: 100%;
  height: 150px;
 /* background: #ce8888;*/
  float: left;
}

 .routes{
  height: 100%;
  width: 200px;
  position: relative;
  z-index: 1; 
   top: 0; 
  left: 0;
  overflow-x: hidden; 
 }

  

 

</style>
