From ff2b6aa2c149c2475305d3ba35ee9929917b2ab6 Mon Sep 17 00:00:00 2001
From: Neshura <neshura@proton.me>
Date: Sun, 11 Dec 2022 18:39:09 +0100
Subject: [PATCH] Various changes

Added support for images as well as a distinct loading style
---
 pages/services.tsx | 38 +++++++++++++++++++++++++++++---------
 1 file changed, 29 insertions(+), 9 deletions(-)

diff --git a/pages/services.tsx b/pages/services.tsx
index 03e3efe..abdeb32 100644
--- a/pages/services.tsx
+++ b/pages/services.tsx
@@ -1,31 +1,40 @@
 import Head from 'next/head'
 import Link from 'next/link'
 import styles from '/styles/Home.module.css'
-import { Service, ServiceStatus, ServiceType, ServiceLocation } from '../interfaces/LinkTypes';
+import { Service, ServiceStatus, ServiceType, ServiceLocation } from '../interfaces/Services';
 import Dockerode from 'dockerode';
 import { ReactElement } from 'react'
 import useSWR from 'swr';
+import Image from 'next/image';
 
 const fetcher = (url: string) => fetch(url).then((res) => res.json())
 
 function Services() {
   const { initialData, fullData, loadingInitial, loadingFull, error } = useServices();
 
-
   let content: ReactElement = <></>;
 
   if (error) { content = <div>Error loading data</div> }
-  else if (loadingInitial) {
-    content = <div>Loading</div>
-  }
+  else if (loadingInitial) { content = <div>Loading</div> }
   else if (loadingFull) {
     content =
       <div className={styles.grid}>
         {initialData?.map((item: Service) => (
           <Link key={item.name} href={item.href}>
             <a className={styles.contentcard}>
-              <div className={styles.contenttitle}><h2>{item.name}</h2></div>
-              <div className={item.status === ServiceStatus.online ? styles.contentonline : styles.contentoffline}>{item.status}</div>
+              <div className={styles.contentTitle}>
+                {
+                  item.icon ? (
+                    <div className={styles.contentIcon}>
+                      <Image alt="icon" src={item.icon} layout="fill" objectFit="contain"></Image>
+                    </div>
+                  ) : (<></>)
+                }
+                <h2>{item.name}</h2>
+              </div>
+              <div className={item.status === ServiceStatus.online ? styles.statusOnline : item.status === ServiceStatus.offline ? styles.statusOffline : styles.statusLoading}>
+                {item.status}
+              </div>
               <div><p>{item.desc}</p></div>
               <div className={styles.cardwarn}><p>{item.warn}</p></div>
             </a>
@@ -39,8 +48,19 @@ function Services() {
         {fullData.map((item: Service) => (
           <Link key={item.name} href={item.href}>
             <a className={styles.contentcard}>
-              <div className={styles.contenttitle}><h2>{item.name}</h2></div>
-              <div className={item.status === ServiceStatus.online ? styles.contentonline : styles.contentoffline}>{item.status}</div>
+              <div className={styles.contentTitle}>
+                {
+                  item.icon ? (
+                    <div className={styles.contentIcon}>
+                      <Image alt="icon" src={item.icon} layout="fill" objectFit="contain"></Image>
+                    </div>
+                  ) : (<></>)
+                }
+                <h2>{item.name}</h2>
+              </div>
+              <div className={item.status === ServiceStatus.online ? styles.statusOnline : item.status === ServiceStatus.offline ? styles.statusOffline : styles.statusLoading}>
+                {item.status}
+              </div>
               <div><p>{item.desc}</p></div>
               <div className={styles.cardwarn}><p>{item.warn}</p></div>
             </a>