src/components/PaginationCursor/PaginationCursor.tsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

import { plural, t } from '@lingui/macro';
import styles from './PaginationCursor.module.scss';

const PaginationCursor = ({
  current,
  total,
}: {
  current: number;
  total: number;
}) => {
  return (
    <div className={styles.wrapper}>
      <progress
        className={styles.bar}
        max={total}
        value={current}
        aria-valuemin={0}
        aria-valuemax={total}
        aria-label={t`Number of articles loaded out of the total available.`}
        title={plural(current, {
          zero: `# articles out of a total of ${total}`,
          one: `# article out of a total of ${total}`,
          other: `# articles out of a total of ${total}`,
        })}
      ></progress>
    </div>
  );
};

export default PaginationCursor;