52 lines
1.5 KiB
JavaScript
52 lines
1.5 KiB
JavaScript
import { useState } from 'react'
|
|
import AppInfoTab from './tabs/AppInfoTab'
|
|
import ColoursTab from './tabs/ColoursTab'
|
|
|
|
const TABS = [
|
|
{ key: 'app-info', label: 'App Info' },
|
|
{ key: 'colours', label: 'UI Personalization' },
|
|
]
|
|
|
|
export default function SettingsPage() {
|
|
const [activeTab, setActiveTab] = useState('app-info')
|
|
|
|
return (
|
|
<div style={{ width: '100%' }}>
|
|
<h1 className="text-xl font-bold text-gray-800" style={{ marginBottom: 20 }}>Ρυθμίσεις</h1>
|
|
|
|
{/* Tab bar */}
|
|
<div style={{
|
|
display: 'flex', gap: 4,
|
|
borderBottom: '2px solid #e5e7eb',
|
|
marginBottom: 28,
|
|
}}>
|
|
{TABS.map(tab => (
|
|
<button
|
|
key={tab.key}
|
|
onClick={() => setActiveTab(tab.key)}
|
|
style={{
|
|
padding: '10px 20px',
|
|
fontSize: 14,
|
|
fontWeight: 600,
|
|
border: 'none',
|
|
background: 'none',
|
|
cursor: 'pointer',
|
|
color: activeTab === tab.key ? '#3758c9' : '#6b7280',
|
|
borderBottom: `2px solid ${activeTab === tab.key ? '#3758c9' : 'transparent'}`,
|
|
marginBottom: -2,
|
|
borderRadius: '6px 6px 0 0',
|
|
transition: 'color 0.12s',
|
|
}}
|
|
>
|
|
{tab.label}
|
|
</button>
|
|
))}
|
|
</div>
|
|
|
|
{/* Tab content */}
|
|
{activeTab === 'app-info' && <AppInfoTab />}
|
|
{activeTab === 'colours' && <ColoursTab />}
|
|
</div>
|
|
)
|
|
}
|