From 8b34879d665ddc27145543ff7ea5f506dc38ee81 Mon Sep 17 00:00:00 2001
From: Bram Suurd <78373894+BramSuurdje@users.noreply.github.com>
Date: Wed, 13 Nov 2024 23:13:14 +0100
Subject: [PATCH] Enhance JSONGenerator: improve SelectItem layout with color
 indicators for better visual representation of alert types

---
 frontend/src/app/json-editor/page.tsx | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

diff --git a/frontend/src/app/json-editor/page.tsx b/frontend/src/app/json-editor/page.tsx
index 8e740975..6a99dfb7 100644
--- a/frontend/src/app/json-editor/page.tsx
+++ b/frontend/src/app/json-editor/page.tsx
@@ -538,15 +538,28 @@ export default function JSONGenerator() {
               />
               <Select
                 value={note.type}
-                onValueChange={(value: string) => updateNote(index, "type", value)}
+                onValueChange={(value: string) =>
+                  updateNote(index, "type", value)
+                }
               >
                 <SelectTrigger className="flex-1">
                   <SelectValue placeholder="Type" />
                 </SelectTrigger>
                 <SelectContent>
                   {Object.keys(AlertColors).map((type) => (
-                    <SelectItem key={type} value={type}>
-                      {type.charAt(0).toUpperCase() + type.slice(1)}
+                    <SelectItem
+                      key={type}
+                      value={type}
+                    >
+                      <span className="flex items-center gap-2">
+                        {type.charAt(0).toUpperCase() + type.slice(1)}{" "}
+                        <div
+                          className={cn(
+                            "size-4 rounded-full border",
+                            AlertColors[type as keyof typeof AlertColors],
+                          )}
+                        />
+                      </span>
                     </SelectItem>
                   ))}
                 </SelectContent>