chore: replace lingui functions with react-intl

1 files changed, 19 insertions, 3 deletions

diff --git a/src/components/ProjectPreview/ProjectPreview.tsx b/src/components/ProjectPreview/ProjectPreview.tsx
index cba0b02..043d945 100644
--- a/src/components/ProjectPreview/ProjectPreview.tsx
+++ b/src/components/ProjectPreview/ProjectPreview.tsx
@@ -1,12 +1,13 @@
-import { t } from '@lingui/macro';
 import { Project } from '@ts/types/app';
 import { slugify } from '@utils/helpers/slugify';
 import Image from 'next/image';
 import Link from 'next/link';
+import { useIntl } from 'react-intl';
 import styles from './ProjectPreview.module.scss';
 
 const ProjectPreview = ({ project }: { project: Project }) => {
   const { id, meta, tagline, title } = project;
+  const intl = useIntl();
 
   return (
     <Link href={`/projet/${project.slug}`}>
@@ -20,7 +21,13 @@ const ProjectPreview = ({ project }: { project: Project }) => {
                   layout="fill"
                   objectFit="contain"
                   objectPosition="center"
-                  alt={t`${title} picture`}
+                  alt={intl.formatMessage(
+                    {
+                      defaultMessage: '{title} picture',
+                      description: 'ProjectPreview: cover alt text',
+                    },
+                    { title }
+                  )}
                 />
               </div>
             )}
@@ -36,7 +43,16 @@ const ProjectPreview = ({ project }: { project: Project }) => {
             <dl className={styles.meta}>
               {meta.technologies && (
                 <div className={styles.meta__item}>
-                  <dt className="screen-reader-text">{t`Technologies:`}</dt>
+                  <dt className="screen-reader-text">
+                    {intl.formatMessage(
+                      {
+                        defaultMessage:
+                          '{count, plural, =0 {Technologies:} one {Technology:} other {Technologies:}}',
+                        description: 'ProjectPreview: technologies list label',
+                      },
+                      { count: meta.technologies.length }
+                    )}
+                  </dt>
                   {meta.technologies.map((techno) => (
                     <dd key={slugify(techno)} className={styles.techno}>
                       {techno}