summaryrefslogtreecommitdiffstats
path: root/src/components/ProjectPreview/ProjectPreview.tsx
diff options
context:
space:
mode:
authorArmand Philippot <git@armandphilippot.com>2022-01-29 19:03:59 +0100
committerArmand Philippot <git@armandphilippot.com>2022-01-29 19:03:59 +0100
commit8fb5e4ef3ae925ebc6622711fb5c8c6147642cbc (patch)
tree9e99137a7b64ea7993a8311a7162336a551be8b2 /src/components/ProjectPreview/ProjectPreview.tsx
parent2bae7c43764df5678fe2fc2e68be11ae95d85a41 (diff)
parente4d5b8151802517b2943756fc0d09ffa95e2c4e2 (diff)
feat(i18n): replace linguijs with formatjs
Diffstat (limited to 'src/components/ProjectPreview/ProjectPreview.tsx')
-rw-r--r--src/components/ProjectPreview/ProjectPreview.tsx22
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}