From 2f03dd8b011c0636b1dc457f23033836b442f8e3 Mon Sep 17 00:00:00 2001
From: Markus Thielker <mail.markus.thielker@gmail.com>
Date: Mon, 11 Mar 2024 11:27:55 +0100
Subject: [PATCH] N-FIN-21: show color in front of category name

---
 src/app/payments/columns.tsx | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/app/payments/columns.tsx b/src/app/payments/columns.tsx
index b092e50..32a2157 100644
--- a/src/app/payments/columns.tsx
+++ b/src/app/payments/columns.tsx
@@ -50,7 +50,15 @@ export const columns = (
             header: 'Category',
             cell: ({row}) => {
                 const category = categories.find((category) => category.id === row.original.categoryId);
-                return category?.name ?? '-';
+                return (
+                    <div className="flex items-center space-x-4">
+                        <svg className="h-5" fill={category?.color} viewBox="0 0 20 20"
+                             xmlns="http://www.w3.org/2000/svg">
+                            <circle cx="10" cy="10" r="10"/>
+                        </svg>
+                        <p>{category?.name ?? '-'}</p>
+                    </div>
+                );
             },
         },
         {