mirror of
https://github.com/mauriceboe/TREK.git
synced 2026-06-19 21:31:46 +00:00
jubnl
4e4afe2545
Replaces the 2-column masonry layout with a horizontal pill tab bar matching the admin page pattern. Extracts all sections into self-contained components under components/Settings/ and reduces SettingsPage.tsx from 1554 lines to 93. Adds i18n tab label keys across all 13 language files.
19 lines
677 B
TypeScript
19 lines
677 B
TypeScript
import React from 'react'
|
|
|
|
export default function ToggleSwitch({ on, onToggle }: { on: boolean; onToggle: () => void }) {
|
|
return (
|
|
<button onClick={onToggle}
|
|
style={{
|
|
position: 'relative', width: 44, height: 24, borderRadius: 12, border: 'none', cursor: 'pointer',
|
|
background: on ? 'var(--accent, #111827)' : 'var(--border-primary, #d1d5db)',
|
|
transition: 'background 0.2s',
|
|
}}>
|
|
<span style={{
|
|
position: 'absolute', top: 2, left: on ? 22 : 2,
|
|
width: 20, height: 20, borderRadius: '50%', background: 'white',
|
|
transition: 'left 0.2s', boxShadow: '0 1px 3px rgba(0,0,0,0.2)',
|
|
}} />
|
|
</button>
|
|
)
|
|
}
|