rewrite feed table

src/components/ui/pagination/Pagination.vue

@@ -1,33 +1,32 @@
 <script setup>
-import { reactiveOmit } from "@vueuse/core";
-import { PaginationRoot, useForwardPropsEmits } from "reka-ui";
-import { cn } from "@/lib/utils";
+    import { PaginationRoot, useForwardPropsEmits } from 'reka-ui';
+    import { cn } from '@/lib/utils';
+    import { reactiveOmit } from '@vueuse/core';
 
-const props = defineProps({
-  page: { type: Number, required: false },
-  defaultPage: { type: Number, required: false },
-  itemsPerPage: { type: Number, required: true },
-  total: { type: Number, required: false },
-  siblingCount: { type: Number, required: false },
-  disabled: { type: Boolean, required: false },
-  showEdges: { type: Boolean, required: false },
-  asChild: { type: Boolean, required: false },
-  as: { type: null, required: false },
-  class: { type: null, required: false },
-});
-const emits = defineEmits(["update:page"]);
+    const props = defineProps({
+        page: { type: Number, required: false },
+        defaultPage: { type: Number, required: false },
+        itemsPerPage: { type: Number, required: true },
+        total: { type: Number, required: false },
+        siblingCount: { type: Number, required: false },
+        disabled: { type: Boolean, required: false },
+        showEdges: { type: Boolean, required: false },
+        asChild: { type: Boolean, required: false },
+        as: { type: null, required: false },
+        class: { type: null, required: false }
+    });
+    const emits = defineEmits(['update:page']);
 
-const delegatedProps = reactiveOmit(props, "class");
-const forwarded = useForwardPropsEmits(delegatedProps, emits);
+    const delegatedProps = reactiveOmit(props, 'class');
+    const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>
 
 <template>
-  <PaginationRoot
-    v-slot="slotProps"
-    data-slot="pagination"
-    v-bind="forwarded"
-    :class="cn('mx-auto flex w-full justify-center', props.class)"
-  >
-    <slot v-bind="slotProps" />
-  </PaginationRoot>
+    <PaginationRoot
+        v-slot="slotProps"
+        data-slot="pagination"
+        v-bind="forwarded"
+        :class="cn('flex justify-center text-[13px]', props.class)">
+        <slot v-bind="slotProps" />
+    </PaginationRoot>
 </template>

src/components/ui/pagination/PaginationContent.vue

@@ -1,24 +1,23 @@
 <script setup>
-import { reactiveOmit } from "@vueuse/core";
-import { PaginationList } from "reka-ui";
-import { cn } from "@/lib/utils";
+    import { PaginationList } from 'reka-ui';
+    import { cn } from '@/lib/utils';
+    import { reactiveOmit } from '@vueuse/core';
 
-const props = defineProps({
-  asChild: { type: Boolean, required: false },
-  as: { type: null, required: false },
-  class: { type: null, required: false },
-});
+    const props = defineProps({
+        asChild: { type: Boolean, required: false },
+        as: { type: null, required: false },
+        class: { type: null, required: false }
+    });
 
-const delegatedProps = reactiveOmit(props, "class");
+    const delegatedProps = reactiveOmit(props, 'class');
 </script>
 
 <template>
-  <PaginationList
-    v-slot="slotProps"
-    data-slot="pagination-content"
-    v-bind="delegatedProps"
-    :class="cn('flex flex-row items-center gap-1', props.class)"
-  >
-    <slot v-bind="slotProps" />
-  </PaginationList>
+    <PaginationList
+        v-slot="slotProps"
+        data-slot="pagination-content"
+        v-bind="delegatedProps"
+        :class="cn('flex flex-row items-center gap-1', props.class)">
+        <slot v-bind="slotProps" />
+    </PaginationList>
 </template>

src/components/ui/pagination/PaginationEllipsis.vue

@@ -1,27 +1,26 @@
 <script setup>
-import { reactiveOmit } from "@vueuse/core";
-import { MoreHorizontal } from "lucide-vue-next";
-import { PaginationEllipsis } from "reka-ui";
-import { cn } from "@/lib/utils";
+    import { MoreHorizontal } from 'lucide-vue-next';
+    import { PaginationEllipsis } from 'reka-ui';
+    import { cn } from '@/lib/utils';
+    import { reactiveOmit } from '@vueuse/core';
 
