Skip to content

Commit

Permalink
Merge pull request #206 from NK-Works/settings-page
Browse files Browse the repository at this point in the history 
Added Settings Page
  • Loading branch information
@shivamyadavrgipt
shivamyadavrgipt authored Nov 3, 2024
2 parents 9f992b0 + 4535037 commit 6726117
Show file tree
Hide file tree
Showing 2 changed files with 253 additions and 4 deletions.
101 changes: 101 additions & 0 deletions src/pages/settings.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,101 @@
/* Container */
.settings-container {
display: flex;
min-height: 100vh;
background-color: #f4f4f4;
}

/* Sidebar */
.settings-sidebar {
width: 25%;
background-color: #ffffff;
padding: 20px;
border-right: 1px solid #ddd;
}

.settings-title {
font-size: 24px;
font-weight: bold;
margin-bottom: 20px;
}

.settings-menu {
list-style: none;
padding: 0;
margin: 0;
}

.settings-menu-item {
padding: 10px 15px;
cursor: pointer;
color: #333;
border-radius: 5px;
margin-bottom: 10px;
transition: background-color 0.3s;
}

.settings-menu-item:hover {
background-color: #f0f0f0;
}

.settings-menu-item.active {
background-color: #007bff;
color: #fff;
}

/* Main Content */
.settings-content {
width: 75%;
padding: 30px;
}

.settings-section {
max-width: 600px;
}

.section-title {
font-size: 22px;
font-weight: bold;
margin-bottom: 15px;
}

.settings-field {
margin-bottom: 15px;
}

.settings-field label {
display: block;
font-weight: 500;
color: #333;
margin-bottom: 5px;
}

.settings-field input[type="text"],
.settings-field input[type="email"],
.settings-field input[type="password"],
.settings-field input[type="tel"],
.settings-field select {
width: 100%;
padding: 8px;
border: 1px solid #ddd;
border-radius: 5px;
}

.settings-field input[type="checkbox"] {
margin-right: 8px;
}

.settings-field button {
padding: 8px 12px;
border: none;
background-color: #007bff;
color: #fff;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s;
}

.settings-field button:hover {
background-color: #0056b3;
}

156 changes: 152 additions & 4 deletions src/pages/settings.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,157 @@
import React from 'react'
import React, { useState } from 'react';
import './settings.css';

export default function Settings() {
const [activeSection, setActiveSection] = useState('account');

const sections = [
{ id: 'account', label: 'Account Settings' },
{ id: 'privacy', label: 'Privacy' },
{ id: 'notifications', label: 'Notifications' },
{ id: 'security', label: 'Security' },
{ id: 'display', label: 'Display & Accessibility' },
];

return (
<div>
settings
<div className="settings-container">
{/* Sidebar */}
<div className="settings-sidebar">
<h2 className="settings-title">Settings</h2>
<ul className="settings-menu">
{sections.map((section) => (
<li
key={section.id}
className={`settings-menu-item ${
activeSection === section.id ? 'active' : ''
}`}
onClick={() => setActiveSection(section.id)}
>
{section.label}
</li>
))}
</ul>
</div>

{/* Main Content */}
<div className="settings-content">
{/* Account Settings */}
{activeSection === 'account' && (
<div className="settings-section">
<h2 className="section-title">Account Settings</h2>
<div className="settings-field">
<label>Username</label>
<input type="text" placeholder="Enter your username" disabled />
</div>
<div className="settings-field">
<label>Email</label>
<input type="email" placeholder="Enter your email" disabled />
</div>
<div className="settings-field">
<label>Change Password</label>
<input type="password" placeholder="New password" />
</div>
<div className="settings-field">
<label>Phone Number</label>
<input type="tel" placeholder="Enter your phone number" />
</div>
</div>
)}

{/* Privacy Settings */}
{activeSection === 'privacy' && (
<div className="settings-section">
<h2 className="section-title">Privacy Settings</h2>
<div className="settings-field">
<label>Profile Visibility</label>
<select>
<option>Public</option>
<option>Friends Only</option>
<option>Private</option>
</select>
</div>
<div className="settings-field">
<label>Last Seen</label>
<select>
<option>Everyone</option>
<option>Friends Only</option>
<option>No One</option>
</select>
</div>
<div className="settings-field">
<label>Location Sharing</label>
<select>
<option>Enabled</option>
<option>Disabled</option>
</select>
</div>
</div>
)}

{/* Notification Settings */}
{activeSection === 'notifications' && (
<div className="settings-section">
<h2 className="section-title">Notification Settings</h2>
<div className="settings-field">
<label>Email Notifications</label>
<input type="checkbox" /> Receive notifications via email
</div>
<div className="settings-field">
<label>Push Notifications</label>
<input type="checkbox" /> Receive notifications on your device
</div>
<div className="settings-field">
<label>Message Notifications</label>
<input type="checkbox" /> Receive notifications for messages
</div>
</div>
)}

{/* Security Settings */}
{activeSection === 'security' && (
<div className="settings-section">
<h2 className="section-title">Security Settings</h2>
<div className="settings-field">
<label>Two-Factor Authentication</label>
<button>Enable 2FA</button>
</div>
<div className="settings-field">
<label>Login Alerts</label>
<input type="checkbox" /> Send alerts for unrecognized logins
</div>
<div className="settings-field">
<label>Remember Devices</label>
<input type="checkbox" /> Keep me signed in on trusted devices
</div>
</div>
)}

{/* Display & Accessibility Settings */}
{activeSection === 'display' && (
<div className="settings-section">
<h2 className="section-title">Display & Accessibility</h2>
<div className="settings-field">
<label>Theme</label>
<select>
<option>Light</option>
<option>Dark</option>
<option>System Default</option>
</select>
</div>
<div className="settings-field">
<label>Font Size</label>
<select>
<option>Small</option>
<option>Medium</option>
<option>Large</option>
</select>
</div>
<div className="settings-field">
<label>High Contrast</label>
<input type="checkbox" /> Enable high contrast mode
</div>
</div>
)}
</div>
</div>
)
);
}

0 comments on commit 6726117

Please sign in to comment.