mirror of
https://github.com/chillpadclub/bedolaga-cabinet.git
synced 2026-07-30 02:23:47 +00:00
Refactor AdminSettings into modular components
Split 1123-line monolithic AdminSettings.tsx into 11 modules: Components: - icons.tsx (85 lines) - All SVG icons - Toggle.tsx (21 lines) - Reusable toggle component - SettingInput.tsx (89 lines) - Text/select input for settings - SettingRow.tsx (104 lines) - Single setting card - BrandingTab.tsx (212 lines) - Logo, name, animation settings - ThemeTab.tsx (277 lines) - Theme presets and custom colors - FavoritesTab.tsx (59 lines) - Starred settings display - SettingsTab.tsx (144 lines) - Accordion categories view Utilities: - constants.ts (55 lines) - MENU_SECTIONS, THEME_PRESETS - utils.ts (35 lines) - formatSettingKey, stripHtml - index.ts (13 lines) - Barrel exports Result: AdminSettings.tsx reduced from 1123 to 251 lines
This commit is contained in:
21
src/components/admin/Toggle.tsx
Normal file
21
src/components/admin/Toggle.tsx
Normal file
@@ -0,0 +1,21 @@
|
||||
interface ToggleProps {
|
||||
checked: boolean
|
||||
onChange: () => void
|
||||
disabled?: boolean
|
||||
}
|
||||
|
||||
export function Toggle({ checked, onChange, disabled }: ToggleProps) {
|
||||
return (
|
||||
<button
|
||||
onClick={onChange}
|
||||
disabled={disabled}
|
||||
className={`relative w-12 h-6 rounded-full transition-colors ${
|
||||
checked ? 'bg-accent-500' : 'bg-dark-600'
|
||||
} ${disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'}`}
|
||||
>
|
||||
<div className={`absolute top-1 w-4 h-4 bg-white rounded-full transition-transform ${
|
||||
checked ? 'left-7' : 'left-1'
|
||||
}`} />
|
||||
</button>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user