-const props = defineProps({
-  asChild: { type: Boolean, required: false },
-  as: { type: null, required: false },
-  class: { type: null, required: false },
-});
+    const props = defineProps({
+        asChild: { type: Boolean, required: false },
+        as: { type: null, required: false },
+        class: { type: null, required: false }
+    });
 
-const delegatedProps = reactiveOmit(props, "class");
+    const delegatedProps = reactiveOmit(props, 'class');
 </script>
 
 <template>
-  <PaginationEllipsis
-    data-slot="pagination-ellipsis"
-    v-bind="delegatedProps"
-    :class="cn('flex size-9 items-center justify-center', props.class)"
-  >
-    <slot>
-      <MoreHorizontal class="size-4" />
-      <span class="sr-only">More pages</span>
-    </slot>
-  </PaginationEllipsis>
+    <PaginationEllipsis
+        data-slot="pagination-ellipsis"
+        v-bind="delegatedProps"
+        :class="cn('flex size-9 items-center justify-center text-[13px]', props.class)">
+        <slot>
+            <MoreHorizontal class="size-4" />
+            <span class="sr-only">More pages</span>
+        </slot>
+    </PaginationEllipsis>
 </template>

src/components/ui/pagination/PaginationFirst.vue

@@ -1,36 +1,29 @@
 <script setup>
-import { reactiveOmit } from "@vueuse/core";
-import { ChevronLeftIcon } from "lucide-vue-next";
-import { PaginationFirst, useForwardProps } from "reka-ui";
-import { cn } from "@/lib/utils";
-import { buttonVariants } from '@/components/ui/button';
+    import { PaginationFirst, useForwardProps } from 'reka-ui';
+    import { ChevronLeftIcon } from 'lucide-vue-next';
+    import { buttonVariants } from '@/components/ui/button';
+    import { cn } from '@/lib/utils';
+    import { reactiveOmit } from '@vueuse/core';
 
-const props = defineProps({
-  asChild: { type: Boolean, required: false },
-  as: { type: null, required: false },
-  size: { type: null, required: false, default: "default" },
-  class: { type: null, required: false },
-});
+    const props = defineProps({
+        asChild: { type: Boolean, required: false },
+        as: { type: null, required: false },
+        size: { type: null, required: false, default: 'default' },
+        class: { type: null, required: false }
+    });
 
-const delegatedProps = reactiveOmit(props, "class", "size");
-const forwarded = useForwardProps(delegatedProps);
+    const delegatedProps = reactiveOmit(props, 'class', 'size');
+    const forwarded = useForwardProps(delegatedProps);
 </script>
 
 <template>
-  <PaginationFirst
-    data-slot="pagination-first"
-    :class="
-      cn(
-        buttonVariants({ variant: 'ghost', size }),
-        'gap-1 px-2.5 sm:pr-2.5',
-        props.class,
-      )
-    "
-    v-bind="forwarded"
-  >
-    <slot>
-      <ChevronLeftIcon />
-      <span class="hidden sm:block">First</span>
-    </slot>
-  </PaginationFirst>
+    <PaginationFirst
+        data-slot="pagination-first"
+        :class="cn(buttonVariants({ variant: 'ghost', size }), 'text-[13px] gap-1 px-2.5 sm:pr-2.5', props.class)"
+        v-bind="forwarded">
+        <slot>
+            <ChevronLeftIcon />
+            <span class="hidden sm:block">First</span>
+        </slot>
+    </PaginationFirst>
 </template>

src/components/ui/pagination/PaginationItem.vue

@@ -1,35 +1,35 @@
 <script setup>
-import { reactiveOmit } from "@vueuse/core";
-import { PaginationListItem } from "reka-ui";
-import { cn } from "@/lib/utils";
-import { buttonVariants } from '@/components/ui/button';
+    import { PaginationListItem } from 'reka-ui';
+    import { buttonVariants } from '@/components/ui/button';
+    import { cn } from '@/lib/utils';
+    import { reactiveOmit } from '@vueuse/core';
 
-const props = defineProps({
-  value: { type: Number, required: true },
-  asChild: { type: Boolean, required: false },
-  as: { type: null, required: false },
-  size: { type: null, required: false, default: "icon" },
-  class: { type: null, required: false },
-  isActive: { type: Boolean, required: false },
-});
+    const props = defineProps({
+        value: { type: Number, required: true },
+        asChild: { type: Boolean, required: false },
+        as: { type: null, required: false },
+        size: { type: null, required: false, default: 'icon' },
+        class: { type: null, required: false },
+        isActive: { type: Boolean, required: false }
+    });
 
