Create src/components/ProtocolsView.tsx

src/components/ProtocolsView.tsx

@@ -0,0 +1,97 @@
+import React from 'react';
+import { Stethoscope, ShieldAlert, Target, BookOpen } from 'lucide-react';
+
+const PROTOCOL_DATA = [
+  {
+    mutation: 'KRAS G12C',
+    indication: 'Non-Small Cell Lung Cancer (NSCLC)',
+    firstLine: 'Sotorasib 960mg QD',
+    mechanism: 'Irreversible KRAS G12C Inhibitor',
+    toxicity: 'High GI/Hepatic Risk'
+  },
+  {
+    mutation: 'EGFR L858R / T790M',
+    indication: 'NSCLC / EGFR+ Adenocarcinoma',
+    firstLine: 'Osimertinib 80mg QD',
+    mechanism: '3rd Gen EGFR-TKI',
+    toxicity: 'Cardio/Dermatological Risk'
+  },
+  {
+    mutation: 'ALK / EML4 Fusion',
+    indication: 'ALK+ NSCLC',
+    firstLine: 'Alectinib 600mg BID',
+    mechanism: 'Highly Selective ALK Inhibitor',
+    toxicity: 'Edema / Bradycardia Risk'
+  },
+  {
+    mutation: 'BRAF V600E',
+    indication: 'Melanoma / Colorectal',
+    firstLine: 'Dabrafenib + Trametinib',
+    mechanism: 'BRAF/MEK Dual Inhibition',
+    toxicity: 'Pyrexia / Skin Toxicity'
+  }
+];
+
+const ProtocolsView: React.FC = () => {
+  return (
+    <div className="space-y-8 animate-in fade-in slide-in-from-bottom-4 duration-700">
+      <header className="pb-6 border-b border-slate-800">
+        <div className="flex items-center gap-3">
+          <Stethoscope className="w-6 h-6 text-gemini-500" />
+          <h2 className="text-2xl font-black italic uppercase tracking-tighter text-slate-100">
+            Therapeutic Protocol Matrix
+          </h2>
+        </div>
+        <p className="text-[10px] font-bold text-slate-500 uppercase tracking-widest mt-2">
+          Evidence-Based Mapping | Version 15.0.0 | Peer-Reviewed Guidelines
+        </p>
+      </header>
+
+      <div className="grid gap-4">
+        {PROTOCOL_DATA.map((item, idx) => (
+          <div key={idx} className="bg-slate-900/40 border border-slate-800 rounded-2xl p-6 hover:border-gemini-500/30 transition-all group">
+            <div className="grid grid-cols-1 md:grid-cols-4 gap-6 items-center">
+              
+              <div className="space-y-1">
+                <div className="flex items-center gap-2 text-gemini-500">
+                  <Target className="w-4 h-4" />
+                  <span className="text-[10px] font-black uppercase tracking-widest">Molecular Driver</span>
+                </div>
+                <h4 className="text-lg font-black text-slate-100 tracking-tight">{item.mutation}</h4>
+                <p className="text-[10px] text-slate-500 font-bold uppercase">{item.indication}</p>
+              </div>
+
+              <div className="space-y-1">
+                <div className="flex items-center gap-2 text-slate-400">
+                  <BookOpen className="w-4 h-4" />
+                  <span className="text-[10px] font-black uppercase tracking-widest">Intervention</span>
+                </div>
+                <p className="text-sm font-mono text-slate-200">{item.firstLine}</p>
+                <p className="text-[10px] text-slate-600 italic uppercase">{item.mechanism}</p>
+              </div>
+
+              <div className="space-y-1">
+                <div className="flex items-center gap-2 text-amber-500/70">
+                  <ShieldAlert className="w-4 h-4" />
+                  <span className="text-[10px] font-black uppercase tracking-widest">Safety Profile</span>
+                </div>
+                <p className="text-[10px] font-bold text-slate-400 uppercase leading-relaxed">
+                  {item.toxicity}
+                </p>
+              </div>
+
+              <div className="flex justify-end">
+                <button className="px-4 py-2 bg-slate-800 hover:bg-slate-700 border border-slate-700 rounded-lg text-[10px] font-black uppercase tracking-widest text-slate-300 transition-all">
+                  View Detail
+                </button>
+              </div>
+
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default ProtocolsView;