feat: app cards

src/App.module.css

@@ -18,5 +18,5 @@
     position: relative;
     grid-area: main;
     padding: var(--spacers-dp16);
-    background: var(--colors-grey050);
+    background: var(--colors-grey100);
 }

src/components/AppList.js

@@ -10,17 +10,60 @@ import React from 'react'
 import { useQueryParam, StringParam, withDefault } from 'use-query-params'
 import styles from './AppList.module.css'
 
+const getIconSrc = app => {
+    const iconSize = ['128', '48', '16'].find(iconSize => iconSize in app.icons)
+    if (iconSize) {
+        return `${app.baseUrl}/${app.icons[iconSize]}`
+    }
+    return null
+}
+
+const AppIcon = ({ app }) => (
+    <div className={styles.appCardIcon}>
+        {getIconSrc(app) ? (
+            <img src={getIconSrc(app)} />
+        ) : (
+            <div className={styles.appCardIconFallback}></div>
+        )}
+    </div>
+)
+
+AppIcon.propTypes = {
+    app: PropTypes.object.isRequired,
+}
+
+const AppCards = ({ apps }) => (
+    <div className={styles.appCards}>
+        {apps.map(app => (
+            <div key={app.key} className={styles.appCard}>
+                <AppIcon app={app} />
+                <div>
+                    <h2 className={styles.appCardName}>{app.name}</h2>
+                    <span className={styles.appCardMetadata}>
+                        {app.developer?.organisation || app.developer?.name}
+                    </span>
+                    <span className={styles.appCardMetadata}>
+                        {app.version && `Version ${app.version}`}
+                    </span>
+                </div>
+            </div>
+        ))}
+    </div>
+)
+
+AppCards.propTypes = {
+    apps: PropTypes.array.isRequired,
+}
+
 const AppsWithUpdates = ({ label, apps }) => {
     if (apps.length === 0) {
         return null
     }
     return (
-        <>
+        <div className={styles.appsWithUpdates}>
             <h1 className={styles.header}>{label}</h1>
-            {apps.map(app => (
-                <p key={app.name}>{app.name}</p>
-            ))}
-        </>
+            <AppCards apps={apps} />
+        </div>
     )
 }
 
@@ -41,9 +84,7 @@ const AllApps = ({ label, apps }) => {
     return (
         <>
             <h1 className={styles.header}>{label}</h1>
-            {apps.map(app => (
-                <p key={app.name}>{app.name}</p>
-            ))}
+            <AppCards apps={apps} />
         </>
     )
 }
@@ -99,6 +140,7 @@ const AppList = ({
     return (
         <>
             <InputField
+                className={styles.searchField}
                 value={query}
                 placeholder={searchLabel}
                 onChange={handleQueryChange}

src/components/AppList.module.css

@@ -1,6 +1,63 @@
+.searchField {
+    max-width: 420px;
+}
+
 .header {
-    font-weight: 500;
     font-size: 20px;
+    font-weight: 500;
     margin-top: var(--spacers-dp24);
     margin-bottom: var(--spacers-dp16);
 }
+
+.appsWithUpdates {
+    margin-bottom: var(--spacers-dp64);
+}
+
+.appCards {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-gap: var(--spacers-dp16);
+    max-width: 992px;
+}
+
+.appCard {
+    display: grid;
+    grid-template-columns: 72px auto;
+    grid-gap: var(--spacers-dp12);
+    background: white;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+    padding: 18px var(--spacers-dp16);
+    line-height: 20px;
+}
+
+.appCardName {
+    font-size: 18px;
+    font-weight: 700;
+    color: var(--colors-grey900);
+    margin-top: 0;
+    margin-bottom: var(--spacers-dp4);
+}
+
+.appCardMetadata {
+    display: block;
+    margin: var(--spacers-dp4) 0;
+    font-size: 14px;
+    color: var(--colors-grey700)
+}
+
+.appCardIcon {
+    display: flex;
+}
+
+.appCardIconFallback {
+    height: 100%;
+    width: 100%;
+    background: #e6e9ec;
+    border-radius: 5px;
+}
+
+.appCardIcon img {
+    max-width: 100%;
+    max-height: 100%;
+    object-fit: scale-down;
+}