Spaces:
Sleeping
Sleeping
File size: 2,262 Bytes
3e369f2 bf5da6b 3e369f2 bf5da6b 3e369f2 bf5da6b 3e369f2 bf5da6b 3e369f2 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 55 56 57 58 59 60 61 62 |
import { FileTextIcon, HelpCircleIcon } from 'lucide-react';
interface SidebarProps {
selectedTest: string;
onTestChange: (test: string) => void;
}
export function Sidebar({ selectedTest, onTestChange }: SidebarProps) {
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-4">
{/* Gradient Header */}
<h3 className="text-lg font-semibold text-white mb-3 px-3 py-2 rounded-md bg-gradient-to-r from-blue-800 to-teal-600 shadow-sm">
New Test
</h3>
{/* Test Selection */}
<div className="flex flex-col gap-2">
{testTypes.map((test) => (
<label
key={test.value}
className={`flex items-center gap-3 px-3 py-2 rounded-lg cursor-pointer border transition-all duration-200
${
selectedTest === test.value
? 'border-blue-600 bg-blue-50 text-blue-900 font-medium shadow-sm'
: 'border-gray-200 hover:border-blue-300 hover:bg-gray-50 text-gray-700'
}`}
>
<input
type="radio"
name="testType"
value={test.value}
checked={selectedTest === test.value}
onChange={() => onTestChange(test.value)}
className="form-radio h-4 w-4 text-blue-600 focus:ring-blue-500"
/>
<span>{test.label}</span>
</label>
))}
</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>
);
} |