add: pagination to locations

src/components/Pagination.vue

@@ -0,0 +1,89 @@
+<script setup>
+import { onMounted, ref } from 'vue';
+
+    const props = defineProps({
+        total: {
+            type: Number,
+            required: true,
+        },
+        limit: {
+            type: Number,
+            default: 10
+        },
+        currentPage: {
+            type: Number,
+            default: 1
+        }
+    })
+
+    const emits = defineEmits(['get-elements'])
+    const currentPage = ref(1);
+    const totalPage = ref(0)
+    onMounted(() => {
+        currentPage.value = props.currentPage;
+        totalPage.value = Math.ceil(props.total / props.limit)
+        console.log('pages')
+        console.log(totalPage.value);
+    })
+    
+    const setPage = (p) => {     
+        currentPage.value = p
+        const skip = (p - 1) * props.limit;
+        emits('get-elements', {skip: skip, page: p});
+     }
+</script>
+
+<template>
+    <div class="pagination" v-if="totalPage > 1">
+        <h4>Paginación</h4>
+        <div class="box-pages" v-if="totalPage > 1">
+            <div 
+                v-for="p in totalPage"
+                :class="[currentPage === p ? 'page page-active' : 'page']"
+                @click="setPage(p)"
+            >   
+                {{ p }}
+            </div>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+    .pagination {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        margin-top: 2rem;
+    }
+
+    .pagination h4 {
+        font-size: 1.2rem;
+        font-weight: 900;
+    }
+    .box-pages {
+        /* left: 50%; */
+        display: flex;
+        /* flex-direction: column; */
+        justify-content: center;
+    }
+
+    .page {
+        cursor: pointer;
+        display: flex;
+        width: 30px;
+        height: 30px;
+        border-radius: 100%;
+        align-items: center;
+        justify-content: center;
+        align-content: center;
+        background-color: #dab977;
+        color: #323030;
+        margin: 4px;
+    }
+    .page-active {
+        width: 33px;
+        height: 33px;
+        background-color: #FBBA33;
+    }
+</style>