33 lines
1.4 KiB
Vue
33 lines
1.4 KiB
Vue
|
<template>
|
||
|
|
<nav class="flex items-center justify-between border-t border-gray-200 bg-white px-4 py-3 sm:px-6" aria-label="Pagination">
|
||
|
|
<div class="hidden sm:block">
|
||
|
|
<p class="text-sm text-gray-700">
|
||
|
|
Showing
|
||
|
|
{{ ' ' }}
|
||
|
|
<span class="font-medium">1</span>
|
||
|
|
{{ ' ' }}
|
||
|
|
to
|
||
|
|
{{ ' ' }}
|
||
|
|
<span class="font-medium">10</span>
|
||
|
|
{{ ' ' }}
|
||
|
|
of
|
||
|
|
{{ ' ' }}
|
||
|
|
<span class="font-medium">20</span>
|
||
|
|
{{ ' ' }}
|
||
|
|
results
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
<div class="flex flex-1 justify-between sm:justify-end">
|
||
|
|
<a href="#" class="relative inline-flex items-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus-visible:outline-offset-0">Previous</a>
|
||
|
|
<a href="#" class="relative ml-3 inline-flex items-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus-visible:outline-offset-0">Next</a>
|
||
|
|
</div>
|
||
|
|
</nav>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup>
|
||
|
|
const items = [
|
||
|
|
{ id: 1, title: 'Back End Developer', department: 'Engineering', type: 'Full-time', location: 'Remote' },
|
||
|
|
{ id: 2, title: 'Front End Developer', department: 'Engineering', type: 'Full-time', location: 'Remote' },
|
||
|
|
{ id: 3, title: 'User Interface Designer', department: 'Design', type: 'Full-time', location: 'Remote' },
|
||
|
|
]
|
||
|
|
</script>
|