From cc845d3adcd505c50d857a407568e80923327143 Mon Sep 17 00:00:00 2001
From: Corban-Lee Jones <corbz.jones@gmail.com>
Date: Mon, 12 May 2025 11:17:54 +0100
Subject: [PATCH] feat: display colour preview in style table

---
 src/client/src/ts/guild/styles.ts | 20 +++++++++++++-------
 1 file changed, 13 insertions(+), 7 deletions(-)

diff --git a/src/client/src/ts/guild/styles.ts b/src/client/src/ts/guild/styles.ts
index dc882eb..e1b0feb 100644
--- a/src/client/src/ts/guild/styles.ts
+++ b/src/client/src/ts/guild/styles.ts
@@ -71,13 +71,19 @@ const columnDefs: ConfigColumnDefs[] = [
         orderable: true,
         searchable: true,
         className: "size-px whitespace-nowrap",
-        render: (data: string) => { return `
-            <div class="px-6 py-4">
-                <span class="cj-table-text">
-                    ${data}
-                </span>
-            </div>
-        `}
+        render: (data: string, type: string) => {
+            if (type !== "display") return data;
+
+            const wrapper = $("<div>").addClass("flex px-6 py-4");
+            const badge = $("<span>").addClass("inline-flex items-center whitespace-nowrap border rounded-md bg-white dark:bg-neutral-800 border-gray-200 dark:border-neutral-700 overflow-hidden");
+            const colour = $("<span>").addClass("size-6 shrink-0").css("background-color", data);
+            const label = $("<span>").addClass("py-1 px-2.5 text-xs text-gray-800 dark:text-neutral-200");
+            label.text(data);
+
+            badge.append(colour).append(label);
+            wrapper.append(badge);
+            return wrapper.get(0);
+        }
     },
     {
         target: 3,