From d5d8a461f0ee8abdd5f19a6f5a7a288b1f025724 Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Thu, 27 Jan 2022 11:48:57 +0100
Subject: chore: update project preview appearance

---
 .../ProjectPreview/ProjectPreview.module.scss      | 13 +++++++-
 src/components/ProjectPreview/ProjectPreview.tsx   | 38 +++++++++++-----------
 2 files changed, 31 insertions(+), 20 deletions(-)

(limited to 'src/components/ProjectPreview')

diff --git a/src/components/ProjectPreview/ProjectPreview.module.scss b/src/components/ProjectPreview/ProjectPreview.module.scss
index f29dc49..3bf56ec 100644
--- a/src/components/ProjectPreview/ProjectPreview.module.scss
+++ b/src/components/ProjectPreview/ProjectPreview.module.scss
@@ -4,7 +4,8 @@
   display: flex;
   flex-flow: column nowrap;
   height: 100%;
-  padding: var(--spacing-md) var(--spacing-md) var(--spacing-lg);
+  padding: var(--spacing-md);
+  text-align: center;
 }
 
 .cover {
@@ -25,12 +26,17 @@
   margin: 0 0 var(--spacing-xs);
 }
 
+.footer {
+  margin-top: auto;
+}
+
 .meta {
   display: block;
 
   &__item {
     display: flex;
     flex-flow: row wrap;
+    place-content: center;
     gap: var(--spacing-2xs);
   }
 }
@@ -85,3 +91,8 @@
     }
   }
 }
+
+.techno {
+  padding: 0 var(--spacing-2xs);
+  border: fun.convert-px(1) solid var(--color-primary-darker);
+}
diff --git a/src/components/ProjectPreview/ProjectPreview.tsx b/src/components/ProjectPreview/ProjectPreview.tsx
index f5d2e8f..cba0b02 100644
--- a/src/components/ProjectPreview/ProjectPreview.tsx
+++ b/src/components/ProjectPreview/ProjectPreview.tsx
@@ -6,41 +6,41 @@ import Link from 'next/link';
 import styles from './ProjectPreview.module.scss';
 
 const ProjectPreview = ({ project }: { project: Project }) => {
+  const { id, meta, tagline, title } = project;
+
   return (
     <Link href={`/projet/${project.slug}`}>
       <a className={styles.link}>
         <article className={styles.article}>
           <header>
-            {project.cover && (
+            {meta.hasCover && (
               <div className={styles.cover}>
                 <Image
-                  src={project.cover}
+                  src={`/projects/${id}.jpg`}
                   layout="fill"
                   objectFit="contain"
                   objectPosition="center"
-                  alt={t`${project.title} picture`}
+                  alt={t`${title} picture`}
                 />
               </div>
             )}
-            <h2 className={styles.title}>{project.title}</h2>
+            <h2 className={styles.title}>{title}</h2>
           </header>
-          <div
-            className={styles.body}
-            dangerouslySetInnerHTML={{ __html: project.intro }}
-          ></div>
-          <footer>
+          {tagline && (
+            <div
+              className={styles.body}
+              dangerouslySetInnerHTML={{ __html: tagline }}
+            ></div>
+          )}
+          <footer className={styles.footer}>
             <dl className={styles.meta}>
-              {project.meta.license && (
-                <div className={styles.meta__item}>
-                  <dt>{t`License:`}</dt>
-                  <dd>{project.meta.license}</dd>
-                </div>
-              )}
-              {project.meta.technologies && (
+              {meta.technologies && (
                 <div className={styles.meta__item}>
-                  <dt>{t`Technologies:`}</dt>
-                  {project.meta.technologies.map((techno) => (
-                    <dd key={slugify(techno)}>{techno}</dd>
+                  <dt className="screen-reader-text">{t`Technologies:`}</dt>
+                  {meta.technologies.map((techno) => (
+                    <dd key={slugify(techno)} className={styles.techno}>
+                      {techno}
+                    </dd>
                   ))}
                 </div>
               )}
-- 
cgit v1.2.3