initial import

resources/js/Components/Navigation.vue

@@ -0,0 +1,56 @@
+<template>
+  <nav class="navigation">
+    <button @click="$emit('prevPage')" :disabled="currentPage === 1">{{ __('navigation.previous') }}</button>
+    <span>{{ __('navigation.page_of', { currentPage: currentPage, totalPages: totalPages }) }}</span>
+    <button @click="$emit('nextPage')" :disabled="currentPage === totalPages">{{ __('navigation.next') }}</button>
+  </nav>
+</template>
+
+<script setup>
+const props = defineProps({
+  currentPage: {
+    type: Number,
+    required: true,
+  },
+  totalPages: {
+    type: Number,
+    required: true,
+  },
+});
+
+const emits = defineEmits(['prevPage', 'nextPage']);
+</script>
+
+<style scoped>
+.navigation {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 20px;
+  background-color: #f0f0f0;
+  width: 100%;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.navigation button {
+  background-color: #007bff;
+  color: white;
+  border: none;
+  padding: 10px 20px;
+  margin: 0 10px;
+  border-radius: 5px;
+  cursor: pointer;
+  font-size: 1em;
+}
+
+.navigation button:disabled {
+  background-color: #cccccc;
+  cursor: not-allowed;
+}
+
+.navigation span {
+  font-size: 1.2em;
+  font-weight: bold;
+  color: #333;
+}
+</style>