Add pagination

src/components/pagination/index.vue

+<template>
+  <div class="row items-center">
+    <q-space></q-space>
+    <span class="q-mr-sm">{{ $t('recordPerPage') }}:</span>
+    <q-select
+      :model-value="pageSize"
+      :options="pageSizeOptions"
+      emit-value
+      map-options
+      option-label="text"
+      option-value="value"
+      dense
+      hide-bottom-space
+      borderless
+      class="q-mr-md"
+      @update:model-value="$emit('update:pageSize', $event)"
+    ></q-select>
+    <q-pagination
+      :model-value="currentPage"
+      :max="totalPage"
+      direction-links
+      boundary-links
+      unelevated
+      @update:model-value="$emit('update:currentPage', $event)"
+    />
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType } from 'vue';
+export default defineComponent({
+  name: 'PaginationComponent',
+  props: {
+    currentPage: {
+      type: Number,
+      required: true,
+    },
+    totalPage: {
+      type: Number,
+      required: true,
+    },
+    maxPages: {
+      type: Number,
+      default: 5,
+    },
+    pageSize: {
+      type: Number,
+      default: 10,
+    },
+    pageSizeOptions: {
+      type: Array as PropType<
+        Array<{
+          value: number;
+          text: string | number;
+        }>
+      >,
+      default: () => [
+        { value: 5, text: '5' },
+        { value: 10, text: '10' },
+        { value: 20, text: '20' },
+        { value: 50, text: '50' },
+        { value: 100, text: '100' },
+        { value: 150, text: '150' },
+        { value: 200, text: '200' },
+      ],
+    },
+  },
+  emits: ['update:currentPage', 'update:pageSize'],
+  setup() {
+    return {};
+  },
+});
+</script>