From c7fb810f8014bca65935309bf2c6b558a9e1ba42 Mon Sep 17 00:00:00 2001
From: Sebastien Castiel <sebastien@castiel.me>
Date: Thu, 11 Jan 2024 17:12:21 -0500
Subject: Add category icons

---
 src/components/expense-form.tsx | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

(limited to 'src/components/expense-form.tsx')

diff --git a/src/components/expense-form.tsx b/src/components/expense-form.tsx
index d00211a..c1652ca 100644
--- a/src/components/expense-form.tsx
+++ b/src/components/expense-form.tsx
@@ -1,4 +1,5 @@
 'use client'
+import { CategoryIcon } from '@/app/groups/[groupId]/expenses/category-icon'
 import { AsyncButton } from '@/components/async-button'
 import { SubmitButton } from '@/components/submit-button'
 import { Button } from '@/components/ui/button'
@@ -239,12 +240,18 @@ export function ExpenseForm({
                       {Object.keys(categoriesByGroup).map((group) => (
                         <SelectGroup key={group}>
                           <SelectLabel className="-ml-6">{group}</SelectLabel>
-                          {categoriesByGroup[group].map(({ id, name }) => (
+                          {categoriesByGroup[group].map((category) => (
                             <SelectItem
-                              key={id.toString()}
-                              value={id.toString()}
+                              key={category.id.toString()}
+                              value={category.id.toString()}
                             >
-                              {name}
+                              <div className="flex items-center gap-3">
+                                <CategoryIcon
+                                  category={category}
+                                  className="w-4 h-4"
+                                />
+                                {category.name}
+                              </div>
                             </SelectItem>
                           ))}
                         </SelectGroup>
-- 
cgit v1.3