Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 | import { useState } from 'react'
import { Settings, Save, Key, Globe, Database } from 'lucide-react'
import toast from 'react-hot-toast'
function SettingsPage() {
const [settings, setSettings] = useState({
apiUrl: import.meta.env.VITE_API_URL || 'http://localhost:8000',
openRouterKey: localStorage.getItem('openrouter_key') || '',
theme: 'light',
language: 'fr'
})
const handleSave = () => {
localStorage.setItem('api_url', settings.apiUrl)
localStorage.setItem('openrouter_key', settings.openRouterKey)
toast.success('Paramètres sauvegardés')
}
return (
<div className="max-w-2xl mx-auto">
<div className="mb-8">
<h1 className="text-3xl font-bold text-gray-900">Paramètres</h1>
<p className="text-gray-600 mt-1">
Configurez votre environnement Nooloom
</p>
</div>
<div className="space-y-6">
{/* API Configuration */}
<div className="card">
<h2 className="text-lg font-semibold mb-6 flex items-center">
<Globe className="w-5 h-5 mr-2 text-primary-600" />
Configuration API
</h2>
<div className="space-y-4">
<div>
<label className="block text-sm font-medium text-gray-700 mb-2">
URL de l'API
</label>
<input
type="url"
value={settings.apiUrl}
onChange={(e) => setSettings({...settings, apiUrl: e.target.value})}
className="input"
placeholder="http://localhost:8000"
/>
<p className="text-sm text-gray-500 mt-1">
URL de l'API Gateway Nooloom
</p>
</div>
</div>
</div>
{/* OpenRouter Configuration */}
<div className="card">
<h2 className="text-lg font-semibold mb-6 flex items-center">
<Key className="w-5 h-5 mr-2 text-primary-600" />
Configuration OpenRouter
</h2>
<div>
<label className="block text-sm font-medium text-gray-700 mb-2">
Clé API OpenRouter
</label>
<input
type="password"
value={settings.openRouterKey}
onChange={(e) => setSettings({...settings, openRouterKey: e.target.value})}
className="input"
placeholder="sk-or-..."
/>
<p className="text-sm text-gray-500 mt-1">
Nécessaire pour les fonctionnalités LLM (Fact/Data Refiner)
</p>
<a
href="https://openrouter.ai/keys"
target="_blank"
rel="noopener noreferrer"
className="text-sm text-primary-600 hover:underline mt-2 inline-block"
>
Obtenir une clé API →
</a>
</div>
</div>
{/* System Info */}
<div className="card">
<h2 className="text-lg font-semibold mb-6 flex items-center">
<Database className="w-5 h-5 mr-2 text-primary-600" />
Informations Système
</h2>
<div className="space-y-3 text-sm">
<div className="flex justify-between py-2 border-b">
<span className="text-gray-600">Version</span>
<span className="font-medium">1.0.0</span>
</div>
<div className="flex justify-between py-2 border-b">
<span className="text-gray-600">Services actifs</span>
<span className="font-medium text-green-600">8/8</span>
</div>
<div className="flex justify-between py-2 border-b">
<span className="text-gray-600">Architecture</span>
<span className="font-medium">Micro-services</span>
</div>
<div className="flex justify-between py-2">
<span className="text-gray-600">Docker</span>
<span className="font-medium text-green-600">✓ Configuré</span>
</div>
</div>
</div>
{/* Save button */}
<button
onClick={handleSave}
className="btn-primary w-full inline-flex items-center justify-center"
>
<Save className="w-5 h-5 mr-2" />
Sauvegarder les paramètres
</button>
</div>
</div>
)
}
export default SettingsPage
|