aboutsummaryrefslogtreecommitdiffstats
path: root/src/components/PaginationCursor
diff options
context:
space:
mode:
authorArmand Philippot <git@armandphilippot.com>2022-04-29 12:13:34 +0200
committerArmand Philippot <git@armandphilippot.com>2022-04-29 18:30:05 +0200
commit7e16f500cb7bc0cfd8bafbf6bb1555704f771231 (patch)
treebfc2b4a475cb06a787e2c4bdf284165644e82952 /src/components/PaginationCursor
parent5324664e87bedfaa01ba62c0c847ef5b861e69b3 (diff)
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.
Diffstat (limited to 'src/components/PaginationCursor')
-rw-r--r--src/components/PaginationCursor/PaginationCursor.module.scss43
-rw-r--r--src/components/PaginationCursor/PaginationCursor.tsx43
2 files changed, 0 insertions, 86 deletions
diff --git a/src/components/PaginationCursor/PaginationCursor.module.scss b/src/components/PaginationCursor/PaginationCursor.module.scss
deleted file mode 100644
index 542584c..0000000
--- a/src/components/PaginationCursor/PaginationCursor.module.scss
+++ /dev/null
@@ -1,43 +0,0 @@
-@use "@styles/abstracts/functions" as fun;
-
-.wrapper {
- width: max-content;
- margin: var(--spacing-sm) auto var(--spacing-md);
- text-align: center;
-
- .bar[value] {
- display: block;
- width: clamp(25ch, 20vw, 30ch);
- max-width: 100%;
- height: fun.convert-px(13);
- appearance: none;
- background: var(--color-bg-tertiary);
- border: fun.convert-px(1) solid var(--color-primary-darker);
- border-radius: 1em;
- box-shadow: inset 0 0 fun.convert-px(4) fun.convert-px(1)
- var(--color-shadow-light);
-
- &::-webkit-progress-value {
- background-color: var(--color-primary-dark);
- border-radius: 1em;
- }
-
- &::-moz-progress-bar {
- background-color: var(--color-primary-dark);
- border-radius: 1em;
- }
-
- &::-webkit-progress-bar {
- background: var(--color-bg-tertiary);
- border: fun.convert-px(1) solid var(--color-primary-darker);
- border-radius: 1em;
- box-shadow: inset 0 0 fun.convert-px(4) fun.convert-px(1)
- var(--color-shadow-light);
- }
- }
-}
-
-.info {
- margin-bottom: var(--spacing-2xs);
- font-size: var(--font-size-sm);
-}
diff --git a/src/components/PaginationCursor/PaginationCursor.tsx b/src/components/PaginationCursor/PaginationCursor.tsx
deleted file mode 100644
index d64f961..0000000
--- a/src/components/PaginationCursor/PaginationCursor.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import { useIntl } from 'react-intl';
-import styles from './PaginationCursor.module.scss';
-
-const PaginationCursor = ({
- current,
- total,
-}: {
- current: number;
- total: number;
-}) => {
- const intl = useIntl();
-
- return (
- <div className={styles.wrapper}>
- <div className={styles.info}>
- {intl.formatMessage(
- {
- defaultMessage:
- '{articlesCount, plural, =0 {# loaded articles} one {# loaded article} other {# loaded articles}} out of a total of {total}',
- description: 'PaginationCursor: loaded articles count message',
- id: 'du4MLN',
- },
- { articlesCount: current, total }
- )}
- </div>
- <progress
- className={styles.bar}
- max={total}
- value={current}
- aria-valuemin={0}
- aria-valuemax={total}
- aria-label={intl.formatMessage({
- defaultMessage:
- 'Number of articles loaded out of the total available.',
- description: 'PaginationCursor: loaded articles count aria-label',
- id: 'mC21ht',
- })}
- ></progress>
- </div>
- );
-};
-
-export default PaginationCursor;