Create src/components/SettingsView.tsx

src/components/SettingsView.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import { useOncologyStore } from '../store/useOncologyStore';
+import { Sun, Moon, Monitor, AlertTriangle } from 'lucide-react';
+
+const SettingsView = () => {
+  const { theme, setTheme, isToxicityModelEnabled, toggleToxicityModel } = useOncologyStore();
+
+  return (
+    <div className="max-w-4xl mx-auto space-y-10">
+      <header>
+        <h2 className="text-4xl font-black uppercase italic tracking-tighter">System Configuration</h2>
+        <p className="text-[10px] font-black text-slate-500 uppercase tracking-widest">Framework v15.0.0</p>
+      </header>
+
+      <section className="bg-slate-50 dark:bg-slate-900 border border-slate-200 dark:border-slate-800 p-8 rounded-[2.5rem]">
+        <h3 className="text-xs font-black uppercase mb-6">Visual Environment</h3>
+        <div className="grid grid-cols-3 gap-4">
+          {[
+            { id: 'light', icon: Sun, label: 'Light' },
+            { id: 'dark', icon: Moon, label: 'Dark' },
+            { id: 'system', icon: Monitor, label: 'System' }
+          ].map((t) => (
+            <button
+              key={t.id}
+              onClick={() => setTheme(t.id as any)}
+              className={`flex flex-col items-center p-6 rounded-2xl border transition-all ${
+                theme === t.id ? 'border-sky-500 bg-sky-500/10 text-sky-500' : 'border-slate-200 dark:border-slate-800'
+              }`}
+            >
+              <t.icon size={24} className="mb-2" />
+              <span className="text-[10px] font-black uppercase">{t.label}</span>
+            </button>
+          ))}
+        </div>
+      </section>
+
+      <section className="bg-slate-50 dark:bg-slate-900 border border-slate-200 dark:border-slate-800 p-8 rounded-[2.5rem] flex justify-between items-center">
+        <div>
+          <h3 className="text-xs font-black uppercase">Toxicity Predictive Model</h3>
+          <p className="text-[10px] font-bold text-slate-500 mt-1">Enable real-time AE forecasting & risk stratification.</p>
+        </div>
+        <button 
+          onClick={toggleToxicityModel}
+          className={`w-14 h-8 rounded-full transition-all flex items-center px-1 ${isToxicityModelEnabled ? 'bg-emerald-500' : 'bg-slate-700'}`}
+        >
+          <div className={`w-6 h-6 bg-white rounded-full transition-transform ${isToxicityModelEnabled ? 'translate-x-6' : 'translate-x-0'}`} />
+        </button>
+      </section>
+    </div>
+  );
+};
+
+export default SettingsView;