Started changes the file structure
This commit is contained in:
parent
464df4adac
commit
89b3b824c7
17 changed files with 12 additions and 12 deletions
244
app/components/Settings.tsx
Normal file
244
app/components/Settings.tsx
Normal file
|
|
@ -0,0 +1,244 @@
|
|||
import React, { useState } from'react';
|
||||
|
||||
const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = ({ closeSettings, accountName }) => {
|
||||
const [activeSection, setActiveSection] = useState('general');
|
||||
|
||||
const renderSettingsContent = () => {
|
||||
switch (activeSection) {
|
||||
case 'general':
|
||||
return (
|
||||
<div className="settings-section">
|
||||
<h2>General Settings</h2>
|
||||
<div className="settings-option">
|
||||
<p>Change Language</p>
|
||||
<select>
|
||||
<option value="en">English</option>
|
||||
<option value="es">Spanish</option>
|
||||
<option value="fr">French</option>
|
||||
<option value="de">German</option>
|
||||
<option value="it">Italian</option>
|
||||
<option value="pt">Portuguese</option>
|
||||
<option value="zh">Chinese</option>
|
||||
<option value="ja">Japanese</option>
|
||||
<option value="ko">Korean</option>
|
||||
<option value="ar">Arabic</option>
|
||||
<option value="ru">Russian</option>
|
||||
<option value="he">Hebrew</option>
|
||||
</select>
|
||||
</div>
|
||||
<div className="settings-option">
|
||||
<p>Notifications</p>
|
||||
<label>
|
||||
<input type="checkbox" /> Enable notifications
|
||||
</label>
|
||||
</div>
|
||||
<div className="settings-option">
|
||||
<p>Notification Frequency</p>
|
||||
<select>
|
||||
<option value="instant">Instant</option>
|
||||
<option value="daily">Daily</option>
|
||||
<option value="weekly">Weekly</option>
|
||||
<option value="monthly">Monthly</option>
|
||||
<option value="quarterly">Quarterly</option>
|
||||
<option value="annually">Annually</option>
|
||||
</select>
|
||||
</div>
|
||||
<div className="settings-option">
|
||||
<p>Time Zone</p>
|
||||
<select>
|
||||
<option value="utc">UTC</option>
|
||||
<option value="est">EST</option>
|
||||
<option value="pst">PST</option>
|
||||
<option value="gmt">GMT</option>
|
||||
<option value="cst">CST</option>
|
||||
<option value="mst">MST</option>
|
||||
<option value="bst">BST</option>
|
||||
<option value="cest">CEST</option>
|
||||
</select>
|
||||
</div>
|
||||
<div className="settings-option">
|
||||
<p>Auto-Save</p>
|
||||
<label>
|
||||
<input type="checkbox" /> Enable auto-save
|
||||
</label>
|
||||
</div>
|
||||
<div className="settings-option">
|
||||
<p>Auto-Save Frequency</p>
|
||||
<select>
|
||||
<option value="5">Every 5 minutes</option>
|
||||
<option value="10">Every 10 minutes</option>
|
||||
<option value="15">Every 15 minutes</option>
|
||||
<option value="30">Every 30 minutes</option>
|
||||
<option value="60">Every hour</option>
|
||||
</select>
|
||||
</div>
|
||||
<div className="settings-option">
|
||||
<p>Default Currency</p>
|
||||
<select>
|
||||
<option value="usd">USD</option>
|
||||
<option value="eur">EUR</option>
|
||||
<option value="gbp">GBP</option>
|
||||
<option value="jpy">JPY</option>
|
||||
<option value="cny">CNY</option>
|
||||
<option value="aud">AUD</option>
|
||||
</select>
|
||||
</div>
|
||||
<div className="settings-option">
|
||||
<p>Date Format</p>
|
||||
<select>
|
||||
<option value="mm/dd/yyyy">MM/DD/YYYY</option>
|
||||
<option value="dd/mm/yyyy">DD/MM/YYYY</option>
|
||||
<option value="yyyy-mm-dd">YYYY-MM-DD</option>
|
||||
</select>
|
||||
</div>
|
||||
<div className="settings-option">
|
||||
<p>Time Format</p>
|
||||
<select>
|
||||
<option value="12-hour">12-hour clock</option>
|
||||
<option value="24-hour">24-hour clock</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
case 'privacy':
|
||||
return (
|
||||
<div className="settings-section">
|
||||
<h2>Privacy Settings</h2>
|
||||
<div className="settings-option">
|
||||
<p>Data Collection</p>
|
||||
<label>
|
||||
<input type="checkbox" /> Allow data collection
|
||||
</label>
|
||||
</div>
|
||||
<div className="settings-option">
|
||||
<p>Location Access</p>
|
||||
<label>
|
||||
<input type="checkbox" /> Enable location access
|
||||
</label>
|
||||
</div>
|
||||
<div className="settings-option">
|
||||
<p>Two-Factor Authentication</p>
|
||||
<label>
|
||||
<input type="checkbox" /> Enable 2FA
|
||||
</label>
|
||||
</div>
|
||||
<div className="settings-option">
|
||||
<p>Data Export</p>
|
||||
<button>Export Data</button>
|
||||
</div>
|
||||
<div className="settings-option">
|
||||
<p>Cookie Policy</p>
|
||||
<label>
|
||||
<input type="checkbox" /> Accept cookie policy
|
||||
</label>
|
||||
</div>
|
||||
<div className="settings-option">
|
||||
<p>GDPR Compliance</p>
|
||||
<label>
|
||||
<input type="checkbox" /> I agree to GDPR terms
|
||||
</label>
|
||||
</div>
|
||||
<div className="settings-option">
|
||||
<p>CCPA Compliance</p>
|
||||
<label>
|
||||
<input type="checkbox" /> I agree to CCPA terms
|
||||
</label>
|
||||
</div>
|
||||
<div className="settings-option">
|
||||
<p>Biometric Data</p>
|
||||
<label>
|
||||
<input type="checkbox" /> Allow biometric data collection
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
case 'theme':
|
||||
return (
|
||||
<div className="settings-section">
|
||||
<h2>Theme Settings</h2>
|
||||
<div className="settings-option">
|
||||
<p>Choose Theme Color</p>
|
||||
<input type="color" />
|
||||
</div>
|
||||
<div className="settings-option">
|
||||
<p>Font Size</p>
|
||||
<input type="range" min="10" max="30" />
|
||||
</div>
|
||||
<div className="settings-option">
|
||||
<p>Background Pattern</p>
|
||||
<select>
|
||||
<option value="solid">Solid</option>
|
||||
<option value="striped">Striped</option>
|
||||
<option value="dots">Dotted</option>
|
||||
<option value="grid">Grid</option>
|
||||
</select>
|
||||
</div>
|
||||
<div className="settings-option">
|
||||
<p>Font Family</p>
|
||||
<select>
|
||||
<option value="arial">Arial</option>
|
||||
<option value="calibri">Calibri</option>
|
||||
<option value="helvetica">Helvetica</option>
|
||||
</select>
|
||||
</div>
|
||||
<div className="settings-option">
|
||||
<p>Button Style</p>
|
||||
<select>
|
||||
<option value="flat">Flat</option>
|
||||
<option value="raised">Raised</option>
|
||||
<option value="rounded">Rounded</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
case 'account':
|
||||
return (
|
||||
<div className="settings-section">
|
||||
<h2>Account Settings</h2>
|
||||
<div className="settings-option">
|
||||
<p>Change Name</p>
|
||||
<input type="text" placeholder="New Name" />
|
||||
</div>
|
||||
<div className="settings-option">
|
||||
<p>Change Email</p>
|
||||
<input type="email" placeholder="New Email" />
|
||||
</div>
|
||||
<div className="settings-option">
|
||||
<p>Change Password</p>
|
||||
<input type="password" placeholder="New Password" />
|
||||
</div>
|
||||
<div className="settings-option">
|
||||
<p>Delete Account</p>
|
||||
<button>Delete Account</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="popup-overlay">
|
||||
<div className="settings-content">
|
||||
<div className="settings-container">
|
||||
<div className="sidebar">
|
||||
<ul>
|
||||
<li onClick={() => setActiveSection('general')}>General</li>
|
||||
<li onClick={() => setActiveSection('privacy')}>Privacy</li>
|
||||
<li onClick={() => setActiveSection('theme')}>Theme</li>
|
||||
<li onClick={() => setActiveSection('account')}>Account</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="settings-main">
|
||||
<h2>Settings for {accountName}</h2>
|
||||
{renderSettingsContent()}
|
||||
<button className="close-popup" onClick={closeSettings}>Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Settings;
|
||||
Loading…
Add table
Add a link
Reference in a new issue