-const delegatedProps = reactiveOmit(props, "class", "size", "isActive");
+    const delegatedProps = reactiveOmit(props, 'class', 'size', 'isActive');
 </script>
 
 <template>
-  <PaginationListItem
-    data-slot="pagination-item"
-    v-bind="delegatedProps"
-    :class="
-      cn(
-        buttonVariants({
-          variant: isActive ? 'outline' : 'ghost',
-          size,
-        }),
-        props.class,
-      )
-    "
-  >
-    <slot />
-  </PaginationListItem>
+    <PaginationListItem
+        data-slot="pagination-item"
+        v-bind="delegatedProps"
+        :class="
+            cn(
+                buttonVariants({
+                    variant: isActive ? 'outline' : 'ghost',
+                    size
+                }),
+                'text-[13px]',
+                props.class
+            )
+        ">
+        <slot />
+    </PaginationListItem>
 </template>

src/components/ui/pagination/PaginationLast.vue

@@ -1,36 +1,29 @@
 <script setup>
-import { reactiveOmit } from "@vueuse/core";
-import { ChevronRightIcon } from "lucide-vue-next";
-import { PaginationLast, useForwardProps } from "reka-ui";
-import { cn } from "@/lib/utils";
-import { buttonVariants } from '@/components/ui/button';
+    import { PaginationLast, useForwardProps } from 'reka-ui';
+    import { ChevronRightIcon } from 'lucide-vue-next';
+    import { buttonVariants } from '@/components/ui/button';
+    import { cn } from '@/lib/utils';
+    import { reactiveOmit } from '@vueuse/core';
 
-const props = defineProps({
-  asChild: { type: Boolean, required: false },
-  as: { type: null, required: false },
-  size: { type: null, required: false, default: "default" },
-  class: { type: null, required: false },
-});
+    const props = defineProps({
+        asChild: { type: Boolean, required: false },
+        as: { type: null, required: false },
+        size: { type: null, required: false, default: 'default' },
+        class: { type: null, required: false }
+    });
 
-const delegatedProps = reactiveOmit(props, "class", "size");
-const forwarded = useForwardProps(delegatedProps);
+    const delegatedProps = reactiveOmit(props, 'class', 'size');
+    const forwarded = useForwardProps(delegatedProps);
 </script>
 
 <template>
-  <PaginationLast
-    data-slot="pagination-last"
-    :class="
-      cn(
-        buttonVariants({ variant: 'ghost', size }),
-        'gap-1 px-2.5 sm:pr-2.5',
-        props.class,
-      )
-    "
-    v-bind="forwarded"
-  >
-    <slot>
-      <span class="hidden sm:block">Last</span>
-      <ChevronRightIcon />
-    </slot>
-  </PaginationLast>
+    <PaginationLast
+        data-slot="pagination-last"
+        :class="cn(buttonVariants({ variant: 'ghost', size }), 'text-[13px] gap-1 px-2.5 sm:pr-2.5', props.class)"
+        v-bind="forwarded">
+        <slot>
+            <span class="hidden sm:block">Last</span>
+            <ChevronRightIcon />
+        </slot>
+    </PaginationLast>
 </template>

src/components/ui/pagination/PaginationNext.vue

@@ -1,36 +1,29 @@
 <script setup>
-import { reactiveOmit } from "@vueuse/core";
-import { ChevronRightIcon } from "lucide-vue-next";
-import { PaginationNext, useForwardProps } from "reka-ui";
-import { cn } from "@/lib/utils";
-import { buttonVariants } from '@/components/ui/button';
+    import { PaginationNext, useForwardProps } from 'reka-ui';
+    import { ChevronRightIcon } from 'lucide-vue-next';
+    import { buttonVariants } from '@/components/ui/button';
+    import { cn } from '@/lib/utils';
+    import { reactiveOmit } from '@vueuse/core';
 
-const props = defineProps({
-  asChild: { type: Boolean, required: false },
-  as: { type: null, required: false },
-  size: { type: null, required: false, default: "default" },
-  class: { type: null, required: false },
-});
+    const props = defineProps({
+        asChild: { type: Boolean, required: false },
+        as: { type: null, required: false },
+        size: { type: null, required: false, default: 'default' },
+        class: { type: null, required: false }
+    });
 
