@autobusal/common 0.0.16 → 0.0.18

package/Pagination/Pagination.tsx

@@ -0,0 +1,39 @@
+import { TFunction } from 'i18next';
+import { Container, Left, Right, PageText, PageLink } from './styles';
+import { PaginationData } from './types';
+
+interface Props {
+  pages: PaginationData<unknown>
+  t: TFunction<'general'>
+}
+
+const Pagination = ({ pages, t }: Props): (JSX.Element | null) => {
+  if (pages.last_page < 2) {
+    return null;
+  }
+
+  const items = pages.links.map((item, index) => {
+    if (item.url) {
+      return <PageLink key={ index } to={ item.url } $active={ item.active }>{ item.label }</PageLink>;
+    }
+
+    return <PageText key={ index } $active={ item.active }>{ item.label }</PageText>;
+  });
+
+  return (
+    <Container>
+      <Left>
+        { t('pagination.showing', {
+          current: pages.current_page,
+          max: pages.last_page
+        }) }
+      </Left>
+
+      <Right>
+        { items }
+      </Right>
+    </Container>
+  );
+};
+
+export default Pagination;

package/Pagination/styles.ts

@@ -0,0 +1,61 @@
+import styled, { css } from 'styled-components';
+import { Link } from 'react-router-dom';
+
+interface LinkType {
+  $active: boolean
+}
+
+export const Container = styled.div`
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  flex-wrap: wrap;
+  gap: 10px;
+
+  @media (min-width: 480px) {
+    flex-direction: row;
+    justify-content: space-between;
+  }
+`;
+
+export const Left = styled.div`
+  font-size: ${ props => props.theme.size.s };
+  text-align: center;
+  color: ${ props => props.theme.font.faded };
+`;
+
+export const Right = styled.div`
+  display: flex;
+  overflow: hidden;
+  background-color: ${ props => props.theme.primary.neutral };
+  border-radius: 100px;
+`;
+
+const PageCss = css<LinkType>`
+  display: inline-block;
+  width: 34px;
+  height: 30px;
+  line-height: 30px;
+  text-align: center;
+  font-size: ${ props => props.theme.size.s };
+  cursor: pointer;
+  transition: all 0.3s ease;
+
+  &:hover {
+    text-decoration: none;
+    background: ${ props => props.theme.background.neutral };
+  }
+
+  ${ props => props.$active && css`
+    font-weight: 700;
+    background: ${ props => props.theme.primary.normal } !important;
+  ` }
+`;
+
+export const PageLink = styled(Link)<LinkType>`
+  ${ PageCss }
+`;
+
+export const PageText = styled.span<LinkType>`
+  ${ PageCss }
+`;

package/Pagination/types.ts

@@ -0,0 +1,12 @@
+export interface PaginationData<T> {
+  current_page: number
+  last_page: number
+  data: T[]
+  links: LinkData[]
+}
+
+export interface LinkData {
+  url: string | null
+  label: string
+  active: boolean
+}

package/index.ts

@@ -5,6 +5,7 @@ import { Button } from './Button/Button';
 import { General, Paragraph } from './Loading/Loading';
 import Modal from './Modal/Modal';
 import Meta from './Meta';
+import Pagination from './Pagination/Pagination';
 import RouteItem from './RouteItem/RouteItem';
 
 export {
@@ -15,6 +16,7 @@ export {
   General,
   Meta,
   Modal,
+  Pagination,
   Paragraph,
   RouteItem
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@autobusal/common",
-  "version": "0.0.16",
+  "version": "0.0.18",
   "type": "module",
   "main": "index.ts",
   "dependencies": {