Spaces:
Sleeping
Sleeping
File size: 5,610 Bytes
482b268 ce64f95 482b268 ce64f95 482b268 ce64f95 482b268 ce64f95 482b268 ce64f95 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 | import { useEffect, useRef, useState } from 'react'
const themeOptions = [
{ label: 'System', value: 'system' },
{ label: 'Dark', value: 'dark' },
{ label: 'Light', value: 'light' },
]
function SettingsPanel({ themeMode, onSetThemeMode, onCloseSettings }) {
const [activeSection, setActiveSection] = useState('general')
const [isThemeMenuOpen, setIsThemeMenuOpen] = useState(false)
const menuRef = useRef(null)
useEffect(() => {
const handlePointerDown = (event) => {
if (menuRef.current && !menuRef.current.contains(event.target)) {
setIsThemeMenuOpen(false)
}
}
window.addEventListener('mousedown', handlePointerDown)
return () => window.removeEventListener('mousedown', handlePointerDown)
}, [])
const activeThemeLabel = themeOptions.find((option) => option.value === themeMode)?.label || 'System'
return (
<section className="settings-shell" aria-label="Settings">
<aside className="settings-shell__sidebar" aria-label="Settings sections">
<button type="button" className="settings-shell__close" onClick={onCloseSettings} aria-label="Close settings">
X
</button>
<button
type="button"
className={`settings-shell__item ${activeSection === 'general' ? 'is-active' : ''}`}
onClick={() => setActiveSection('general')}
>
<span className="settings-shell__item-icon" aria-hidden="true">G</span>
<span>General</span>
</button>
<button
type="button"
className={`settings-shell__item ${activeSection === 'about' ? 'is-active' : ''}`}
onClick={() => setActiveSection('about')}
>
<span className="settings-shell__item-icon" aria-hidden="true">A</span>
<span>About</span>
</button>
</aside>
<section className="settings-shell__content">
<header className="settings-shell__content-header">
<h2>{activeSection === 'general' ? 'General' : 'About'}</h2>
</header>
{activeSection === 'general' ? (
<div className="settings-shell__panel">
<div className="settings-shell__row">
<div className="settings-shell__row-copy">
<span className="settings-shell__row-label">Appearance</span>
</div>
<div className="settings-shell__dropdown" ref={menuRef}>
<button
type="button"
className="settings-shell__dropdown-trigger"
onClick={() => setIsThemeMenuOpen((current) => !current)}
aria-haspopup="menu"
aria-expanded={isThemeMenuOpen}
>
<span>{activeThemeLabel}</span>
<span className="settings-shell__chevron" aria-hidden="true">v</span>
</button>
{isThemeMenuOpen ? (
<div className="settings-shell__dropdown-menu" role="menu" aria-label="Appearance options">
{themeOptions.map((option) => {
const isActive = option.value === themeMode
return (
<button
key={option.value}
type="button"
className={`settings-shell__dropdown-item ${isActive ? 'is-active' : ''}`}
onClick={() => {
onSetThemeMode(option.value)
setIsThemeMenuOpen(false)
}}
role="menuitemradio"
aria-checked={isActive}
>
<span>{option.label}</span>
<span className="settings-shell__check" aria-hidden="true">
{isActive ? 'v' : ''}
</span>
</button>
)
})}
</div>
) : null}
</div>
</div>
</div>
) : (
<article className="settings-shell__about">
<section className="settings-shell__about-card">
<h3>What this project does</h3>
<p>
This HR dashboard helps manage positions, candidate pipelines, and recruiter workflows in one place.
</p>
</section>
<section className="settings-shell__about-card">
<h3>Features</h3>
<ul>
<li>Protected login access for authorized users.</li>
<li>Position management for roles like Research, Frontend, and Product.</li>
<li>Kanban pipeline with drag-and-drop candidate movement.</li>
<li>Candidate directory with filters, edit, delete, and copy actions.</li>
<li>Calendar planning views for month, week, and year tracking.</li>
<li>Light, dark, and system theme support with saved preference.</li>
</ul>
</section>
<section className="settings-shell__about-card">
<h3>How to use</h3>
<ul>
<li>Use General to change appearance settings.</li>
<li>Use About to review the product features.</li>
<li>Return to Dashboard to switch the position and inspect each pipeline.</li>
</ul>
</section>
</article>
)}
</section>
</section>
)
}
export default SettingsPanel |