chore: replace lingui functions with react-intl

1 files changed, 15 insertions, 6 deletions

diff --git a/src/components/PaginationCursor/PaginationCursor.tsx b/src/components/PaginationCursor/PaginationCursor.tsx
index bcbb555..a8c6265 100644
--- a/src/components/PaginationCursor/PaginationCursor.tsx
+++ b/src/components/PaginationCursor/PaginationCursor.tsx
@@ -1,4 +1,4 @@
-import { plural, t } from '@lingui/macro';
+import { useIntl } from 'react-intl';
 import styles from './PaginationCursor.module.scss';
 
 const PaginationCursor = ({
@@ -8,6 +8,8 @@ const PaginationCursor = ({
   current: number;
   total: number;
 }) => {
+  const intl = useIntl();
+
   return (
     <div className={styles.wrapper}>
       <progress
@@ -16,12 +18,19 @@ const PaginationCursor = ({
         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}`,
+        aria-label={intl.formatMessage({
+          defaultMessage:
+            'Number of articles loaded out of the total available.',
+          description: 'PaginationCursor: loaded articles count aria-label',
         })}
+        title={intl.formatMessage(
+          {
+            defaultMessage:
+              '{articlesCount, plural, =0 {# articles} one {# article} other {# articles}} out of a total of {total}',
+            description: 'PaginationCursor: loaded articles count message',
+          },
+          { articlesCount: current, total }
+        )}
       ></progress>
     </div>
   );