Visual edit in Lovable

Edited UI in Lovable

src/pages/Settings.tsx

@@ -1,28 +1,22 @@
-
 import React from 'react';
 import { useNavigate } from 'react-router-dom';
 import NavBar from '@/components/NavBar';
 import { User, CreditCard, Bell, Lock, HelpCircle, LogOut, ChevronRight } from 'lucide-react';
 import { cn } from '@/lib/utils';
-
+const SettingsOption = ({
-const SettingsOption = ({ 
+  icon: Icon,
-  icon: Icon, 
+  label,
-  label, 
+  description,
-  description, 
   onClick,
   color = "text-neuro-income"
-}: { 
+}: {
-  icon: React.ElementType; 
+  icon: React.ElementType;
-  label: string; 
+  label: string;
   description?: string;
   onClick?: () => void;
   color?: string;
 }) => {
-  return (
+  return <div className="neuro-flat p-4 transition-all duration-300 hover:shadow-neuro-convex cursor-pointer" onClick={onClick}>
-    <div 
-      className="neuro-flat p-4 transition-all duration-300 hover:shadow-neuro-convex cursor-pointer" 
-      onClick={onClick}
-    >
       <div className="flex items-center">
         <div className={cn("neuro-pressed p-3 rounded-full mr-4", color)}>
           <Icon size={20} />
@@ -33,15 +27,11 @@ const SettingsOption = ({
         </div>
         <ChevronRight size={18} className="text-gray-400" />
       </div>
-    </div>
+    </div>;
-  );
 };
-
 const Settings = () => {
   const navigate = useNavigate();
-
+  return <div className="min-h-screen bg-neuro-background pb-24">
-  return (
-    <div className="min-h-screen bg-neuro-background pb-24">
       <div className="max-w-md mx-auto px-6">
         {/* Header */}
         <header className="py-8">
@@ -62,57 +52,27 @@ const Settings = () => {
         {/* Settings Options */}
         <div className="space-y-4 mb-8">
           <h2 className="text-sm font-medium text-gray-500 mb-2 px-2">계정</h2>
-          <SettingsOption 
+          <SettingsOption icon={User} label="프로필 관리" description="개인정보 및 프로필 설정" onClick={() => navigate('/profile-management')} />
-            icon={User} 
+          <SettingsOption icon={CreditCard} label="결제 방법" description="카드 및 은행 계좌 관리" />
-            label="프로필 관리" 
+          <SettingsOption icon={Bell} label="알림 설정" description="앱 알림 및 리마인더" onClick={() => navigate('/notification-settings')} />
-            description="개인정보 및 프로필 설정"
-            onClick={() => navigate('/profile-management')}
-          />
-          <SettingsOption 
-            icon={CreditCard} 
-            label="결제 방법" 
-            description="카드 및 은행 계좌 관리"
-          />
-          <SettingsOption 
-            icon={Bell} 
-            label="알림 설정" 
-            description="앱 알림 및 리마인더"
-            onClick={() => navigate('/notification-settings')}
-          />
         </div>
         
         <div className="space-y-4 mb-8">
           <h2 className="text-sm font-medium text-gray-500 mb-2 px-2">앱 설정</h2>
-          <SettingsOption 
+          <SettingsOption icon={Lock} label="보안 및 개인정보" description="보안 및 데이터 설정" onClick={() => navigate('/security-privacy-settings')} />
-            icon={Lock} 
+          <SettingsOption icon={HelpCircle} label="도움말 및 지원" description="FAQ 및 고객 지원" onClick={() => navigate('/help-support')} />
-            label="보안 및 개인정보" 
-            description="보안 및 데이터 설정"
-            onClick={() => navigate('/security-privacy-settings')}
-          />
-          <SettingsOption 
-            icon={HelpCircle} 
-            label="도움말 및 지원" 
-            description="FAQ 및 고객 지원"
-            onClick={() => navigate('/help-support')}
-          />
         </div>
         
         <div className="mt-8">
-          <SettingsOption 
+          <SettingsOption icon={LogOut} label="로그아웃" color="text-neuro-expense" />
-            icon={LogOut} 
-            label="로그아웃" 
-            color="text-neuro-expense"
-          />
         </div>
         
         <div className="mt-12 text-center text-xs text-gray-400">
-          <p>앱 버전 1.0.0</p>
+          <p>앱 버전 0.1</p>
         </div>
       </div>
 
       <NavBar />
-    </div>
+    </div>;
-  );
 };
-
+export default Settings;
-export default Settings;