add SchoolCard

src/lib/api/schools.js

@@ -0,0 +1,12 @@
+export default class School {
+    constructor( logintude = 0, latitude = 0, id = ":3", name = "Creche", cep = "", telefone ="1234", email ="john@doe.com", endereco = "Rua tal, 88 Sasuke"){
+        this.id = id
+        this.name = name;
+        this.cep = cep;
+        this.telefone = telefone;
+        this.email = email;
+        this.logintude = logintude
+        this.latitude = latitude
+        this.endereco = endereco
+    }
+}

src/lib/components/Map.svelte

@@ -1,23 +1,46 @@
 <script>
-    import {MapLibre} from 'svelte-maplibre';
-    import MapMarker from "$lib/components/MapMarker.svelte";
-
-    export let schools = [];
-    export let userCoords;
-    let centerCoords = [userCoords.longitude, userCoords.latitude]
+    const maxdist = 40;
+    import MapMarker from "$lib/components/MapMarker.svelte"
+    import {MapLibre, Marker} from 'svelte-maplibre';
+
+    import MapIcon from "$lib/assets/map-fill.svg"
+
+    let cep_input;
+
+    export let schools;
+    let distance = 10;
 </script>
 
 <div class=" bg-white border rounded border-gray-200 rounded-lg shadow dark:bg-gray-800 dark:border-gray-700">
-    <MapLibre
-            center={centerCoords}
-            zoom={10}
-            style="https://basemaps.cartocdn.com/gl/positron-gl-style/style.json"
-            class="relative w-full aspect-[9/16] max-h-[70vh] sm:max-h-full sm:aspect-video"
-            standardControls>
-
-        {#each schools  as school}
+    <MapLibre 
+        center={[-22.4187,-42.9713]}
+        zoom={2}
+        class="map rounded-xl"
+        standardControls
+        style="https://basemaps.cartocdn.com/gl/positron-gl-style/style.json">
+        {#each schools as  school }
             <MapMarker {school}/>
         {/each}
     </MapLibre>
-
+    <div class="">
+        <div class="flex mt-6 mb-2 mr-6 ml-6">
+            <label for="default-range" step="25" 
+            class="font-bold block text-center mb-2 text-sm text-gray-900 dark:text-white">
+                Distância
+                {distance}{#if distance >= maxdist} + {/if}
+            </label>
+            <input id="default-range" type="range" bind:value={distance} min="0" max={maxdist} step="{maxdist/10}" 
+            class="w-full h-2 mt-2 ml-6 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700">
+        </div>
+        <div class="flex  m-6" >
+            <div class="relative z-0 w-full group">
+                <input type="text" name="floating_password" id="cep-input" class="block py-2.5 px-0 w-full text-sm text-gray-900 bg-transparent border-0 border-b-2 border-gray-300 appearance-none dark:text-white dark:border-gray-600 dark:focus:border-blue-500 focus:outline-none focus:ring-0 focus:border-blue-600 peer" placeholder=" " required />
+                <label for="cep-input" class="peer-focus:font-medium absolute text-sm text-gray-500 dark:text-gray-400 duration-300 transform -translate-y-6 scale-75 top-3 -z-10 origin-[0] peer-focus:left-0 peer-focus:text-blue-600 peer-focus:dark:text-blue-500 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6">CEP</label>
+            </div>
+            <button class="w-full inline-flex items-center px-4 py-2 text-sm font-medium text-center text-white bg-blue-700 rounded-lg hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">Ver escolas proximas</button>
+
+        </div>
+    </div>
 </div>
+
+<style></style>

src/lib/components/SchoolCard.svelte

@@ -0,0 +1,32 @@
+<script>
+
+    import School from "$lib/api/schools.js"
+    import Placeholder from "$lib/assets/image2.jpg"
+    /**
+     * @type {School}
+     */
+    export let school = new School(4,4, "Creche N", "creche tal kkk :)");
+</script>
+
+
+<div class="flex flex-col items-center bg-white border border-gray-200 rounded-lg shadow md:flex-row md:max-w-xl dark:border-gray-700 dark:bg-gray-800 ">
+    <img class="object-cover m-6 w-full rounded-t-lg h-96 md:h-48 md:w-48 md:rounded-none md:rounded-lg" src={Placeholder} alt="">
+    <div class="flex flex-col w-full justify-between p-4 leading-normal">
+        <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">{school.name}</h5>
+        <div class="flex items-center mb-3">
+            <svg class="w-4 h-4 text-yellow-300 mr-1" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 22 20">
+                <path d="M20.924 7.625a1.523 1.523 0 0 0-1.238-1.044l-5.051-.734-2.259-4.577a1.534 1.534 0 0 0-2.752 0L7.365 5.847l-5.051.734A1.535 1.535 0 0 0 1.463 9.2l3.656 3.563-.863 5.031a1.532 1.532 0 0 0 2.226 1.616L11 17.033l4.518 2.375a1.534 1.534 0 0 0 2.226-1.617l-.863-5.03L20.537 9.2a1.523 1.523 0 0 0 .387-1.575Z"/>
+            </svg>
+            <p class="ml-2 text-sm font-bold text-gray-900 dark:text-white">5.0</p>
+            <span class="w-1 h-1 mx-1.5 bg-gray-500 rounded-full dark:bg-gray-400"></span>
+            <a href="#" class="text-sm font-medium text-gray-900 underline hover:no-underline dark:text-white">0 avaliações</a>
+        </div>
+
+        <p class="mb-3 font-normal text-gray-700 dark:text-gray-400">{school.endereco}</p>
+
+        <button 
+        class="bg-blue-700 border border-gray-300 text-white text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white"> 
+            Entrar em contato 
+        </button>
+    </div>
+</div>

src/routes/geo/+page.svelte

@@ -0,0 +1,31 @@
+<script>
+    import MapMarker from "../../lib/components/MapMarker.svelte"
+    import SchoolCard from "../../lib/components/SchoolCard.svelte"
+    import {MapLibre, Marker} from 'svelte-maplibre';
+    import School from "$lib/api/schools"
+    import Map from "$lib/components/Map.svelte"
+    import MapIcon from "$lib/assets/map-fill.svg"
+    let creches = []
+    const randomInteger = (min, max) => (Math.random() * (max - min + 1)) + min;
+    for (let i = 0; i < 10; i++) {
+        creches.push(new School(
+            randomInteger(-42.9795, -42.9643),
+            randomInteger(-22.3912, -22.4528),
+            "Creche N" + i));        
+    }
+    let teste = new School(
+            randomInteger(-42.9795, -42.9643),
+            randomInteger(-22.3912, -22.4528),
+            "Creche N")
+    console.log(teste);
+</script>
+
+<SchoolCard {teste}/>
+
+<!--<Map  {creches}></Map>
+-->
+<style>
+  :global(.map) {
+    height: 500px;
+  }
+</style>