Skip to content

Commit b5d1862

Browse files
EnderKaranEnderKaran
committed
ayarlar sayfasi yapildi
1 parent 8392066 commit b5d1862

File tree

4 files changed

+219
-5
lines changed

4 files changed

+219
-5
lines changed

‎src/App.jsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,13 @@ import { Routes, Route } from 'react-router-dom';
33
import Sidebar from './components/Layout/Sidebar';
44
import Header from './components/Layout/Header';
55

6-
// Oluşturulan sayfaları import et
76
import DashboardContent from './pages/DashboardContent';
87
import CalendarPage from './pages/CalendarPage';
98
import ProfilePage from './pages/ProfilePage';
109
import CustomersPage from './pages/CustomersPage';
1110
import OrdersPage from './pages/OrdersPage';
12-
import AnalyticsPage from './pages/AnalyticsPage';
11+
import AnalyticsPage from './pages/AnalyticsPage';
12+
import SettingsPage from './pages/SettingsPage';
1313

1414
import './App.css';
1515

@@ -69,7 +69,7 @@ function App() {
6969
              <Route path="/customers" element={<CustomersPage theme={theme} />} />
7070
              <Route path="/orders" element={<OrdersPage theme={theme} />} />
7171
              <Route path="/analytics" element={<AnalyticsPage theme={theme} />} />
72-
              <Route path="/settings" element={<div>Settings Page</div>} />
72+
<Route path="/settings" element={<SettingsPage theme={theme} toggleTheme={toggleTheme} />} />
7373
              <Route path="/profile" element={<ProfilePage theme={theme} />} />
7474
            </Routes>
7575
          </main>

‎src/components/Form/ToggleSwitch.jsx‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import React from 'react';
2+
3+
/**
4+
* Yeniden kullanılabilir, animasyonlu bir toggle (açma/kapama) bileşeni.
5+
* @param {object} props
6+
* @param {boolean} props.enabled - Toggle'ın 'açık' (true) veya 'kapalı' (false) durumu.
7+
* @param {function} props.setEnabled - Toggle'ın durumunu değiştiren state fonksiyonu.
8+
* @param {string} props.label - Toggle'ın yanında görünecek etiket metni.
9+
* @param {boolean} props.isDark - Mevcut tema (koyu mod için true).
10+
*/
11+
function ToggleSwitch({ enabled, setEnabled, label, isDark }) {
12+
return (
13+
<label className="flex items-center justify-between cursor-pointer">
14+
<span className={`text-sm font-medium ${isDark ? 'text-slate-300' : 'text-slate-700'}`}>
15+
{label}
16+
</span>
17+
<button
18+
onClick={() => setEnabled(!enabled)}
19+
type="button"
20+
className={`relative inline-flex items-center h-6 w-11 flex-shrink-0 rounded-full cursor-pointer transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-offset-2 ${
21+
isDark ? 'focus:ring-offset-slate-800' : 'focus:ring-offset-white'
22+
} ${enabled ? 'bg-indigo-600 focus:ring-indigo-500' : `${isDark ? 'bg-slate-700' : 'bg-slate-200'} focus:ring-slate-500`}`}
23+
role="switch"
24+
aria-checked={enabled}
25+
>
26+
<span
27+
aria-hidden="true"
28+
className={`inline-block w-4 h-4 transform rounded-full bg-white shadow-lg ring-0 transition duration-200 ease-in-out ${
29+
enabled ? 'translate-x-6' : 'translate-x-1'
30+
}`}
31+
/>
32+
</button>
33+
</label>
34+
);
35+
}
36+
37+
export default ToggleSwitch;

‎src/pages/AnalyticsPage.jsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -111,9 +111,9 @@ function AnalyticsPage({ theme }) {
111111
            </ResponsiveContainer>
112112
          </div>
113113
        </div>
114-
      </div>
114+
      </div>
115115

116-
      {/* Demografi Haritası */}
116+
      {/* Demografi Haritası */}
117117
      <div className="mt-8">
118118
        <DemographicsMap isDark={isDark} />
119119
      </div>

‎src/pages/SettingsPage.jsx‎

Lines changed: 177 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,177 @@
1+
import React, { useState } from 'react';
2+
import { User, Bell, Eye, Lock } from 'lucide-react';
3+
import FormInput from '../components/Form/FormInput';
4+
import ToggleSwitch from '../components/Form/ToggleSwitch';
5+
6+
// Sekmeler
7+
const tabs = [
8+
{ name: 'Account', icon: User },
9+
{ name: 'Notifications', icon: Bell },
10+
{ name: 'Appearance', icon: Eye },
11+
];
12+
13+
function SettingsPage({ theme, toggleTheme }) {
14+
const isDark = theme === 'dark';
15+
const [activeTab, setActiveTab] = useState('Account');
16+
17+
return (
18+
<>
19+
{/* Sayfa Başlığı ve Breadcrumb */}
20+
<div className="flex items-center justify-between mb-8">
21+
<h1 className={`text-2xl font-bold ${isDark ? 'text-white' : 'text-slate-800'}`}>
22+
Settings
23+
</h1>
24+
<div className={`text-sm ${isDark ? 'text-slate-400' : 'text-slate-500'}`}>
25+
<span className="cursor-pointer hover:text-indigo-500">Home</span>
26+
<span className="mx-2">&gt;</span>
27+
<span>Settings</span>
28+
</div>
29+
</div>
30+
31+
{/* Ana Ayarlar Kartı */}
32+
<div className={`rounded-xl border shadow-sm transition-colors duration-300 ${
33+
isDark
34+
? 'bg-slate-800 border-slate-700/50'
35+
: 'bg-white border-slate-200/50'
36+
}`}>
37+
{/* Sekme Navigasyonu */}
38+
<div className={`border-b ${isDark ? 'border-slate-700/50' : 'border-slate-200/50'}`}>
39+
<nav className="flex p-4 -mb-px space-x-4" aria-label="Tabs">
40+
{tabs.map((tab) => (
41+
<button
42+
key={tab.name}
43+
onClick={() => setActiveTab(tab.name)}
44+
className={`flex items-center space-x-2 px-3 py-2 text-sm font-semibold rounded-md transition-colors ${
45+
activeTab === tab.name
46+
? `text-indigo-600 ${isDark ? 'bg-indigo-500/20' : 'bg-indigo-50'}`
47+
: `${isDark ? 'text-slate-400 hover:text-slate-200 hover:bg-slate-700/50' : 'text-slate-500 hover:text-slate-800 hover:bg-slate-100'}`
48+
}`}
49+
>
50+
<tab.icon size={16} />
51+
<span>{tab.name}</span>
52+
</button>
53+
))}
54+
</nav>
55+
</div>
56+
57+
{/* Sekme İçeriği */}
58+
<div className="p-6">
59+
{activeTab === 'Account' && <AccountSettings isDark={isDark} />}
60+
{activeTab === 'Notifications' && <NotificationSettings isDark={isDark} />}
61+
{activeTab === 'Appearance' && <AppearanceSettings isDark={isDark} theme={theme} toggleTheme={toggleTheme} />}
62+
</div>
63+
</div>
64+
</>
65+
);
66+
}
67+
68+
// Hesap Ayarları İçeriği
69+
const AccountSettings = ({ isDark }) => {
70+
const [currentPassword, setCurrentPassword] = useState('');
71+
const [newPassword, setNewPassword] = useState('');
72+
const [confirmPassword, setConfirmPassword] = useState('');
73+
74+
return (
75+
<div className="max-w-xl">
76+
<h3 className={`text-lg font-bold mb-4 ${isDark ? 'text-white' : 'text-slate-800'}`}>Change Password</h3>
77+
<div className="space-y-4">
78+
<FormInput
79+
label="Current Password"
80+
type="password"
81+
value={currentPassword}
82+
onChange={(e) => setCurrentPassword(e.target.value)}
83+
isDark={isDark}
84+
/>
85+
<FormInput
86+
label="New Password"
87+
type="password"
88+
value={newPassword}
89+
onChange={(e) => setNewPassword(e.target.value)}
90+
isDark={isDark}
91+
/>
92+
<FormInput
93+
label="Confirm New Password"
94+
type="password"
95+
value={confirmPassword}
96+
onChange={(e) => setConfirmPassword(e.target.value)}
97+
isDark={isDark}
98+
/>
99+
<div className="flex justify-end">
100+
<button className="px-4 py-2 text-sm font-semibold text-white transition-colors bg-indigo-600 rounded-lg hover:bg-indigo-700">
101+
Update Password
102+
</button>
103+
</div>
104+
</div>
105+
</div>
106+
);
107+
};
108+
109+
// Bildirim Ayarları İçeriği
110+
const NotificationSettings = ({ isDark }) => {
111+
const [emailNewOrder, setEmailNewOrder] = useState(true);
112+
const [emailLowStock, setEmailLowStock] = useState(false);
113+
const [pushNewFeatures, setPushNewFeatures] = useState(true);
114+
115+
return (
116+
<div className="max-w-xl">
117+
<h3 className={`text-lg font-bold mb-6 ${isDark ? 'text-white' : 'text-slate-800'}`}>Email Notifications</h3>
118+
<div className="space-y-5">
119+
<ToggleSwitch
120+
label="Notify me about new orders"
121+
enabled={emailNewOrder}
122+
setEnabled={setEmailNewOrder}
123+
isDark={isDark}
124+
/>
125+
<ToggleSwitch
126+
label="Notify me about low stock"
127+
enabled={emailLowStock}
128+
setEnabled={setEmailLowStock}
129+
isDark={isDark}
130+
/>
131+
</div>
132+
133+
<h3 className={`text-lg font-bold mt-8 mb-6 ${isDark ? 'text-white' : 'text-slate-800'}`}>Push Notifications</h3>
134+
<div className="space-y-5">
135+
<ToggleSwitch
136+
label="Notify me about new features"
137+
enabled={pushNewFeatures}
138+
setEnabled={setPushNewFeatures}
139+
isDark={isDark}
140+
/>
141+
</div>
142+
</div>
143+
);
144+
};
145+
146+
// Görünüm Ayarları İçeriği
147+
const AppearanceSettings = ({ isDark, theme, toggleTheme }) => {
148+
return (
149+
<div className="max-w-xl">
150+
<h3 className={`text-lg font-bold mb-4 ${isDark ? 'text-white' : 'text-slate-800'}`}>Theme</h3>
151+
<p className={`text-sm mb-6 ${isDark ? 'text-slate-400' : 'text-slate-500'}`}>
152+
Select your preferred application theme.
153+
</p>
154+
155+
<div className="flex items-center space-x-4">
156+
<button
157+
onClick={() => theme !== 'light' && toggleTheme()}
158+
className={`flex-1 p-4 rounded-lg border-2 transition-colors ${
159+
!isDark ? 'border-indigo-600' : `${isDark ? 'border-slate-700 hover:border-slate-500' : 'border-slate-300 hover:border-slate-400'}`
160+
}`}
161+
>
162+
<span className={`font-semibold ${isDark ? 'text-slate-300' : 'text-slate-800'}`}>Light</span>
163+
</button>
164+
<button
165+
onClick={() => theme !== 'dark' && toggleTheme()}
166+
className={`flex-1 p-4 rounded-lg border-2 transition-colors ${
167+
isDark ? 'border-indigo-600' : `${isDark ? 'border-slate-700 hover:border-slate-500' : 'border-slate-300 hover:border-slate-400'}`
168+
}`}
169+
>
170+
<span className={`font-semibold ${isDark ? 'text-slate-300' : 'text-slate-800'}`}>Dark</span>
171+
</button>
172+
</div>
173+
</div>
174+
);
175+
};
176+
177+
export default SettingsPage;

0 commit comments

Comments
 (0)