diff options
Diffstat (limited to 'src/components/ProjectPreview')
| -rw-r--r-- | src/components/ProjectPreview/ProjectPreview.tsx | 22 |
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} |