From 1d78c19b1b7e8f9ba6b4a632c781134e77d88d95 Mon Sep 17 00:00:00 2001 From: Mohamadzadeh <7796733@gmail.com> Date: Thu, 9 Jul 2026 16:18:10 +0330 Subject: [PATCH] change pagination icons --- dist/chunks/Pagination-BFHGSAKW.js | 147 --------------------- dist/chunks/Pagination-DjllHYU8.js | 196 ++++++++++++++++++++++++++++ dist/pagination.js | 128 +++++++++--------- dist/table.js | 2 +- src/icons/ChevronLeft.jsx | 27 ++++ src/icons/ChevronRight.jsx | 27 ++++ src/pagination/LightPagination.jsx | 7 +- src/pagination/Pagination.jsx | 7 +- src/pagination/SimplePagination.jsx | 7 +- 9 files changed, 327 insertions(+), 221 deletions(-) delete mode 100644 dist/chunks/Pagination-BFHGSAKW.js create mode 100644 dist/chunks/Pagination-DjllHYU8.js create mode 100644 src/icons/ChevronLeft.jsx create mode 100644 src/icons/ChevronRight.jsx diff --git a/dist/chunks/Pagination-BFHGSAKW.js b/dist/chunks/Pagination-BFHGSAKW.js deleted file mode 100644 index 974372f..0000000 --- a/dist/chunks/Pagination-BFHGSAKW.js +++ /dev/null @@ -1,147 +0,0 @@ -import { jsxs as x, jsx as l } from "react/jsx-runtime"; -import { useState as B, useRef as A, useEffect as v } from "react"; -import { HStack as w, Text as u, IconButton as y, Button as S, Input as E } from "@chakra-ui/react"; -import { IoChevronForwardOutline as M, IoChevronBackOutline as N } from "react-icons/io5/index.js"; -import { toFaDigits as e, toEnDigits as C } from "../utils.js"; -const V = ({ - currentPage: i, - totalPages: r, - totalCount: I, - onPageChange: c -}) => { - const [p, o] = B(e(i)), [m, d] = B(!1), [h, f] = B(null), a = A(null), D = Array.from( - /* @__PURE__ */ new Set([1, i, i + 1, r]) - ).filter((n) => n >= 1 && n <= r).sort((n, t) => n - t); - v(() => { - if (h !== null) { - i === h && (f(null), d(!1), o(e(i))); - return; - } - m || o(e(i)); - }, [i, m, h]), v(() => { - if (!m || !p || h !== null) return; - const n = parseInt(C(p), 10); - if (isNaN(n)) return; - const t = setTimeout(() => { - var b; - const s = Math.min(Math.max(n, 1), r); - s !== i ? (f(s), o(e(s)), c(s)) : (d(!1), o(e(i))), (b = a.current) == null || b.blur(); - }, 1e3); - return () => clearTimeout(t); - }, [ - p, - m, - h, - r, - i, - c - ]); - const k = () => { - var s, b; - const n = parseInt(C(p), 10); - if (isNaN(n)) { - o(e(i)), d(!1), f(null), (s = a.current) == null || s.blur(); - return; - } - const t = Math.min(Math.max(n, 1), r); - t !== i ? (f(t), o(e(t)), c(t)) : (o(e(i)), d(!1), f(null)), (b = a.current) == null || b.blur(); - }; - return r === 0 || !I ? null : /* @__PURE__ */ x( - w, - { - justifyContent: "space-around", - backgroundColor: "white", - py: "10px", - px: "16px", - rounded: "lg", - border: "1px", - borderColor: "blue.200", - w: "100%", - children: [ - /* @__PURE__ */ x(w, { spacing: 2, whiteSpace: "nowrap", children: [ - /* @__PURE__ */ l(u, { fontWeight: "bold", children: "صفحه" }), - /* @__PURE__ */ l(u, { children: e(i) }), - /* @__PURE__ */ l(u, { fontWeight: "bold", children: "از" }), - /* @__PURE__ */ l(u, { children: e(r) }) - ] }), - /* @__PURE__ */ x(w, { spacing: 2, alignItems: "center", justifyContent: "center", children: [ - /* @__PURE__ */ l( - y, - { - size: "md", - bg: "#e6e6f1", - color: "#4B49AC", - _hover: { bg: "#cbcbe8" }, - onClick: () => c(i - 1), - isDisabled: i === 1, - icon: /* @__PURE__ */ l(M, {}), - "aria-label": "صفحه قبلی" - } - ), - D.map((n) => /* @__PURE__ */ l( - S, - { - size: "md", - bg: i === n ? "#4B49AC" : "#e6e6f1", - color: i === n ? "#e6e6f1" : "#4B49AC", - _hover: { bg: i === n ? "#4B49AC" : "#cbcbe8" }, - onClick: () => c(n), - variant: "soft", - children: e(n) - }, - n - )), - /* @__PURE__ */ l( - y, - { - size: "md", - bg: "#e6e6f1", - color: "#4B49AC", - _hover: { bg: "#cbcbe8" }, - onClick: () => c(i + 1), - isDisabled: i === r, - icon: /* @__PURE__ */ l(N, {}), - "aria-label": "صفحه بعدی" - } - ), - /* @__PURE__ */ l( - E, - { - ref: a, - type: "text", - inputMode: "numeric", - placeholder: "صفحه", - w: "100px", - value: p, - onFocus: () => { - d(!0), f(null), o(""); - }, - onChange: (n) => { - const t = n.target.value, s = C(t).replace(/\D/g, ""); - o(e(s)); - }, - onBlur: () => { - p || (o(e(i)), d(!1), f(null)); - }, - onKeyDown: (n) => { - n.key === "Enter" && k(); - }, - textAlign: "center", - color: "#1D2939", - px: 1, - minW: 0, - dir: "ltr" - } - ) - ] }), - /* @__PURE__ */ x(w, { spacing: 2, whiteSpace: "nowrap", children: [ - /* @__PURE__ */ l(u, { fontWeight: "bold", children: "تعداد کل:" }), - /* @__PURE__ */ l(u, { children: e(I) }) - ] }) - ] - } - ); -}; -export { - V as P -}; diff --git a/dist/chunks/Pagination-DjllHYU8.js b/dist/chunks/Pagination-DjllHYU8.js new file mode 100644 index 0000000..380cb14 --- /dev/null +++ b/dist/chunks/Pagination-DjllHYU8.js @@ -0,0 +1,196 @@ +import { jsxs as a, jsx as n } from "react/jsx-runtime"; +import { forwardRef as D, useState as k, useRef as L, useEffect as y } from "react"; +import { HStack as v, Text as u, IconButton as B, Button as S, Input as W } from "@chakra-ui/react"; +import { toFaDigits as t, toEnDigits as C } from "../utils.js"; +const A = D( + ({ size: i = 24, title: o, children: h, ...l }, r) => /* @__PURE__ */ a( + "svg", + { + ref: r, + xmlns: "http://www.w3.org/2000/svg", + width: i, + height: i, + viewBox: "0 0 24 24", + fill: "none", + stroke: "currentColor", + strokeWidth: "2", + strokeLinecap: "round", + strokeLinejoin: "round", + ...l, + children: [ + o && /* @__PURE__ */ n("title", { children: o }), + /* @__PURE__ */ n("path", { d: "m15 18-6-6 6-6" }), + h + ] + } + ) +); +A.displayName = "ChevronLeft"; +const I = D( + ({ size: i = 24, title: o, children: h, ...l }, r) => /* @__PURE__ */ a( + "svg", + { + ref: r, + xmlns: "http://www.w3.org/2000/svg", + width: i, + height: i, + viewBox: "0 0 24 24", + fill: "none", + stroke: "currentColor", + strokeWidth: "2", + strokeLinecap: "round", + strokeLinejoin: "round", + ...l, + children: [ + o && /* @__PURE__ */ n("title", { children: o }), + /* @__PURE__ */ n("path", { d: "m9 18 6-6-6-6" }), + h + ] + } + ) +); +I.displayName = "ChevronRight"; +const T = ({ + currentPage: i, + totalPages: o, + totalCount: h, + onPageChange: l +}) => { + const [r, s] = k(t(i)), [w, p] = k(!1), [m, f] = k(null), x = L(null), N = Array.from( + /* @__PURE__ */ new Set([1, i, i + 1, o]) + ).filter((e) => e >= 1 && e <= o).sort((e, c) => e - c); + y(() => { + if (m !== null) { + i === m && (f(null), p(!1), s(t(i))); + return; + } + w || s(t(i)); + }, [i, w, m]), y(() => { + if (!w || !r || m !== null) return; + const e = parseInt(C(r), 10); + if (isNaN(e)) return; + const c = setTimeout(() => { + var b; + const d = Math.min(Math.max(e, 1), o); + d !== i ? (f(d), s(t(d)), l(d)) : (p(!1), s(t(i))), (b = x.current) == null || b.blur(); + }, 1e3); + return () => clearTimeout(c); + }, [ + r, + w, + m, + o, + i, + l + ]); + const j = () => { + var d, b; + const e = parseInt(C(r), 10); + if (isNaN(e)) { + s(t(i)), p(!1), f(null), (d = x.current) == null || d.blur(); + return; + } + const c = Math.min(Math.max(e, 1), o); + c !== i ? (f(c), s(t(c)), l(c)) : (s(t(i)), p(!1), f(null)), (b = x.current) == null || b.blur(); + }; + return o === 0 || !h ? null : /* @__PURE__ */ a( + v, + { + justifyContent: "space-around", + backgroundColor: "white", + py: "10px", + px: "16px", + rounded: "lg", + border: "1px", + borderColor: "blue.200", + w: "100%", + children: [ + /* @__PURE__ */ a(v, { spacing: 2, whiteSpace: "nowrap", children: [ + /* @__PURE__ */ n(u, { fontWeight: "bold", children: "صفحه" }), + /* @__PURE__ */ n(u, { children: t(i) }), + /* @__PURE__ */ n(u, { fontWeight: "bold", children: "از" }), + /* @__PURE__ */ n(u, { children: t(o) }) + ] }), + /* @__PURE__ */ a(v, { spacing: 2, alignItems: "center", justifyContent: "center", children: [ + /* @__PURE__ */ n( + B, + { + size: "md", + bg: "#e6e6f1", + color: "#4B49AC", + _hover: { bg: "#cbcbe8" }, + onClick: () => l(i - 1), + isDisabled: i === 1, + icon: /* @__PURE__ */ n(I, {}), + "aria-label": "صفحه قبلی" + } + ), + N.map((e) => /* @__PURE__ */ n( + S, + { + size: "md", + bg: i === e ? "#4B49AC" : "#e6e6f1", + color: i === e ? "#e6e6f1" : "#4B49AC", + _hover: { bg: i === e ? "#4B49AC" : "#cbcbe8" }, + onClick: () => l(e), + variant: "soft", + children: t(e) + }, + e + )), + /* @__PURE__ */ n( + B, + { + size: "md", + bg: "#e6e6f1", + color: "#4B49AC", + _hover: { bg: "#cbcbe8" }, + onClick: () => l(i + 1), + isDisabled: i === o, + icon: /* @__PURE__ */ n(A, {}), + "aria-label": "صفحه بعدی" + } + ), + /* @__PURE__ */ n( + W, + { + ref: x, + type: "text", + inputMode: "numeric", + placeholder: "صفحه", + w: "100px", + value: r, + onFocus: () => { + p(!0), f(null), s(""); + }, + onChange: (e) => { + const c = e.target.value, d = C(c).replace(/\D/g, ""); + s(t(d)); + }, + onBlur: () => { + r || (s(t(i)), p(!1), f(null)); + }, + onKeyDown: (e) => { + e.key === "Enter" && j(); + }, + textAlign: "center", + color: "#1D2939", + px: 1, + minW: 0, + dir: "ltr" + } + ) + ] }), + /* @__PURE__ */ a(v, { spacing: 2, whiteSpace: "nowrap", children: [ + /* @__PURE__ */ n(u, { fontWeight: "bold", children: "تعداد کل:" }), + /* @__PURE__ */ n(u, { children: t(h) }) + ] }) + ] + } + ); +}; +export { + I as C, + T as P, + A as a +}; diff --git a/dist/pagination.js b/dist/pagination.js index aaf0527..2f9bc84 100644 --- a/dist/pagination.js +++ b/dist/pagination.js @@ -1,17 +1,17 @@ -import { jsxs as I, jsx as s } from "react/jsx-runtime"; -import { useState as C, useRef as N, useEffect as v, useCallback as E } from "react"; -import { HStack as y, IconButton as A, Button as g, Input as j, Text as M } from "@chakra-ui/react"; -import { IoChevronForwardOutline as z, IoChevronBackOutline as S } from "react-icons/io5/index.js"; -import { toFaDigits as f, toEnDigits as k } from "./utils.js"; -import { P as G } from "./chunks/Pagination-BFHGSAKW.js"; -const L = ({ +import { jsxs as A, jsx as s } from "react/jsx-runtime"; +import { useState as B, useRef as g, useEffect as v, useCallback as E } from "react"; +import { HStack as y, IconButton as I, Button as N, Input as j, Text as M } from "@chakra-ui/react"; +import { toFaDigits as f, toEnDigits as D } from "./utils.js"; +import { C as z, a as S } from "./chunks/Pagination-DjllHYU8.js"; +import { P as J } from "./chunks/Pagination-DjllHYU8.js"; +const K = ({ currentPage: e, - totalPages: l, - totalCount: D, + totalPages: t, + totalCount: k, onPageChange: a }) => { - const [r, n] = C(f(e)), [d, c] = C(!1), [b, o] = C(null), x = N(null), h = [.../* @__PURE__ */ new Set([1, e, l])].filter( - (i) => i >= 1 && i <= l + const [r, n] = B(f(e)), [d, c] = B(!1), [b, o] = B(null), x = g(null), h = [.../* @__PURE__ */ new Set([1, e, t])].filter( + (i) => i >= 1 && i <= t ); v(() => { if (b !== null) { @@ -21,33 +21,33 @@ const L = ({ d || n(f(e)); }, [e, d, b]), v(() => { if (!d || !r || b !== null) return; - const i = parseInt(k(r), 10); + const i = parseInt(D(r), 10); if (isNaN(i)) return; const m = setTimeout(() => { - var B; - const u = Math.min(Math.max(i, 1), l); - u !== e ? (o(u), n(f(u)), a(u)) : (c(!1), n(f(e))), (B = x.current) == null || B.blur(); + var C; + const u = Math.min(Math.max(i, 1), t); + u !== e ? (o(u), n(f(u)), a(u)) : (c(!1), n(f(e))), (C = x.current) == null || C.blur(); }, 1e3); return () => clearTimeout(m); }, [ r, d, b, - l, + t, e, a ]); const w = () => { - var u, B; - const i = parseInt(k(r), 10); + var u, C; + const i = parseInt(D(r), 10); if (isNaN(i)) { n(f(e)), c(!1), o(null), (u = x.current) == null || u.blur(); return; } - const m = Math.min(Math.max(i, 1), l); - m !== e ? (o(m), n(f(m)), a(m)) : (n(f(e)), c(!1), o(null)), (B = x.current) == null || B.blur(); + const m = Math.min(Math.max(i, 1), t); + m !== e ? (o(m), n(f(m)), a(m)) : (n(f(e)), c(!1), o(null)), (C = x.current) == null || C.blur(); }; - return l === 0 || !D ? null : /* @__PURE__ */ I( + return t === 0 || !k ? null : /* @__PURE__ */ A( y, { justifyContent: "space-around", @@ -59,9 +59,9 @@ const L = ({ borderColor: "blue.200", w: "100%", children: [ - /* @__PURE__ */ I(y, { spacing: 2, alignItems: "center", justifyContent: "center", children: [ + /* @__PURE__ */ A(y, { spacing: 2, alignItems: "center", justifyContent: "center", children: [ /* @__PURE__ */ s( - A, + I, { size: "md", bg: "#e6e6f1", @@ -74,7 +74,7 @@ const L = ({ } ), h.map((i) => /* @__PURE__ */ s( - g, + N, { size: "md", px: 2, @@ -88,14 +88,14 @@ const L = ({ i )), /* @__PURE__ */ s( - A, + I, { size: "md", bg: "#e6e6f1", color: "#4B49AC", _hover: { bg: "#cbcbe8" }, onClick: () => a(e + 1), - isDisabled: e === l, + isDisabled: e === t, icon: /* @__PURE__ */ s(S, {}), "aria-label": "صفحه بعدی" } @@ -113,7 +113,7 @@ const L = ({ c(!0), o(null), n(""); }, onChange: (i) => { - const m = i.target.value, u = k(m).replace(/\D/g, ""); + const m = i.target.value, u = D(m).replace(/\D/g, ""); n(f(u)); }, onBlur: () => { @@ -130,67 +130,67 @@ const L = ({ } ) ] }), - /* @__PURE__ */ I(y, { spacing: 2, children: [ + /* @__PURE__ */ A(y, { spacing: 2, children: [ /* @__PURE__ */ s(M, { w: "auto", fontWeight: "bold", whiteSpace: "nowrap", children: "تعداد کل:" }), - /* @__PURE__ */ s(M, { children: f(D) }) + /* @__PURE__ */ s(M, { children: f(k) }) ] }) ] } ); -}, O = ({ +}, H = ({ currentPage: e, - totalPages: l, - totalCount: D, + totalPages: t, + totalCount: k, onPageChange: a }) => { - const [r, n] = C(""), [d, c] = C(!1), [b, o] = C(null), x = N(null), h = b ?? e, w = E( - (t) => { - const p = Math.min(Math.max(t, 1), l); + const [r, n] = B(""), [d, c] = B(!1), [b, o] = B(null), x = g(null), h = b ?? e, w = E( + (l) => { + const p = Math.min(Math.max(l, 1), t); c(!1), n(""), o(null), p !== e && a(p); }, - [e, l, a] + [e, t, a] ), i = E(() => { if (!r) { c(!1), n(""), o(null); return; } - const t = parseInt(k(r), 10); - if (isNaN(t)) { + const l = parseInt(D(r), 10); + if (isNaN(l)) { c(!1), n(""), o(null); return; } - const p = Math.min(Math.max(t, 1), l); + const p = Math.min(Math.max(l, 1), t); c(!1), n(""), p !== e ? (o(p), a(p)) : o(null); - }, [r, e, l, a]); + }, [r, e, t, a]); v(() => { - var t; - d && ((t = x.current) == null || t.focus()); + var l; + d && ((l = x.current) == null || l.focus()); }, [d]), v(() => { b !== null && e === b && o(null); }, [e, b]), v(() => { if (!d || !r) return; - const t = setTimeout(() => { + const l = setTimeout(() => { i(); }, 1e3); - return () => clearTimeout(t); + return () => clearTimeout(l); }, [r, d, i]); const m = () => { o(null), n(""), c(!0); - }, u = (t, p = !1) => /* @__PURE__ */ s( - g, + }, u = (l, p = !1) => /* @__PURE__ */ s( + N, { size: "md", bg: p ? "#4B49AC" : "#e6e6f1", color: p ? "#e6e6f1" : "#4B49AC", _hover: { bg: p ? "#4B49AC" : "#cbcbe8" }, - onClick: p ? m : () => w(t), + onClick: p ? m : () => w(l), variant: "soft", - children: f(t) + children: f(l) }, - t + l ); - if (l === 0 || !D) return null; - const B = l > 1 && h !== 1, T = l > 1 && h !== l; + if (t === 0 || !k) return null; + const C = t > 1 && h !== 1, T = t > 1 && h !== t; return /* @__PURE__ */ s( y, { @@ -202,9 +202,9 @@ const L = ({ border: "1px", borderColor: "blue.200", w: "100%", - children: /* @__PURE__ */ I(y, { spacing: 2, alignItems: "center", justifyContent: "center", children: [ + children: /* @__PURE__ */ A(y, { spacing: 2, alignItems: "center", justifyContent: "center", children: [ /* @__PURE__ */ s( - A, + I, { size: "md", bg: "#e6e6f1", @@ -216,7 +216,7 @@ const L = ({ "aria-label": "صفحه قبلی" } ), - B && u(1), + C && u(1), d ? /* @__PURE__ */ s( j, { @@ -226,15 +226,15 @@ const L = ({ placeholder: "صفحه", w: "48px", value: r, - onChange: (t) => { - const p = t.target.value, V = k(p).replace(/\D/g, ""); + onChange: (l) => { + const p = l.target.value, V = D(p).replace(/\D/g, ""); n(f(V)); }, onBlur: () => { r ? i() : (n(""), c(!1), o(null)); }, - onKeyDown: (t) => { - t.key === "Enter" && i(), t.key === "Escape" && (n(""), c(!1), o(null)); + onKeyDown: (l) => { + l.key === "Enter" && i(), l.key === "Escape" && (n(""), c(!1), o(null)); }, textAlign: "center", color: "#1D2939", @@ -243,16 +243,16 @@ const L = ({ dir: "ltr" } ) : u(h, !0), - T && u(l), + T && u(t), /* @__PURE__ */ s( - A, + I, { size: "md", bg: "#e6e6f1", color: "#4B49AC", _hover: { bg: "#cbcbe8" }, onClick: () => w(h + 1), - isDisabled: h === l, + isDisabled: h === t, icon: /* @__PURE__ */ s(S, {}), "aria-label": "صفحه بعدی" } @@ -262,7 +262,7 @@ const L = ({ ); }; export { - L as LightPagination, - G as Pagination, - O as SimplePagination + K as LightPagination, + J as Pagination, + H as SimplePagination }; diff --git a/dist/table.js b/dist/table.js index cf2efa9..3dd98bb 100644 --- a/dist/table.js +++ b/dist/table.js @@ -1,6 +1,6 @@ import { jsx as r, jsxs as X, Fragment as ne } from "react/jsx-runtime"; import { VStack as oe, Box as _, Tbody as re, Tr as H, Td as F, Text as R, Thead as le, Th as ce, Table as se, Checkbox as W, HStack as Y, Spacer as ie } from "@chakra-ui/react"; -import { P as ue } from "./chunks/Pagination-BFHGSAKW.js"; +import { P as ue } from "./chunks/Pagination-DjllHYU8.js"; import { toFaDigits as q } from "./utils.js"; import { useReactTable as ae, getCoreRowModel as de, flexRender as J } from "@tanstack/react-table"; import { useMemo as P, useCallback as p, useState as me, useRef as fe, useEffect as ge, createContext as he, useContext as be } from "react"; diff --git a/src/icons/ChevronLeft.jsx b/src/icons/ChevronLeft.jsx new file mode 100644 index 0000000..335cf56 --- /dev/null +++ b/src/icons/ChevronLeft.jsx @@ -0,0 +1,27 @@ +import { forwardRef } from "react"; + +export const ChevronLeft = forwardRef( + ({ size = 24, title, children, ...props }, ref) => { + return ( + + {title && {title}} + + {children} + + ); + }, +); + +ChevronLeft.displayName = "ChevronLeft"; diff --git a/src/icons/ChevronRight.jsx b/src/icons/ChevronRight.jsx new file mode 100644 index 0000000..6e4c040 --- /dev/null +++ b/src/icons/ChevronRight.jsx @@ -0,0 +1,27 @@ +import { forwardRef } from "react"; + +export const ChevronRight = forwardRef( + ({ size = 24, title, children, ...props }, ref) => { + return ( + + {title && {title}} + + {children} + + ); + }, +); + +ChevronRight.displayName = "ChevronRight"; diff --git a/src/pagination/LightPagination.jsx b/src/pagination/LightPagination.jsx index e8fd922..99dc676 100644 --- a/src/pagination/LightPagination.jsx +++ b/src/pagination/LightPagination.jsx @@ -1,7 +1,8 @@ import { useEffect, useRef, useState } from "react"; import { Button, HStack, IconButton, Input, Text } from "@chakra-ui/react"; -import { IoChevronBackOutline, IoChevronForwardOutline } from "react-icons/io5/index.js"; import { toEnDigits, toFaDigits } from "../utils/numbers.js"; +import { ChevronLeft } from "../icons/ChevronLeft.jsx"; +import { ChevronRight } from "../icons/ChevronRight.jsx"; export const LightPagination = ({ currentPage, @@ -113,7 +114,7 @@ export const LightPagination = ({ _hover={{ bg: "#cbcbe8" }} onClick={() => onPageChange(currentPage - 1)} isDisabled={currentPage === 1} - icon={} + icon={} aria-label="صفحه قبلی" /> @@ -139,7 +140,7 @@ export const LightPagination = ({ _hover={{ bg: "#cbcbe8" }} onClick={() => onPageChange(currentPage + 1)} isDisabled={currentPage === totalPages} - icon={} + icon={} aria-label="صفحه بعدی" /> diff --git a/src/pagination/Pagination.jsx b/src/pagination/Pagination.jsx index 69f4b5a..12ec847 100644 --- a/src/pagination/Pagination.jsx +++ b/src/pagination/Pagination.jsx @@ -1,7 +1,8 @@ import { useEffect, useRef, useState } from "react"; import { Button, HStack, IconButton, Input, Text } from "@chakra-ui/react"; -import { IoChevronBackOutline, IoChevronForwardOutline } from "react-icons/io5/index.js"; import { toEnDigits, toFaDigits } from "../utils/numbers.js"; +import { ChevronRight } from "../icons/ChevronRight.jsx"; +import { ChevronLeft } from "../icons/ChevronLeft.jsx"; export const Pagination = ({ currentPage, @@ -122,7 +123,7 @@ export const Pagination = ({ _hover={{ bg: "#cbcbe8" }} onClick={() => onPageChange(currentPage - 1)} isDisabled={currentPage === 1} - icon={} + icon={} aria-label="صفحه قبلی" /> @@ -147,7 +148,7 @@ export const Pagination = ({ _hover={{ bg: "#cbcbe8" }} onClick={() => onPageChange(currentPage + 1)} isDisabled={currentPage === totalPages} - icon={} + icon={} aria-label="صفحه بعدی" /> diff --git a/src/pagination/SimplePagination.jsx b/src/pagination/SimplePagination.jsx index 447228b..0985745 100644 --- a/src/pagination/SimplePagination.jsx +++ b/src/pagination/SimplePagination.jsx @@ -1,7 +1,8 @@ import { Button, HStack, IconButton, Input } from "@chakra-ui/react"; import { useCallback, useEffect, useRef, useState } from "react"; -import { IoChevronBackOutline, IoChevronForwardOutline } from "react-icons/io5/index.js"; import { toEnDigits, toFaDigits } from "../utils/numbers.js"; +import { ChevronLeft } from "../icons/ChevronLeft.jsx"; +import { ChevronRight } from "../icons/ChevronRight.jsx"; export const SimplePagination = ({ currentPage, @@ -128,7 +129,7 @@ export const SimplePagination = ({ _hover={{ bg: "#cbcbe8" }} onClick={() => goToPage(visibleCurrentPage - 1)} isDisabled={visibleCurrentPage === 1} - icon={} + icon={} aria-label="صفحه قبلی" /> @@ -186,7 +187,7 @@ export const SimplePagination = ({ _hover={{ bg: "#cbcbe8" }} onClick={() => goToPage(visibleCurrentPage + 1)} isDisabled={visibleCurrentPage === totalPages} - icon={} + icon={} aria-label="صفحه بعدی" />