Add the LinkButton and Pagination components.

Author: macroing

README.md

@@ -26,7 +26,9 @@ The components in this library will be described below.
 - [Form](https://github.com/macroing/simple-react-components/tree/master/documentation/form) provides a component that defines a form.
 - [Input](https://github.com/macroing/simple-react-components/tree/master/documentation/input) provides a component that defines an input.
 - [Jumbotron](https://github.com/macroing/simple-react-components/tree/master/documentation/jumbotron) provides a component that defines a jumbotron.
+- [LinkButton](https://github.com/macroing/simple-react-components/tree/master/documentation/link-button) provides a component that defines a link button.
 - [MenuBar](https://github.com/macroing/simple-react-components/tree/master/documentation/menu-bar) provides a component that defines a menu bar.
+- [Pagination](https://github.com/macroing/simple-react-components/tree/master/documentation/pagination) provides a component that defines a pagination.
 - [Select](https://github.com/macroing/simple-react-components/tree/master/documentation/select) provides a component that defines a select.
 - [TabPane](https://github.com/macroing/simple-react-components/tree/master/documentation/tab-pane) provides a component that defines a tab pane.
 - [TextArea](https://github.com/macroing/simple-react-components/tree/master/documentation/text-area) provides a component that defines a text area.

dist/index.js

@@ -0,0 +1 @@
+# `LinkButton`

documentation/link-button/README.md

@@ -0,0 +1 @@
+# `Pagination`

documentation/pagination/README.md

@@ -5,10 +5,12 @@ import Footer from "./src/Footer";
 import Form from "./src/Form";
 import Input from "./src/Input";
 import Jumbotron from "./src/Jumbotron";
+import LinkButton from "./src/LinkButton";
 import MenuBar from "./src/MenuBar";
 import MobileMenuBar from "./src/MobileMenuBar";
+import Pagination from "./src/Pagination";
 import Select from "./src/Select";
 import TabPane from "./src/TabPane";
 import TextArea from "./src/TextArea";
 
-export { Button, DesktopMenuBar, Dialog, Footer, Form, Input, Jumbotron, MenuBar, MobileMenuBar, Select, TabPane, TextArea };
+export { Button, DesktopMenuBar, Dialog, Footer, Form, Input, Jumbotron, LinkButton, MenuBar, MobileMenuBar, Pagination, Select, TabPane, TextArea };

index.js

@@ -0,0 +1,16 @@
+import importedStyles from "./LinkButton.module.css";
+
+export default function LinkButton(props) {
+  let { children, styles, ...rest } = props;
+
+  //If no styles property has been assigned, the imported CSS module will be used for styling.
+  if (styles === null || styles === undefined) {
+    styles = importedStyles;
+  }
+
+  return (
+    <button className={styles.link_button} {...rest}>
+      {children}
+    </button>
+  );
+}

src/LinkButton.js

@@ -0,0 +1,28 @@
+.link_button {
+  --src-link-button-color: #333333;
+  --src-link-button-color-disabled: #dddddd;
+  --src-link-button-color-hover: #1877f2;
+
+  background-color: transparent;
+  border: none;
+  color: var(--src-link-button-color);
+  cursor: pointer;
+  font-family: inherit;
+  text-decoration: none;
+}
+
+.link_button:hover {
+  color: var(--src-link-button-color-hover);
+  text-decoration: underline;
+}
+
+.link_button:disabled {
+  background-color: transparent;
+  border: none;
+  color: var(--src-link-button-color-disabled);
+  cursor: default;
+}
+
+.link_button:disabled:hover {
+  text-decoration: none;
+}

src/LinkButton.module.css

@@ -0,0 +1,69 @@
+import LinkButton from "./LinkButton";
+
+import importedStyles from "./Pagination.module.css";
+
+export default function Pagination(props) {
+  const items = Math.max(parseInt(props.items) || 1, 1);
+  const itemsPerPage = Math.max(parseInt(props.itemsPerPage) || 1, 1);
+  const maximumPagesPerSide = Math.max(parseInt(props.maximumPagesPerSide) || 0, 0);
+  const onClick = props.onClick;
+  const page = Math.max(parseInt(props.page) || 1, 1);
+  const pages = Math.ceil(items / itemsPerPage);
+  const styles = props.styles || importedStyles;
+
+  const isEnablingPreviousPage = page > 1;
+  const isEnablingNextPage = page < pages;
+
+  const previousPage = isEnablingPreviousPage ? page - 1 : page;
+  const nextPage = isEnablingNextPage ? page + 1 : page;
+
+  let pageMinimum = page - maximumPagesPerSide;
+  let pageMaximum = page + maximumPagesPerSide;
+
+  if (pageMinimum < 1 && pageMaximum > pages) {
+    pageMinimum = 1;
+    pageMaximum = pages;
+  } else if (pageMinimum < 1) {
+    pageMaximum = Math.min(pageMaximum + (1 - pageMinimum), pages);
+    pageMinimum = 1;
+  } else if (pageMaximum > pages) {
+    pageMinimum = Math.max(pageMinimum - (pageMaximum - pages), 1);
+    pageMaximum = pages;
+  }
+
+  const array = [];
+
+  for (let i = pageMinimum; i <= pageMaximum; i++) {
+    array.push(i);
+  }
+
+  function handleClick(currentPage) {
+    if (currentPage !== page && onClick) {
+      onClick(currentPage);
+    }
+  }
+
+  return (
+    <div className={styles.pagination}>
+      <ul>
+        <li>
+          <LinkButton disabled={!isEnablingPreviousPage} onClick={() => handleClick(previousPage)}>
+            &laquo;
+          </LinkButton>
+        </li>
+        {array.map((currentPage) => (
+          <li key={"page-" + currentPage}>
+            <LinkButton disabled={currentPage === page} onClick={() => handleClick(currentPage)}>
+              {currentPage}
+            </LinkButton>
+          </li>
+        ))}
+        <li>
+          <LinkButton disabled={!isEnablingNextPage} onClick={() => handleClick(nextPage)}>
+            &raquo;
+          </LinkButton>
+        </li>
+      </ul>
+    </div>
+  );
+}

src/Pagination.js

@@ -0,0 +1,25 @@
+.pagination {
+  align-items: center;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: center;
+  width: 100%;
+}
+
+.pagination > ul {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: 10px;
+  justify-content: center;
+  list-style-type: none;
+  margin: 0px;
+  padding: 0px;
+  width: 100%;
+}
+
+.pagination > ul > li {
+  margin: 0px;
+  padding: 0px;
+}