From 7e16f500cb7bc0cfd8bafbf6bb1555704f771231 Mon Sep 17 00:00:00 2001 From: Armand Philippot Date: Fri, 29 Apr 2022 12:13:34 +0200 Subject: chore: remove old pages, components, helpers and types Since I'm using new components, I will also rewrite the GraphQL queries so it is easier to start from scratch. --- src/components/Pagination/Pagination.module.scss | 92 --------------- src/components/Pagination/Pagination.tsx | 136 ----------------------- 2 files changed, 228 deletions(-) delete mode 100644 src/components/Pagination/Pagination.module.scss delete mode 100644 src/components/Pagination/Pagination.tsx (limited to 'src/components/Pagination') diff --git a/src/components/Pagination/Pagination.module.scss b/src/components/Pagination/Pagination.module.scss deleted file mode 100644 index 4d74d1b..0000000 --- a/src/components/Pagination/Pagination.module.scss +++ /dev/null @@ -1,92 +0,0 @@ -@use "@styles/abstracts/functions" as fun; -@use "@styles/abstracts/mixins" as mix; -@use "@styles/abstracts/placeholders"; - -.list { - @extend %flex-list; - justify-content: center; - - row-gap: var(--spacing-sm); -} - -.link { - display: block; - padding: var(--spacing-xs) var(--spacing-sm); - background: var(--color-bg); - border: fun.convert-px(2) solid var(--color-primary); - box-shadow: fun.convert-px(2) fun.convert-px(2) 0 0 - var(--color-primary-darker); - font-weight: 600; - text-decoration: none; - - @include mix.pointer("fine") { - padding: var(--spacing-2xs) var(--spacing-xs); - } - - &--current { - padding: calc(var(--spacing-xs) / 1.5) var(--spacing-sm); - border-color: var(--color-primary-darker); - box-shadow: none; - color: var(--color-primary-darker); - transform: translateY(#{fun.convert-px(10)}); - - @include mix.pointer("fine") { - padding: calc(var(--spacing-2xs) / 1.5) var(--spacing-xs); - transform: translateY(#{fun.convert-px(7)}); - } - } - - &:not(.link--current) { - &:hover, - &:focus { - border-color: var(--color-primary-light); - box-shadow: fun.convert-px(2) fun.convert-px(2) 0 0 - var(--color-primary-darker), - 0 fun.convert-px(2) fun.convert-px(2) fun.convert-px(1) - var(--color-shadow-dark), - 0 fun.convert-px(7) fun.convert-px(7) fun.convert-px(2) - var(--color-shadow-light); - color: var(--color-primary-light); - transform: translateY(#{fun.convert-px(-5)}); - } - - &:active { - padding: calc(var(--spacing-xs) / 1.5) var(--spacing-sm); - border-color: var(--color-primary-dark); - box-shadow: none; - color: var(--color-primary-dark); - transform: translateY(#{fun.convert-px(10)}); - - @include mix.pointer("fine") { - padding: calc(var(--spacing-2xs) / 1.5) var(--spacing-xs); - transform: translateY(#{fun.convert-px(7)}); - } - } - } -} - -.item { - position: relative; - - &:first-child { - .link { - border-top-left-radius: fun.convert-px(4); - border-bottom-left-radius: fun.convert-px(4); - } - } - - &:last-child { - .link { - border-top-right-radius: fun.convert-px(4); - border-bottom-right-radius: fun.convert-px(4); - } - } - - &:not(:first-child) { - margin-left: fun.convert-px(-1); - } - - &:not(:last-child) { - margin-right: fun.convert-px(-1); - } -} diff --git a/src/components/Pagination/Pagination.tsx b/src/components/Pagination/Pagination.tsx deleted file mode 100644 index 55c366a..0000000 --- a/src/components/Pagination/Pagination.tsx +++ /dev/null @@ -1,136 +0,0 @@ -import { settings } from '@utils/config'; -import Link from 'next/link'; -import { useRouter } from 'next/router'; -import { useIntl } from 'react-intl'; -import styles from './Pagination.module.scss'; - -const Pagination = ({ baseUrl, total }: { baseUrl: string; total: number }) => { - const intl = useIntl(); - const { asPath } = useRouter(); - const totalPages = Math.floor(total / settings.postsPerPage); - const currentPage = asPath.includes('/page/') - ? Number(asPath.split(`${baseUrl}/page/`)[1]) - : 1; - const hasPreviousPage = currentPage !== 1; - const hasNextPage = currentPage !== totalPages; - - const getPreviousPageItem = () => { - return ( -
  • - - - {intl.formatMessage( - { - defaultMessage: '{icon} Previous page', - description: 'Pagination: previous page link', - id: 'aMFqPH', - }, - { icon: '←' } - )} - - -
  • - ); - }; - - const getNextPageItem = () => { - return ( -
  • - - - {intl.formatMessage( - { - defaultMessage: 'Next page {icon}', - description: 'Pagination: Next page link', - id: 'R4yaW6', - }, - { icon: '→' } - )} - - -
  • - ); - }; - - const getPages = () => { - const pages = []; - for (let i = 1; i <= totalPages; i++) { - if (i === currentPage) { - pages.push({ - id: `page-${i}`, - link: ( - - {intl.formatMessage( - { - defaultMessage: 'Page {number}', - description: 'Pagination: page number', - id: 'TSXPzr', - }, - { - number: i, - a11y: (chunks: string) => ( - {chunks} - ), - } - )} - - ), - }); - } else { - pages.push({ - id: `page-${i}`, - link: ( - - - {intl.formatMessage( - { - defaultMessage: 'Page {number}', - description: 'Pagination: page number', - id: 'TSXPzr', - }, - { - number: i, - a11y: (chunks: string) => ( - {chunks} - ), - } - )} - - - ), - }); - } - } - - return pages; - }; - - const getItems = () => { - const pages = getPages(); - - return pages.map((page) => ( -
  • - {page.link} -
  • - )); - }; - - return ( - - ); -}; - -export default Pagination; -- cgit v1.2.3