feat: implement custom project data image

apps/client/src/views/project-info/ProjectInfo.scss

@@ -15,7 +15,6 @@
 
   display: flex;
   flex-direction: column;
-  align-items: center;
 
   .logo {
     max-width: min(200px, 30vw);
@@ -24,8 +23,13 @@
   .info {
     flex: 1;
     max-height: 100%;
+    margin-inline: auto;
     overflow-y: auto;
     width: min(calc(100vw - 4rem), 960px);
+    display: flex;
+    flex-direction: column;  
+    align-items: start;
+    gap: $view-element-gap;
 
     padding-bottom: 10vh;
   }
@@ -34,19 +38,37 @@
     font-weight: 600;
     color: var(--label-color-override, $viewer-label-color);
     text-transform: uppercase;
-    margin-top: $view-element-gap;
   }
 
   .info__value {
     white-space: break-spaces;
   }
 
+  .info__custom {
+    display: flex;
+    gap: 1rem;
+  }
+
+  .info__image-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 192px;
+    height: 192px;
+  }
+
+  .info__image {
+    max-width: 100%;
+    max-height: 100%;
+    object-fit: contain;
+  }
+
   .link.info__value {
     display: flex;
-    gap: 0.5rem;
+    gap: $view-element-gap;
     align-items: center;
     color: $action-text-color;
-  
+
     &:hover {
       color: $ontime-color;
     }
@@ -59,5 +81,9 @@
     .logo img {
       height: min(50px, 10vh);
     }
+    .info__image-container {
+      width: 96px;
+      height: 96px;
+    }
   }
 }

apps/client/src/views/project-info/ProjectInfo.tsx

@@ -1,4 +1,3 @@
-import { Fragment } from 'react/jsx-runtime';
 import { IoOpenOutline } from 'react-icons/io5';
 
 import ViewNavigationMenu from '../../common/components/navigation-menu/ViewNavigationMenu';
@@ -52,40 +51,45 @@ export default function ProjectInfo() {
       {data.logo && <ViewLogo name={data.logo} className='logo' />}
       <div className='info'>
         {data.title && (
-          <>
+          <div>
             <div className='info__label'>{getLocalizedString('project.title')}</div>
             <div className='info__value'>{data.title}</div>
-          </>
+          </div>
         )}
         {data.description && (
-          <>
+          <div>
             <div className='info__label'>{getLocalizedString('project.description')}</div>
             <div className='info__value'>{data.description}</div>
-          </>
+          </div>
         )}
         {data.info && (
-          <>
+          <div>
             <div className='info__label'>{getLocalizedString('project.info')}</div>
             <div className='info__value'>{data.info}</div>
-          </>
+          </div>
         )}
         {data.url && (
-          <>
+          <div>
             <div className='info__label'>{getLocalizedString('project.url')}</div>
             <a href={data.url} target='_blank' rel='noreferrer' className='info__value link'>
               {data.url} <IoOpenOutline style={{ fontSize: '1em' }} />
             </a>
-          </>
+          </div>
         )}
         {data.custom.map((info, idx) => {
-          if (!info.title || !info.value) {
-            return null;
-          }
+          const hasUrl = Boolean(info.url);
           return (
-            <Fragment key={`${info.title}-${idx}`}>
-              <div className='info__label'>{info.title}</div>
-              <div className='info__value'>{info.value}</div>
-            </Fragment>
+            <div key={`${info.title}-${idx}`} className='info__custom'>
+              {hasUrl && (
+                <div className='info__image-container'>
+                  <img className='info__image' src={info.url} loading='lazy' />
+                </div>
+              )}
+              <div>
+                <div className='info__label'>{info.title}</div>
+                <div className='info__value'>{info.value}</div>
+              </div>
+            </div>
           );
         })}
       </div>