62 lines
2 KiB
TypeScript
62 lines
2 KiB
TypeScript
import ModeSwitcher from './ModeSwitcher'
|
|
import LayoutSwitcher from './LayoutSwitcher'
|
|
import ThemeSwitcher from './ThemeSwitcher'
|
|
import DirectionSwitcher from './DirectionSwitcher'
|
|
import NavModeSwitcher from './NavModeSwitcher'
|
|
import StyleSwitcher from './StyleSwitcher'
|
|
import React, { useState, useCallback } from 'react'
|
|
import { useLocalization } from '@/utils/hooks/useLocalization'
|
|
|
|
export type ThemeConfiguratorProps = {
|
|
callBackClose?: () => void
|
|
}
|
|
|
|
|
|
const ThemeConfigurator = ({ callBackClose }: ThemeConfiguratorProps) => {
|
|
const { translate } = useLocalization()
|
|
const [modeKey, setModeKey] = useState(0)
|
|
|
|
// StyleSwitcher'dan tetiklenecek
|
|
const handleStyleChange = useCallback(() => {
|
|
setModeKey((prev) => prev + 1)
|
|
}, [])
|
|
|
|
return (
|
|
<div className="flex flex-col h-full justify-between">
|
|
<div className="flex flex-col gap-y-3 mb-2">
|
|
<div>
|
|
<h6 className="mb-3">{translate('::App.SiteManagement.Theme.Style')}</h6>
|
|
<StyleSwitcher onStyleChange={handleStyleChange} />
|
|
</div>
|
|
<div>
|
|
<h6 className="mb-3">{translate('::SidePanel.NavMode')}</h6>
|
|
<NavModeSwitcher />
|
|
</div>
|
|
<div>
|
|
<h6 className="mb-3">{translate('::SidePanel.Themed')}</h6>
|
|
<ThemeSwitcher />
|
|
</div>
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<h6>{translate('::SidePanel.Mode')}</h6>
|
|
<span>{translate('::SidePanel.Mode.Description')}</span>
|
|
</div>
|
|
<ModeSwitcher key={modeKey} />
|
|
</div>
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<h6>{translate('::SidePanel.Direction')}</h6>
|
|
<span>{translate('::SidePanel.Direction.Description')}</span>
|
|
</div>
|
|
<DirectionSwitcher callBackClose={callBackClose} />
|
|
</div>
|
|
<div>
|
|
<h6 className="mb-3">{translate('::SidePanel.Layout')}</h6>
|
|
<LayoutSwitcher />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default ThemeConfigurator
|