[PATCH v2 1/2] fix(page): fix getFixedRandomColor() function

[Muhammad Rizki <kiizuha@gnuweeb.org>]

The previous code for `getFixedRandomColor()`, where Tailwind
dynamically creates class names, does not work properly. This is because
Tailwind does not support dynamic class names such as string
concatenation or conditional class names like `text-${color}-${level}`.
Tailwind uses regular expressions to search for complete class names.
Reference: https://tailwindcss.com/docs/content-configuration#dynamic-class-names

Fixes: e21879bf509a ("feat(page): implement chat bubble message rendering")
Signed-off-by: Muhammad Rizki <kiizuha@gnuweeb.org>
---
 index.html | 32 +++++++++++++++++++++-----------
 1 file changed, 21 insertions(+), 11 deletions(-)

diff --git a/index.html b/index.html
index 64e5884..81162db 100644
--- a/index.html
+++ b/index.html
@@ -394,17 +394,27 @@
       }
 
       function getFixedRandomColor(name) {
-        const colors = [
-          "red", "yellow", "blue", "sky", "purple", "orange",
-          "amber", "lime", "green", "emerald", "teal", "cyan",
-          "indigo", "violet", "fuchsia", "pink", "rose"
-        ];
-
-        const c = colors[hashCode(name) % colors.length];
-        return [
-          "text-" + c + "-400",
-          "border-" + c + "-400",
-        ];
+        const colorData = {
+          red: "text-red-400 border-red-400",
+          yellow: "text-yellow-400 border-yellow-400",
+          blue: "text-blue-400 border-blue-400",
+          sky: "text-sky-400 border-sky-400",
+          purple: "text-purple-400 border-purple-400",
+          orange: "text-orange-400 border-orange-400",
+          amber: "text-amber-400 border-amber-400",
+          lime: "text-lime-400 border-lime-400",
+          green: "text-green-400 border-green-400",
+          emerald: "text-emerald-400 border-emerald-400",
+          teal: "text-teal-400 border-teal-400",
+          cyan: "text-cyan-400 border-cyan-400",
+          indigo: "text-indigo-400 border-indigo-400",
+          violet: "text-violet-400 border-violet-400",
+          fuchsia: "text-fuchsia-400 border-fuchsia-400",
+          pink: "text-pink-400 border-pink-400",
+          rose: "text-rose-400 border-rose-400",
+        };
+        const colorNames = Object.keys(colorData);
+        return colorData[colorNames[hashCode(name) % colorNames.length]].split(" ");
       }
 
       function cleanMessageText(text) {
-- 
Muhammad Rizki