Visual edit in Lovable

Edited UI in Lovable

src/components/BudgetCategoriesSection.tsx

@@ -1,7 +1,5 @@
-
 import React from 'react';
 import BudgetCard from '@/components/BudgetCard';
-
 interface BudgetCategoriesSectionProps {
   categories: {
     title: string;
@@ -9,24 +7,14 @@ interface BudgetCategoriesSectionProps {
     total: number;
   }[];
 }
-
+const BudgetCategoriesSection: React.FC<BudgetCategoriesSectionProps> = ({
-const BudgetCategoriesSection: React.FC<BudgetCategoriesSectionProps> = ({ categories }) => {
+  categories
-  return (
+}) => {
-    <>
+  return <>
-      <h2 className="text-lg font-semibold mb-3 mt-8">지출 카테고리</h2>
+      <h2 className="text-lg font-semibold mb-3 mt-8">지출 그래프</h2>
       <div className="grid gap-4 mb-8 desktop-card">
-        {categories.map((category, index) => (
+        {categories.map((category, index) => <BudgetCard key={index} title={category.title} current={category.current} total={category.total} color="neuro-income" />)}
-          <BudgetCard 
-            key={index}
-            title={category.title} 
-            current={category.current} 
-            total={category.total} 
-            color="neuro-income" 
-          />
-        ))}
       </div>
-    </>
+    </>;
-  );
 };
-
+export default BudgetCategoriesSection;
-export default BudgetCategoriesSection;