Skip to content

Instantly share code, notes, and snippets.

@stefanbauer
Created April 15, 2020 11:50
Show Gist options
  • Save stefanbauer/0c3bd6010a994bb08d424dd41a3238af to your computer and use it in GitHub Desktop.
Save stefanbauer/0c3bd6010a994bb08d424dd41a3238af to your computer and use it in GitHub Desktop.
<template>
<div class="bg-white px-4 py-3 flex items-center justify-between sm:px-6">
<div class="hidden sm:block">
<p class="text-sm leading-5 text-gray-700">
Showing
<span v-show="items.total > 0">
<span class="font-medium">{{ items.from }}</span> to
<span class="font-medium">{{ items.to }}</span> of
</span>
<span class="font-medium">{{ items.total }}</span> results
</p>
</div>
<div class="flex-1 flex justify-between sm:justify-end">
<inertia-link
v-if="items.prev_page_url"
:href="items.prev_page_url"
class="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm leading-5 font-medium rounded-md text-gray-700 bg-white hover:text-gray-500 focus:outline-none focus:shadow-outline-blue focus:border-blue-300 active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150"
preserve-scroll
>Previous</inertia-link>
<button v-else class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-200 text-sm leading-5 font-medium rounded-md text-gray-300 bg-white cursor-default" disabled>
Previous
</button>
<inertia-link
v-if="items.next_page_url"
:href="items.next_page_url"
class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm leading-5 font-medium rounded-md text-gray-700 bg-white hover:text-gray-500 focus:outline-none focus:shadow-outline-blue focus:border-blue-300 active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150"
preserve-scroll
>Next</inertia-link>
<button v-else class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-200 text-sm leading-5 font-medium rounded-md text-gray-300 bg-white cursor-default" disabled>
Next
</button>
</div>
</div>
</template>
<script>
export default {
props: {
items: Object,
},
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment