Reformat Pagination component

tinytek-io · Aug 2, 2024 · f3fbf91 · f3fbf91
1 parent 8c51afb
commit f3fbf91
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 6 deletions.
diff --git a/docs/index.tsx b/docs/index.tsx
@@ -30,6 +30,7 @@ import { Menu, MenuItem, MenuSeparator } from "@/ui/components/Menu";
 import { Meter } from "@/ui/components/Meter";
 import { Modal } from "@/ui/components/Modal";
 import { NumberField } from "@/ui/components/NumberField";
+import { Pagination } from "@/ui/components/Pagination";
 import { Popover } from "@/ui/components/Popover";
 import { ProgressBar } from "@/ui/components/ProgressBar";
 import { Radio, RadioGroup } from "@/ui/components/RadioGroup";
@@ -55,7 +56,6 @@ import { BoldIcon, HelpCircleIcon, ItalicIcon, MoreHorizontalIcon, Pencil, Under
 import type { ReactNode } from "react";
 import { DialogTrigger, FileTrigger, MenuTrigger, TableBody, Text, TooltipTrigger } from "react-aria-components";
 import { chartDataMedium, radarDataMedium } from "./charts/_lib/data";
-import { Pagination } from "@/ui/components/Pagination";
 
 export const frontmatter = {
   pageType: "custom"

diff --git a/ui/components/Pagination.tsx b/ui/components/Pagination.tsx
@@ -1,8 +1,8 @@
-import { FocusScope, useFocusManager, useFocusVisible, useKeyboard } from "react-aria";
-import { Button } from "./Button";
 import { ArrowLeftIcon, ArrowRightIcon } from "lucide-react";
-import { tv } from "tailwind-variants";
 import type { ReactNode } from "react";
+import { FocusScope, useFocusManager, useFocusVisible, useKeyboard } from "react-aria";
+import { tv } from "tailwind-variants";
+import { Button } from "./Button";
 
 const pageBackgroundStyle = tv({
   base: "flex gap-1 rounded-md h-10 w-full items-center"
@@ -52,7 +52,7 @@ export function Pagination({
   return (
     <nav aria-label="Pagination" className={paginationStyles({ className })}>
       <Button variant="secondary" className="" onPress={handlePrevious} isDisabled={isFirstPage}>
-        <ArrowLeftIcon className="w-4 h-4" />
+        <ArrowLeftIcon className="h-4 w-4" />
         {previousLabel && <span className="hidden sm:block">{previousLabel}</span>}
       </Button>
       <FocusScope>
@@ -69,7 +69,7 @@ export function Pagination({
 
       <Button variant="secondary" className="" onPress={handleNext} isDisabled={isLastPage}>
         {nextLabel && <span className="hidden sm:block">{nextLabel}</span>}
-        <ArrowRightIcon className="w-4 h-4" />
+        <ArrowRightIcon className="h-4 w-4" />
       </Button>
     </nav>
   );