Visual edit in Lovable

Edited UI in Lovable

src/components/transaction/TransactionCategorySelector.tsx

@@ -1,46 +1,28 @@
-
 import React from 'react';
 import { FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form';
 import { UseFormReturn } from 'react-hook-form';
 import { TransactionFormValues } from './TransactionFormFields';
 import { EXPENSE_CATEGORIES } from '@/constants/categoryIcons';
 import { categoryIcons } from '@/constants/categoryIcons';
-
 interface TransactionCategorySelectorProps {
   form: UseFormReturn<TransactionFormValues>;
 }
-
+const TransactionCategorySelector: React.FC<TransactionCategorySelectorProps> = ({
-const TransactionCategorySelector: React.FC<TransactionCategorySelectorProps> = ({ form }) => {
+  form
-  return (
+}) => {
-    <FormField
+  return <FormField control={form.control} name="category" render={({
-      control={form.control}
+    field
-      name="category"
+  }) => <FormItem>
-      render={({ field }) => (
-        <FormItem>
           <FormLabel>카테고리</FormLabel>
           <div className="grid grid-cols-4 gap-2">
-            {EXPENSE_CATEGORIES.map((category) => (
+            {EXPENSE_CATEGORIES.map(category => <div key={category} className={`flex items-center gap-2 p-2 rounded-md cursor-pointer border ${field.value === category ? 'border-neuro-income bg-neuro-income/10' : 'border-gray-200'}`} onClick={() => form.setValue('category', category as any)}>
-              <div
-                key={category}
-                className={`flex items-center gap-2 p-2 rounded-md cursor-pointer border ${
-                  field.value === category 
-                    ? 'border-neuro-income bg-neuro-income/10' 
-                    : 'border-gray-200'
-                }`}
-                onClick={() => form.setValue('category', category as any)}
-              >
                 <div className="p-1 rounded-full">
                   {categoryIcons[category]}
                 </div>
-                <span>{category}</span>
+                <span className="text-sm">{category}</span>
-              </div>
+              </div>)}
-            ))}
           </div>
           <FormMessage />
-        </FormItem>
+        </FormItem>} />;
-      )}
-    />
-  );
 };
-
 export default TransactionCategorySelector;