fix(project): make sure the project cover is displayed

Next.js does not support the dynamic import of images. Sometimes the
images was displayed and other times the loading did not finish. So
even if I would like to keep the content in a same place, I choose to
put the projects covers inside the public directory. Then I use a
hasCover boolean to determine if the project cover need to be printed.

1 files changed, 5 insertions, 5 deletions

diff --git a/src/components/ProjectSummary/ProjectSummary.tsx b/src/components/ProjectSummary/ProjectSummary.tsx
index 1b07eb1..b32c11f 100644
--- a/src/components/ProjectSummary/ProjectSummary.tsx
+++ b/src/components/ProjectSummary/ProjectSummary.tsx
@@ -11,25 +11,25 @@ import { useRouter } from 'next/router';
 import styles from './ProjectSummary.module.scss';
 
 const ProjectSummary = ({
+  id,
   title,
-  cover,
   meta,
 }: {
+  id: string;
   title: string;
-  cover: string;
   meta: ProjectMeta;
 }) => {
-  const { license, repos, technologies } = meta;
+  const { hasCover, license, repos, technologies } = meta;
   const router = useRouter();
   const locale = router.locale ? router.locale : config.locales.defaultLocale;
   const { data } = useGithubApi(repos?.github ? repos.github : '');
 
   return (
     <div className={styles.wrapper}>
-      {cover && (
+      {hasCover && (
         <div className={styles.cover}>
           <Image
-            src={cover}
+            src={`/projects/${id}.jpg`}
             alt={t`${title} preview`}
             layout="fill"
             objectFit="contain"