change folder location

src/components/BottomNavigation.vue

@@ -0,0 +1,38 @@
+<template>
+     <v-layout class="overflow-visible" style="height: 56px">
+    <v-bottom-navigation
+            class = "overflow"
+            v-model="value"
+                grow
+            >
+                <router-link :to="{name: 'home'}">
+                    <v-btn :to="{name: 'home'}">
+                        <v-icon>mdi-map</v-icon>
+                        แผนที่
+                    </v-btn>
+                </router-link>
+
+                <router-link :to="{name: 'favorite'}">
+                    <v-btn :to="{name: 'favorite'}">
+                        <v-icon>mdi-heart</v-icon>
+                        สถานที่โปรด
+                    </v-btn>
+                </router-link>
+
+                <router-link :to="{name: 'setting'}">
+                    <v-btn :to="{name: 'setting'}">
+                        <v-icon>mdi-cog</v-icon>
+                        การตั้งค่า
+                    </v-btn>
+                </router-link>
+    </v-bottom-navigation>
+</v-layout>
+</template>
+
+<script>
+import {RouterLink} from 'vue-router';
+  export default {
+    data: () => ({ value: 1 }),
+  }
+
+</script>

src/components/map.vue

@@ -0,0 +1,27 @@
+<template>
+    <ol-map
+      :loadTilesWhileAnimating="true"
+      :loadTilesWhileInteracting="true"
+      style="height: 400px"
+    >
+      <ol-view
+        ref="view"
+        :center="center"
+        :rotation="rotation"
+        :zoom="zoom"
+        :projection="projection"
+      />
+  
+      <ol-tile-layer>
+        <ol-source-osm />
+      </ol-tile-layer>
+    </ol-map>
+  </template>
+  
+  <script setup>
+  import { ref } from "vue";
+    const center = ref([40, 40]);
+    const projection = ref("EPSG:4326");
+    const zoom = ref(8);
+    const rotation = ref(0);
+  </script>

src/components/searchbar.vue

@@ -0,0 +1,27 @@
+<template>
+    <v-layout style="height: 55px;">
+        <v-app-bar scroll-threshold="0"
+            class="mx-auto px-auto"
+            >
+
+            <v-text-field
+            density="compact"
+            variant="solo"
+            prepend-inner-icon="mdi-magnify"
+            single-line
+            hide-details
+            ></v-text-field>
+            <v-btn icon>
+                <v-icon>mdi-crosshairs-gps</v-icon>
+            </v-btn>
+        </v-app-bar>
+    </v-layout>
+</template>
+
+<script>
+import {RouterLink} from 'vue-router';
+  export default {
+    data: () => ({ value: 1 }),
+  }
+
+</script>