feat: icons added via <img> by static path

17-results-summary-component-go/main.go

@@ -2,6 +2,7 @@ package main
 
 import (
 	"embed"
+	"fmt"
 	"html/template"
 	"io"
 	"log"
@@ -18,6 +19,11 @@ type Category struct {
 	Name     string
 	ColorHsl string
 	Score    int
+	IconPath string
+}
+
+func iconPath(categoryName string) string {
+	return fmt.Sprintf("/static/public/images/icon-%s.svg", categoryName)
 }
 
 // starts webserver that serves html page for exercise
@@ -31,10 +37,14 @@ func main() {
 	})
 
 	mySummary := [...]Category{
-		{Name: "Reaction", ColorHsl: "0deg 100% 67%", Score: 80},
-		{Name: "Memory", ColorHsl: "39deg 100% 56%", Score: 92},
-		{Name: "Verbal", ColorHsl: "166deg 100% 37%", Score: 61},
-		{Name: "Visual", ColorHsl: "234deg 85% 45%", Score: 72},
+		{Name: "Reaction", ColorHsl: "0deg 100% 67%",
+			Score: 80, IconPath: iconPath("reaction")},
+		{Name: "Memory", ColorHsl: "39deg 100% 56%",
+			Score: 92, IconPath: iconPath("memory")},
+		{Name: "Verbal", ColorHsl: "166deg 100% 37%",
+			Score: 61, IconPath: iconPath("verbal")},
+		{Name: "Visual", ColorHsl: "234deg 85% 45%",
+			Score: 72, IconPath: iconPath("visual")},
 	}
 
 	// main page with results summary

17-results-summary-component-go/public/out.css

@@ -600,6 +600,10 @@ video {
   border-radius: 9999px;
 }
 
+.rounded-lg {
+  border-radius: 0.5rem;
+}
+
 .rounded-b-3xl {
   border-bottom-right-radius: 1.5rem;
   border-bottom-left-radius: 1.5rem;
@@ -610,8 +614,8 @@ video {
   background-color: hsl(224 30% 27% / var(--tw-bg-opacity));
 }
 
-.bg-summary-item-color\/10 {
-  background-color: hsl(var(--summary-item-color-var) / 0.1);
+.bg-summary-item-color\/5 {
+  background-color: hsl(var(--summary-item-color-var) / 0.05);
 }
 
 .bg-gradient-to-t {
@@ -647,10 +651,19 @@ video {
   padding-right: 2.5rem;
 }
 
+.px-5 {
+  padding-left: 1.25rem;
+  padding-right: 1.25rem;
+}
+
 .pb-8 {
   padding-bottom: 2rem;
 }
 
+.pr-2 {
+  padding-right: 0.5rem;
+}
+
 .pt-4 {
   padding-top: 1rem;
 }
@@ -682,6 +695,11 @@ video {
   font-weight: 800;
 }
 
+.text-dark-gray-blue {
+  --tw-text-opacity: 1;
+  color: hsl(224 30% 27% / var(--tw-text-opacity));
+}
+
 .text-pale-blue {
   --tw-text-opacity: 1;
   color: hsl(221 100% 96% / var(--tw-text-opacity));

17-results-summary-component-go/templates/summary-component.gohtml

@@ -53,16 +53,17 @@
 
       <section class="flex flex-col gap-y-4 p-7">
         <h2 class="font-bold">Summary</h2>
-        <dl class="flex flex-col">
+        <dl class="flex flex-col gap-y-4">
           {{ range . }}
           <div
-            class="flex flex-row bg-summary-item-color/10"
+            class="flex flex-row items-center px-5 h-12 text-sm rounded-lg bg-summary-item-color/5"
             style="--summary-item-color-var: {{ .ColorHsl }}"
             >
+            <img src="{{ .IconPath }}" alt="" class="pr-2" />
             <dt class="flex-1 text-summary-item-color">{{ .Name }}</dt>
             <dd class="flex flex-row">
-              <strong>{{ .Score }}</strong>
-              / 100
+              <strong class="pr-2" >{{ .Score }}</strong>
+              <span class="text-dark-gray-blue">/ 100</span>
             </dd>
           </div>
           {{ end }}