Breaking News: Grepper is joining You.com. Read the official announcement!

tailwind react pagination

mpho moipolai answered on August 13, 2024 Popularity 6/10 Helpfulness 1/10

answer tailwind react pagination

tailwind react pagination

Comment

import { useCallback, useState } from "react";
2	import { FaChevronLeft, FaChevronRight } from "react-icons/fa";
3	
4	function Button2({ content, onClick, active, disabled }) {
5	  return (
6	    <button
7	      className={`flex flex-col cursor-pointer items-center justify-center w-9 h-9 shadow-[0_4px_10px_rgba(0,0,0,0.03)] text-sm font-normal transition-colors rounded-lg
8	      ${active ? "bg-red-500 text-white" : "text-red-500"}
9	      ${
10	        !disabled
11	          ? "bg-white hover:bg-red-500 hover:text-white"
12	          : "text-red-300 bg-white cursor-not-allowed"
13	      }
14	      `}
15	      onClick={onClick}
16	      disabled={disabled}
17	    >
18	      {content}
19	    </button>
20	  );
21	}
22	
23	function PaginationNav1({
24	  gotoPage,
25	  canPreviousPage,
26	  canNextPage,
27	  pageCount,
28	  pageIndex,
29	}) {
30	  const renderPageLinks = useCallback(() => {
31	    if (pageCount === 0) return null;
32	    const visiblePageButtonCount = 3;
33	    let numberOfButtons =
34	      pageCount < visiblePageButtonCount ? pageCount : visiblePageButtonCount;
35	    const pageIndices = [pageIndex];
36	    numberOfButtons--;
37	    [...Array(numberOfButtons)].forEach((_item, itemIndex) => {
38	      const pageNumberBefore = pageIndices[0] - 1;
39	      const pageNumberAfter = pageIndices[pageIndices.length - 1] + 1;
40	      if (
41	        pageNumberBefore >= 0 &&
42	        (itemIndex < numberOfButtons / 2 || pageNumberAfter > pageCount - 1)
43	      ) {
44	        pageIndices.unshift(pageNumberBefore);
45	      } else {
46	        pageIndices.push(pageNumberAfter);
47	      }
48	    });
49	    return pageIndices.map((pageIndexToMap) => (
50	      <li key={pageIndexToMap}>
51	        <Button2
52	          content={pageIndexToMap + 1}
53	          onClick={() => gotoPage(pageIndexToMap)}
54	          active={pageIndex === pageIndexToMap}
55	        />
56	      </li>
57	    ));
58	  }, [pageCount, pageIndex]);
59	  return (
60	    <ul className="flex gap-2">
61	      <li>
62	        <Button2
63	          content={
64	            <div className="flex ml-1">
65	              <FaChevronLeft size="0.6rem" />
66	              <FaChevronLeft size="0.6rem" className="-translate-x-1/2" />
67	            </div>
68	          }
69	          onClick={() => gotoPage(0)}
70	          disabled={!canPreviousPage}
71	        />
72	      </li>
73	      {renderPageLinks()}
74	      <li>
75	        <Button2
76	          content={
77	            <div className="flex ml-1">
78	              <FaChevronRight size="0.6rem" />
79	              <FaChevronRight size="0.6rem" className="-translate-x-1/2" />
80	            </div>
81	          }
82	          onClick={() => gotoPage(pageCount - 1)}
83	          disabled={!canNextPage}
84	        />
85	      </li>
86	    </ul>
87	  );
88	}
89	
90	function PaginationNav1Presentation() {
91	  const [pageIndex, setPageIndex] = useState(0);
92	  const pageCount = 10;
93	  return (
94	    <div className="flex gap-3 flex-wrap p-6 py-12">
95	      <PaginationNav1
96	        gotoPage={setPageIndex}
97	        canPreviousPage={pageIndex > 0}
98	        canNextPage={pageIndex < pageCount - 1}
99	        pageCount={pageCount}
100	        pageIndex={pageIndex}
101	      />
102	    </div>
103	  );
104	}
105	
106	export { PaginationNav1Presentation };
107

Popularity 6/10 Helpfulness 1/10 Language javascript

Source: www.tailwindreact.com

Tags: javascript react-pagination

Link to this answer
Share Copy Link

Contributed on Aug 13 2024

mpho moipolai

0 Answers Avg Quality 2/10

tailwind react pagination

Contents

More Related Answers

tailwind react pagination

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.