93 lines
3.4 KiB
JavaScript
93 lines
3.4 KiB
JavaScript
'use client';
|
|
|
|
import { useState, useEffect } from 'react';
|
|
import { registerPage } from '../registry.js';
|
|
import AdminHeader from '../components/AdminHeader.js';
|
|
import { Card, Input, Select, TabNav } from '@zen/core/shared/components';
|
|
import { applyTheme, getStoredTheme } from '@zen/core/themes';
|
|
|
|
const TABS = [
|
|
{ id: 'general', label: 'Général' },
|
|
{ id: 'appearance', label: 'Apparence' },
|
|
];
|
|
|
|
const THEME_OPTIONS = [
|
|
{ value: 'light', label: 'Mode clair' },
|
|
{ value: 'dark', label: 'Mode sombre' },
|
|
{ value: 'auto', label: 'Thème système' },
|
|
];
|
|
|
|
const SettingsPage = ({ appConfig = {} }) => {
|
|
const [activeTab, setActiveTab] = useState('general');
|
|
const [theme, setTheme] = useState('auto');
|
|
|
|
useEffect(() => {
|
|
setTheme(getStoredTheme());
|
|
}, []);
|
|
|
|
const handleThemeChange = (value) => {
|
|
setTheme(value);
|
|
applyTheme(value);
|
|
};
|
|
|
|
return (
|
|
<div className="flex flex-col gap-4 sm:gap-6 lg:gap-8">
|
|
<AdminHeader title="Paramètres" description="Configuration de votre espace ZEN" />
|
|
|
|
<div className="flex flex-col gap-6 items-start">
|
|
<TabNav tabs={TABS} activeTab={activeTab} onTabChange={setActiveTab} />
|
|
|
|
{activeTab === 'general' && (
|
|
<Card title="Informations générales" className='min-w-1/2'>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<Input
|
|
label="Nom du site"
|
|
value={appConfig.name || ''}
|
|
readOnly
|
|
disabled
|
|
/>
|
|
<Input
|
|
label="URL du site"
|
|
value={appConfig.siteUrl || ''}
|
|
readOnly
|
|
disabled
|
|
description="URL publique de votre site"
|
|
/>
|
|
<Input
|
|
label="Fuseau horaire"
|
|
value={appConfig.timezone || ''}
|
|
readOnly
|
|
disabled
|
|
/>
|
|
<Input
|
|
label="Format de date"
|
|
value={appConfig.dateFormat || ''}
|
|
readOnly
|
|
disabled
|
|
/>
|
|
</div>
|
|
</Card>
|
|
)}
|
|
|
|
{activeTab === 'appearance' && (
|
|
<Card title="Thème" className='min-w-1/2'>
|
|
<div className="max-w-xs">
|
|
<Select
|
|
label="Thème de l'interface"
|
|
value={theme}
|
|
onChange={handleThemeChange}
|
|
options={THEME_OPTIONS}
|
|
description="S'applique immédiatement et persiste entre les sessions"
|
|
/>
|
|
</div>
|
|
</Card>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default SettingsPage;
|
|
|
|
registerPage({ slug: 'settings', title: 'Paramètres', Component: SettingsPage });
|