Spaces:
Restarting
Restarting
File size: 2,362 Bytes
bf5da6b |
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 |
import React, { useState } from 'react';
import { ChevronDownIcon, FileTextIcon, HelpCircleIcon } from 'lucide-react';
interface SidebarProps {
selectedTest: string;
onTestChange: (test: string) => void;
}
export function Sidebar({
selectedTest,
onTestChange
}: SidebarProps) {
const [isDropdownOpen, setIsDropdownOpen] = useState(false);
const testTypes = [{
value: 'cytology',
label: 'Cytology Analysis'
}, {
value: 'colposcopy',
label: 'Colposcopy Analysis'
}, {
value: 'histopathology',
label: 'Histopathology Analysis'
}];
return <aside className="w-64 bg-white border-r border-gray-200 p-4">
<div className="space-y-2">
{/* New Test Dropdown */}
<div className="relative">
<button onClick={() => setIsDropdownOpen(!isDropdownOpen)} className="w-full bg-blue-600 text-white rounded-lg px-4 py-3 flex items-center justify-between hover:bg-blue-700 transition-colors">
<div className="flex items-center gap-2">
<div className="w-2 h-2 bg-white rounded-full" />
<span className="font-medium">New Test</span>
</div>
<ChevronDownIcon className={`w-5 h-5 transition-transform ${isDropdownOpen ? 'rotate-180' : ''}`} />
</button>
{isDropdownOpen && <div className="absolute top-full left-0 right-0 mt-2 bg-white border border-gray-200 rounded-lg shadow-lg z-10">
{testTypes.map(test => <button key={test.value} onClick={() => {
onTestChange(test.value);
setIsDropdownOpen(false);
}} className={`w-full text-left px-4 py-3 hover:bg-gray-50 transition-colors ${selectedTest === test.value ? 'bg-blue-50 text-blue-600' : 'text-gray-700'}`}>
{test.label}
</button>)}
</div>}
</div>
{/* History */}
<button className="w-full flex items-center gap-3 px-4 py-3 text-gray-700 hover:bg-gray-50 rounded-lg transition-colors">
<FileTextIcon className="w-5 h-5" />
<span>History</span>
</button>
{/* Help */}
<button className="w-full flex items-center gap-3 px-4 py-3 text-gray-700 hover:bg-gray-50 rounded-lg transition-colors">
<HelpCircleIcon className="w-5 h-5" />
<span>Help</span>
</button>
</div>
</aside>;
} |