display poi results

osm_my_commerce/components/SearchLand.vue

@@ -1,7 +1,9 @@
 <script setup lang="ts">
+
   const queryString = ref("la tour eiffel")
   let selectedPoi = {}
 
+
   const {data, pending, refresh} = await useAsyncData(() => {
       if (queryString.value.length > 3) {
         return $fetch(`https://demo.addok.xyz/search?&type=poi&q=${queryString.value}`)
@@ -28,6 +30,8 @@
         sélectionné: {{selectedPoi.label}}
         <input type="text" v-model="selectedPoi.name">
       </div>
+      <div class="search-form">
+
         <label for="search_poi" class="text-4xl font-bold">
           <!--          Effectuer une recherche-->
           🔍
@@ -43,14 +47,18 @@
                 @click="useAsyncData()">
           Rechercher
         </button>
+      </div>
+      <div class="states">
         <div v-if="pending"> Loading ...</div>
-      <div v-if="data?.features.length"> {{data.features.length}} résultats
+        <span class="mx-2" v-if="data?.features.length"> {{data.features.length}} résultats </span>
+      </div>
+      <div class="my-2">
+
 
-        Fetch result:
         <div v-for="elem in data.features" :key="elem.properties.id">
 
           <button
-            class="bg-slate-900 text-slate-100 rounded-md font-medium leading-6 py-1  ring-1 ring-inset ring-slate-900/5 mx-auto p-2 px-4 w-1/2"
+            class="bg-slate-900 hover:bg-slate-700 text-slate-100 rounded-md font-medium leading-6 py-1 mb-1 ring-1 ring-inset ring-slate-900/5 mx-auto p-2 px-4 w-1/2"
             @click="selectPoi(elem)">
             <span class="text-md">
 
@@ -70,6 +78,7 @@
         <!--        <pre class="text-left"><code>{{ data }}</code></pre>-->
       </div>
     </div>
+
   </div>
 </template>