Dropdown errors and Pagination fixed

Parts/DropDown.js

@@ -40,11 +40,21 @@ let Dropdown = React.forwardRef(({ children, dropdownCss, onValueChanged, button
       await update();
     }
 
-    onValueChanged && onValueChanged(true);
+    try {
+      if (onValueChanged)
+        onValueChanged(true);
+    } catch (e) {
+      console.error(e);
+    }
   };
   const closeDropdownPopover = () => {
     setDropdownPopoverShow(false);
-    onValueChanged && onValueChanged(false);
+    try {
+      if (onValueChanged)
+        onValueChanged(false);
+    } catch (e) {
+      console.error(e);
+    }
   };
 
   function handleOutsideClick(event) {

Parts/Modal.js

@@ -1,5 +1,5 @@
 import React from "react"
-import { Third } from "./Layout"
+import { Half, Third } from "./Layout"
 
 import tw, { styled } from "twin.macro"
 import "styled-components/macro"
@@ -7,9 +7,9 @@ import "styled-components/macro"
 function Modal({ isOpen, onBackdropClick, ...props }) {
   if (isOpen) {
     return <div onClick={onBackdropClick} tw="fixed flex flex-col items-center inset-0 bg-gray-800 bg-opacity-75 z-50 overflow-y-auto lg:py-8">
-      <Third {...props} onClick={e => e.stopPropagation()}>
+      <Half {...props} onClick={e => e.stopPropagation()}>
         {props.children}
-      </Third>
+      </Half>
     </div>
   }
   return null;

Parts/Pagination.js

@@ -1,56 +1,116 @@
 import Button from "./Button";
-import tw, { styled } from "twin.macro"
+import tw, { styled } from "twin.macro";
-import "styled-components/macro"
+import "styled-components/macro";
 
-function CustomBtn({children, setPage, currentPage, page, css, ...props}){
+const Btn = styled(Button)(({ active }) => [tw`rounded-none mx-0`, active && tw`bg-accent`]);
-  console.log(css)
+
-  return <Button onClick={()=>setPage(Number(page??children))} css={[tw`rounded-none mx-0`, currentPage==children && tw`bg-accent`, css]} {...props}>{children}</Button>
+function CustomBtn({ children, setPage, currentPage, page, ...props }) {
+  return (
+    <Btn onClick={() => setPage(page)} active={page == currentPage} {...props}>
+      {children}
+    </Btn>
+  );
 }
 
 export default function Pagination({ currentPage, maxPages, setPage, ...props }) {
-
   function RenderButtons() {
     switch (maxPages) {
     case 1:
-      return <CustomBtn tw="rounded-xl" setPage={setPage} currentPage={currentPage}>1</CustomBtn>;
+      return (
+        <CustomBtn tw="rounded-xl" setPage={setPage} page={1} currentPage={currentPage}>
+            1
+        </CustomBtn>
+      );
     case 2:
-      return <>
+      return (
-        <CustomBtn tw="rounded-l-xl" setPage={setPage} currentPage={currentPage}>1</CustomBtn>
+        <>
-        <CustomBtn tw="rounded-r-xl" setPage={setPage} currentPage={currentPage}>2</CustomBtn>
+          <CustomBtn tw="rounded-l-xl" setPage={setPage} page={1} currentPage={currentPage}>
+              1
+          </CustomBtn>
+          <CustomBtn tw="rounded-r-xl" setPage={setPage} page={2} currentPage={currentPage}>
+              2
+          </CustomBtn>
         </>
+      );
     case 3:
-      return <>
+      return (
-        <CustomBtn tw="rounded-l-xl" setPage={setPage} currentPage={currentPage}>1</CustomBtn>
+        <>
-        <CustomBtn setPage={setPage} currentPage={currentPage}>2</CustomBtn>
+          <CustomBtn tw="rounded-l-xl" setPage={setPage} page={1} currentPage={currentPage}>
-        <CustomBtn tw="rounded-r-xl" setPage={setPage} currentPage={currentPage}>3</CustomBtn>
+              1
+          </CustomBtn>
+          <CustomBtn setPage={setPage} page={2} currentPage={currentPage}>
+              2
+          </CustomBtn>
+          <CustomBtn tw="rounded-r-xl" setPage={setPage} page={3} currentPage={currentPage}>
+              3
+          </CustomBtn>
         </>
+      );
     case 4:
-      return <>
+      return (
-        <CustomBtn tw="rounded-l-xl" setPage={setPage} currentPage={currentPage}>1</CustomBtn>
+        <>
-        <CustomBtn setPage={setPage} currentPage={currentPage}>2</CustomBtn>
+          <CustomBtn tw="rounded-l-xl" setPage={setPage} page={1} currentPage={currentPage}>
-        <CustomBtn setPage={setPage} currentPage={currentPage}>3</CustomBtn>
+              1
-        <CustomBtn tw="rounded-r-xl" setPage={setPage} currentPage={currentPage}>4</CustomBtn>
+          </CustomBtn>
+          <CustomBtn setPage={setPage} page={2} currentPage={currentPage}>
+              2
+          </CustomBtn>
+          <CustomBtn setPage={setPage} page={3} currentPage={currentPage}>
+              3
+          </CustomBtn>
+          <CustomBtn tw="rounded-r-xl" setPage={setPage} page={4} currentPage={currentPage}>
+              4
+          </CustomBtn>
         </>
+      );
     case 5:
-      return <>
+      return (
-        <CustomBtn tw="rounded-l-xl" setPage={setPage} currentPage={currentPage}>1</CustomBtn>
+        <>
-        <CustomBtn setPage={setPage} currentPage={currentPage}>2</CustomBtn>
+          <CustomBtn tw="rounded-l-xl" setPage={setPage} page={1} currentPage={currentPage}>
-        <CustomBtn setPage={setPage} currentPage={currentPage}>3</CustomBtn>
+              1
-        <CustomBtn setPage={setPage} currentPage={currentPage}>4</CustomBtn>
+          </CustomBtn>
-        <CustomBtn tw="rounded-r-xl" setPage={setPage} currentPage={currentPage}>5</CustomBtn>
+          <CustomBtn setPage={setPage} page={2} currentPage={currentPage}>
+              2
+          </CustomBtn>
+          <CustomBtn setPage={setPage} page={3} currentPage={currentPage}>
+              3
+          </CustomBtn>
+          <CustomBtn setPage={setPage} page={4} currentPage={currentPage}>
+              4
+          </CustomBtn>
+          <CustomBtn tw="rounded-r-xl" setPage={setPage} page={5} currentPage={currentPage}>
+              5
+          </CustomBtn>
         </>
+      );
     default: {
-      return <>
+      let firstItem = Math.min(Math.max(currentPage - 2, 1), maxPages - 4);
-        {currentPage > 3 && <CustomBtn css={[tw`rounded-l-xl`]} page={1} setPage={setPage} currentPage={currentPage}>&lt;</CustomBtn>}
+      let secondItem = Math.min(Math.max(currentPage - 1, 2), maxPages - 3);
-        <CustomBtn css={[currentPage <= 3 &&tw`rounded-l-xl`]} setPage={setPage} currentPage={currentPage}>{Math.max(currentPage-2,1)}</CustomBtn>
+      let thirdItem = Math.min(Math.max(currentPage, 3), maxPages - 2);
-        <CustomBtn setPage={setPage} currentPage={currentPage}>{Math.max(currentPage-2,1)+1}</CustomBtn>
+      let fourthItem = Math.min(Math.max(currentPage + 1, 4), maxPages - 1);
-        <CustomBtn setPage={setPage} currentPage={currentPage}>{Math.max(currentPage-2,1)+2}</CustomBtn>
+      let fifthItem = Math.min(Math.max(currentPage + 2, 5), maxPages);
-        {(maxPages - currentPage) >= 1 && <CustomBtn css={[(Math.max(currentPage-2,1)+3)==maxPages && tw`rounded-r-xl`]} setPage={setPage} currentPage={currentPage}>{Math.max(currentPage-2,1)+3}</CustomBtn>}
-        {(maxPages - currentPage) >= 2 && <CustomBtn css={[(Math.max(currentPage-2,1)+4)==maxPages && tw`rounded-r-xl`]} tw="rounded-r-xl" setPage={setPage} currentPage={currentPage}>{Math.max(currentPage-2,1)+4}</CustomBtn>}
-        {(maxPages - currentPage) >= 3 && <CustomBtn css={[tw`rounded-r-xl`]} page={maxPages} setPage={setPage} currentPage={currentPage}>&gt;</CustomBtn>}
-      </>
-    }
 
+      return (
+        <>
+          <CustomBtn css={[tw`rounded-l-xl`]} page={firstItem} setPage={setPage} currentPage={currentPage}>
+            {firstItem != 1 ? <>&lt;</> : firstItem}
+          </CustomBtn>
+
+          <CustomBtn setPage={setPage} page={secondItem} currentPage={currentPage}>
+            {secondItem}
+          </CustomBtn>
+          <CustomBtn setPage={setPage} page={thirdItem} currentPage={currentPage}>
+            {thirdItem}
+          </CustomBtn>
+          <CustomBtn setPage={setPage} page={fourthItem} currentPage={currentPage}>
+            {fourthItem}
+          </CustomBtn>
+          <CustomBtn css={[tw`rounded-r-xl`]} page={fifthItem} setPage={setPage} currentPage={currentPage}>
+            {fifthItem != maxPages ? <>&gt;</> : fifthItem}
+          </CustomBtn>
+        </>
+      );
+    }
     }
   }
 
@@ -58,5 +118,5 @@ export default function Pagination({ currentPage, maxPages, setPage, ...props })
     <div {...props}>
       <RenderButtons />
     </div>
-  )
+  );
 }

globalStyle.js

@@ -68,7 +68,7 @@ body {
 
 const GlobalStyles = () => {
   return <>
-    <BaseStyles />
+    {/* <BaseStyles /> */}
     <CustomStyles />
   </>
 }