60 lines
2.6 KiB
TypeScript
60 lines
2.6 KiB
TypeScript
|
|
import React from 'react';
|
|
|
|
interface SettingsProps {
|
|
isDarkMode: boolean;
|
|
onToggleDarkMode: () => void;
|
|
}
|
|
|
|
export const Settings: React.FC<SettingsProps> = ({ isDarkMode, onToggleDarkMode }) => {
|
|
return (
|
|
<div className="max-w-2xl space-y-8">
|
|
<section>
|
|
<h3 className="text-xl font-bold mb-6">Erscheinungsbild</h3>
|
|
<div className="bg-white dark:bg-slate-900 rounded-3xl p-6 border border-slate-100 dark:border-slate-800 flex items-center justify-between">
|
|
<div>
|
|
<p className="font-bold">Dark Mode</p>
|
|
<p className="text-sm text-slate-500">Das Design der Anwendung umschalten</p>
|
|
</div>
|
|
<button
|
|
onClick={onToggleDarkMode}
|
|
className={`w-14 h-8 rounded-full transition-colors relative ${isDarkMode ? 'bg-brand-500' : 'bg-slate-200 dark:bg-slate-800'}`}
|
|
>
|
|
<div className={`absolute top-1 w-6 h-6 rounded-full bg-white shadow-sm transition-all ${isDarkMode ? 'left-7' : 'left-1'}`}></div>
|
|
</button>
|
|
</div>
|
|
</section>
|
|
|
|
<section>
|
|
<h3 className="text-xl font-bold mb-6">CRM-Konfiguration</h3>
|
|
<div className="bg-white dark:bg-slate-900 rounded-3xl p-6 border border-slate-100 dark:border-slate-800 space-y-6">
|
|
<div className="flex items-center justify-between py-2">
|
|
<div>
|
|
<p className="font-bold">AI Experten-Matching</p>
|
|
<p className="text-sm text-slate-500">Automatische Vorschläge basierend auf Tender-Skills</p>
|
|
</div>
|
|
<input type="checkbox" defaultChecked className="w-5 h-5 accent-brand-500" />
|
|
</div>
|
|
<div className="flex items-center justify-between py-2 border-t border-slate-50 dark:border-slate-800">
|
|
<div>
|
|
<p className="font-bold">LinkedIn-Synchronisierung</p>
|
|
<p className="text-sm text-slate-500">Profile automatisch mit LinkedIn-Daten anreichern</p>
|
|
</div>
|
|
<input type="checkbox" defaultChecked className="w-5 h-5 accent-brand-500" />
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section>
|
|
<h3 className="text-xl font-bold mb-6">Über ICON</h3>
|
|
<div className="p-6 bg-brand-500 rounded-3xl text-white shadow-xl shadow-brand-500/20">
|
|
<p className="font-bold text-lg mb-2">Version 2.4.0</p>
|
|
<p className="text-sm opacity-90 leading-relaxed">
|
|
Ihr smartes CRM für die Expertenvermittlung. Diese Anwendung wurde für höchste Performance und intuitive Bedienung auf Desktop und Mobilgeräten optimiert.
|
|
</p>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
);
|
|
};
|