Implement adding icon to categoryTitle

src/components/services/group.jsx

@@ -1,4 +1,5 @@
 import classNames from "classnames";
+import Image from "next/future/image";
 
 import List from "components/services/list";
 
@@ -11,7 +12,12 @@ export default function ServicesGroup({ services, layout }) {
         "flex-1 p-1"
       )}
     >
-      <h2 className="text-theme-800 dark:text-theme-300 text-xl font-medium">{services.name}</h2>
+      <div className="flex select-none">
+      {services.icon &&
+        <Image src={services.icon} width={32} height={32} alt="logo" className="flex-shrink-0 flex items-center justify-center w-10"/>
+      }
+        <h2 className={services.icon ? "text-theme-800 dark:text-theme-300 text-xl font-medium flex-1 flex items-center justify-between rounded-r-md flex-1 px-2 py-2 text-sm text-left" : "text-theme-800 dark:text-theme-300 text-xl font-medium h2-title-noicon"}>{services.name}</h2>
+      </div>
       <List services={services.services} layout={layout} />
     </div>
   );

src/pages/api/services/index.js

@@ -33,11 +33,12 @@ export default async function handler(req, res) {
 
     const mergedGroup = {
       name: groupName,
+      icon: configuredGroup.icon,
       services: [...discoveredGroup.services, ...configuredGroup.services].filter((service) => service),
     };
 
     mergedGroups.push(mergedGroup);
   });
-
+  
   res.send(mergedGroups);
 }

src/styles/globals.css

@@ -12,3 +12,8 @@
 body {
   font-family: "Poppins", sans-serif;
 }
+
+.h2-title-noicon {
+  padding-top: 8px;
+  padding-bottom: 8px;
+}

src/utils/service-helpers.js

@@ -20,9 +20,11 @@ export async function servicesFromConfig() {
   }
 
   // map easy to write YAML objects into easy to consume JS arrays
-  const servicesArray = services.map((servicesGroup) => ({
+  const servicesArray = services.map((servicesGroup) => (
+    {
     name: Object.keys(servicesGroup)[0],
-    services: servicesGroup[Object.keys(servicesGroup)[0]].map((entries) => ({
+    icon: Object.prototype.hasOwnProperty.call(servicesGroup[Object.keys(servicesGroup)[0]], 'icon') ? servicesGroup[Object.keys(servicesGroup)[0]].icon : '',
+    services: servicesGroup[Object.keys(servicesGroup)[0]].services.map((entries) => ({
       name: Object.keys(entries)[0],
       ...entries[Object.keys(entries)[0]],
     })),
@@ -106,6 +108,7 @@ export async function servicesFromDocker() {
 export function cleanServiceGroups(groups) {
   return groups.map((serviceGroup) => ({
     name: serviceGroup.name,
+    icon: serviceGroup.icon,
     services: serviceGroup.services.map((service) => {
       const cleanedService = { ...service };