-const delegatedProps = reactiveOmit(props, "class", "size");
-const forwarded = useForwardProps(delegatedProps);
+    const delegatedProps = reactiveOmit(props, 'class', 'size');
+    const forwarded = useForwardProps(delegatedProps);
 </script>
 
 <template>
-  <PaginationNext
-    data-slot="pagination-next"
-    :class="
-      cn(
-        buttonVariants({ variant: 'ghost', size }),
-        'gap-1 px-2.5 sm:pr-2.5',
-        props.class,
-      )
-    "
-    v-bind="forwarded"
-  >
-    <slot>
-      <span class="hidden sm:block">Next</span>
-      <ChevronRightIcon />
-    </slot>
-  </PaginationNext>
+    <PaginationNext
+        data-slot="pagination-next"
+        :class="cn(buttonVariants({ variant: 'ghost', size }), 'text-[13px] gap-1 px-2.5 sm:pr-2.5', props.class)"
+        v-bind="forwarded">
+        <slot>
+            <span class="hidden sm:block">Next</span>
+            <ChevronRightIcon />
+        </slot>
+    </PaginationNext>
 </template>

src/components/ui/pagination/PaginationPrevious.vue

@@ -1,36 +1,29 @@
 <script setup>
-import { reactiveOmit } from "@vueuse/core";
-import { ChevronLeftIcon } from "lucide-vue-next";
-import { PaginationPrev, useForwardProps } from "reka-ui";
-import { cn } from "@/lib/utils";
-import { buttonVariants } from '@/components/ui/button';
+    import { PaginationPrev, useForwardProps } from 'reka-ui';
+    import { ChevronLeftIcon } from 'lucide-vue-next';
+    import { buttonVariants } from '@/components/ui/button';
+    import { cn } from '@/lib/utils';
+    import { reactiveOmit } from '@vueuse/core';
 
-const props = defineProps({
-  asChild: { type: Boolean, required: false },
-  as: { type: null, required: false },
-  size: { type: null, required: false, default: "default" },
-  class: { type: null, required: false },
-});
+    const props = defineProps({
+        asChild: { type: Boolean, required: false },
+        as: { type: null, required: false },
+        size: { type: null, required: false, default: 'default' },
+        class: { type: null, required: false }
+    });
 
-const delegatedProps = reactiveOmit(props, "class", "size");
-const forwarded = useForwardProps(delegatedProps);
+    const delegatedProps = reactiveOmit(props, 'class', 'size');
+    const forwarded = useForwardProps(delegatedProps);
 </script>
 
 <template>
-  <PaginationPrev
-    data-slot="pagination-previous"
-    :class="
-      cn(
-        buttonVariants({ variant: 'ghost', size }),
-        'gap-1 px-2.5 sm:pr-2.5',
-        props.class,
-      )
-    "
-    v-bind="forwarded"
-  >
-    <slot>
-      <ChevronLeftIcon />
-      <span class="hidden sm:block">Previous</span>
-    </slot>
-  </PaginationPrev>
+    <PaginationPrev
+        data-slot="pagination-previous"
+        :class="cn(buttonVariants({ variant: 'ghost', size }), 'text-[13px] gap-1 px-2.5 sm:pr-2.5', props.class)"
+        v-bind="forwarded">
+        <slot>
+            <ChevronLeftIcon />
+            <span class="hidden sm:block">Previous</span>
+        </slot>
+    </PaginationPrev>
 </template>

src/components/ui/pagination/index.js

@@ -1,8 +1,8 @@
-export { default as Pagination } from "./Pagination.vue";
-export { default as PaginationContent } from "./PaginationContent.vue";
-export { default as PaginationEllipsis } from "./PaginationEllipsis.vue";
-export { default as PaginationFirst } from "./PaginationFirst.vue";
-export { default as PaginationItem } from "./PaginationItem.vue";
-export { default as PaginationLast } from "./PaginationLast.vue";
-export { default as PaginationNext } from "./PaginationNext.vue";
-export { default as PaginationPrevious } from "./PaginationPrevious.vue";
+export { default as Pagination } from './Pagination.vue';
+export { default as PaginationContent } from './PaginationContent.vue';
+export { default as PaginationEllipsis } from './PaginationEllipsis.vue';
+export { default as PaginationFirst } from './PaginationFirst.vue';
+export { default as PaginationItem } from './PaginationItem.vue';
+export { default as PaginationLast } from './PaginationLast.vue';
+export { default as PaginationNext } from './PaginationNext.vue';
+export { default as PaginationPrevious } from './PaginationPrevious.vue';