Pagination

Overview

The Pagination Component is designed to facilitate navigation through a collection of pages, such as a list of articles or search results. It provides an intuitive interface for moving between pages, offering both "Previous" and "Next" buttons, as well as individual page numbers for direct access to specific pages. This component is highly adaptable, suitable for both mobile and desktop layouts, ensuring a seamless user experience across all devices.

Features

• Adaptive Design: Displays optimally on both mobile and desktop, with specific layouts for each.
• Dynamic Page Navigation: Allows users to go to the next page, previous page, or directly to a specific page number.
• Custom Event Emission: Emits an event when the page changes, enabling parent components to react accordingly.
• Accessibility and Usability: Designed with usability in mind, ensuring users can easily navigate through pages.

Props

The component accepts the following props:

• currentPage (Number, required): The current active page number.
• totalPages (Number, required): The total number of pages available.

Events

• changePage (event, page: number): This event is emitted whenever a page change is initiated. The page parameter indicates the new page number.

Methods

• changePageNext(): Advances to the next page if the current page is not the last page.
• changePagePrevious(): Moves to the previous page if the current page is not the first page.
• changePageNumber(page: number): Navigates directly to the specified page number.

Example Usage

<Pagination
  :currentPage="currentPage"
  :totalPages="totalPages"
  @changePage="handlePageChange"
/>

Implement handlePageChange in the parent component to update the current page view or fetch new data based on the selected page.

Customization

• Styling: Tailwind CSS is used for styling, making it straightforward to adjust the appearance according to your design system. You can customize the button styles directly in the template.
• Behavior: Modify the methods if you need to implement more complex navigation logic, such as loading data asynchronously when a new page is selected.

Usage

To integrate the Pagination Component into your project:

1. Ensure Tailwind CSS is set up in your project to use the predefined styles.
2. Copy the component code into a new .vue file within your project's components directory.
3. Import and use the component in your pages or components that require pagination functionality.

Component Code

<script setup lang="ts">
interface PropsInterface {
  currentPage: number;
  totalPages: number;
}

interface EmitsInterface {
  (event: 'changePage', page: number): void;
}

const props = defineProps<PropsInterface>();

const emits = defineEmits<EmitsInterface>();

function changePageNext() {
  if (props.currentPage === props.totalPages) return;
  emits('changePage', props.currentPage + 1);
}

function changePagePrevious() {
  if (props.currentPage === 1) return;
  emits('changePage', props.currentPage - 1);
}

function changePageNumber(page: number) {
  emits('changePage', page);
}
</script>

<template>
  <div class="flex items-center justify-between px-4 py-6 sm:px-6">
    <!-- MOBILE -->
    <div class="my-10 flex flex-1 justify-around sm:hidden">
      <CoolButton
        label="Previous"
        @click="changePagePrevious()"
      />
      <CoolButton
        label="Next"
        @click="changePageNext()"
      />
    </div>

    <!-- DESKTOP -->
    <div class="hidden sm:flex sm:flex-1 sm:items-center sm:justify-between">
      <div class="m-20 mx-auto flex justify-center gap-6">
        <div>
          <CoolButton
            label="Previous"
            @click="changePagePrevious()"
          />
        </div>
        <div class="flex gap-2">
          <div
            v-for="pageNumber in totalPages"
            :key="pageNumber"
          >
            <button
              :class="{
                'bg-black text-primary dark:bg-primary dark:text-black':
                  pageNumber === currentPage,
                'border-2 border-transparent text-black hover:border-2 hover:border-black dark:text-primary hover:dark:border-primary ':
                  pageNumber !== currentPage,
              }"
              class="rounded-md px-2 py-1"
              @click="changePageNumber(pageNumber)"
            >
              {{ pageNumber }}
            </button>
          </div>
        </div>
        <div>
          <CoolButton
            label="Next"
            @click="changePageNext()"
          />
        </div>
      </div>
    </div>
  </div>
</template>