feat: Inbox item header component (#8810)

app/javascript/dashboard/routes/dashboard/inbox/components/InboxItemHeader.vue

@@ -0,0 +1,53 @@
+<script setup>
+import PaginationButton from './PaginationButton.vue';
+
+const props = defineProps({
+  totalLength: {
+    type: Number,
+    default: 0,
+  },
+  currentIndex: {
+    type: Number,
+    default: 0,
+  },
+});
+
+const onSnooze = () => {
+  // TODO: Implement snooze
+};
+
+const onDelete = () => {
+  // TODO: Implement delete
+};
+</script>
+
+<template>
+  <div
+    class="flex gap-2 py-2 pl-4 pr-2 justify-between items-center w-full border-b border-slate-200 dark:border-slate-500"
+  >
+    <pagination-button
+      :total-length="props.totalLength"
+      :current-index="props.currentIndex"
+    />
+    <div class="flex items-center gap-2">
+      <woot-button
+        variant="hollow"
+        size="small"
+        color-scheme="secondary"
+        icon="snooze"
+        @click="onSnooze"
+      >
+        Snooze
+      </woot-button>
+      <woot-button
+        icon="delete"
+        size="small"
+        color-scheme="secondary"
+        variant="hollow"
+        @click="onDelete"
+      >
+        Delete notification
+      </woot-button>
+    </div>
+  </div>
+</template>

app/javascript/dashboard/routes/dashboard/inbox/components/PaginationButton.vue

@@ -0,0 +1,73 @@
+<script setup>
+import { ref, computed } from 'vue';
+
+const props = defineProps({
+  totalLength: {
+    type: Number,
+    default: 0,
+  },
+  currentIndex: {
+    type: Number,
+    default: 0,
+  },
+});
+
+const totalItems = ref(props.totalLength);
+const currentPage = ref(Math.floor(props.currentIndex / totalItems.value) + 1);
+
+const isUpDisabled = computed(() => currentPage.value === 1);
+
+const isDownDisabled = computed(
+  () => currentPage.value === totalItems.value || totalItems.value <= 1
+);
+
+const handleUpClick = () => {
+  if (currentPage.value > 1) {
+    currentPage.value -= 1;
+    // need to update it based on usage
+  }
+};
+const handleDownClick = () => {
+  if (currentPage.value < totalItems.value) {
+    currentPage.value += 1;
+    // need to update it based on usage
+  }
+};
+</script>
+
+<template>
+  <div class="flex gap-2 items-center">
+    <div class="flex gap-1 items-center">
+      <woot-button
+        size="tiny"
+        variant="hollow"
+        color-scheme="secondary"
+        icon="chevron-up"
+        :disabled="isUpDisabled"
+        @click="handleUpClick"
+      />
+      <woot-button
+        size="tiny"
+        variant="hollow"
+        color-scheme="secondary"
+        icon="chevron-down"
+        :disabled="isDownDisabled"
+        @click="handleDownClick"
+      />
+    </div>
+    <div class="flex items-center gap-1 whitespace-nowrap">
+      <span class="text-sm font-medium text-gray-600">
+        {{ totalItems <= 1 ? '1' : currentPage }}
+      </span>
+      <span
+        v-if="totalItems > 1"
+        class="text-sm text-slate-400 relative -top-px"
+      >
+        /
+      </span>
+      <span v-if="totalItems > 1" class="text-sm text-slate-400">
+        {{ totalItems }}
+      </span>
+    </div>
+  </div>
+</template>