Initial Commit

app/components/ui/pagination/PaginationNext.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import type { PaginationNextProps } from 'reka-ui'
+
+import type { HTMLAttributes } from 'vue'
+import type { ButtonVariants } from '@/components/ui/button'
+import { reactiveOmit } from '@vueuse/core'
+import { PaginationNext, useForwardProps } from 'reka-ui'
+import { cn } from '@/lib/utils'
+import { buttonVariants } from '@/components/ui/button'
+
+const props = withDefaults(defineProps<PaginationNextProps & {
+  size?: ButtonVariants['size']
+  class?: HTMLAttributes['class']
+}>(), {
+  size: 'default',
+})
+
+const delegatedProps = reactiveOmit(props, 'class', 'size')
+const forwarded = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <PaginationNext
+    data-slot="pagination-next"
+    aria-label="Nächste Seite"
+    :class="cn(buttonVariants({ variant: 'ghost', size }), 'pr-1.5!', props.class)"
+    v-bind="forwarded"
+  >
+    <slot>
+      <span class="hidden sm:block">Weiter</span>
+      <Icon name="ph:caret-right-fill" data-icon="inline-end" class="cn-rtl-flip" />
+    </slot>
+  </PaginationNext>
+</template>