Spaces:
Sleeping
Sleeping
File size: 3,372 Bytes
6df1c09 3e369f2 bf5da6b 3e369f2 6df1c09 3e369f2 6df1c09 3e369f2 6df1c09 bf5da6b 3e369f2 6df1c09 bf5da6b 3e369f2 6df1c09 |
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 |
import { useState } from "react";
import {
FileTextIcon,
HelpCircleIcon,
PlusCircle,
ChevronDown,
ChevronRight,
} from "lucide-react";
import { Microscope, Stethoscope, FlaskConical } from "lucide-react";
interface SidebarProps {
selectedTest: string;
onTestChange: (test: string) => void;
}
export function Sidebar({ selectedTest, onTestChange }: SidebarProps) {
const [isTestOpen, setIsTestOpen] = useState(true);
const testTypes = [
{ value: "cytology", label: "Cytology Analysis", icon: Microscope },
{ value: "colposcopy", label: "Colposcopy Analysis", icon: Stethoscope },
{ value: "histopathology", label: "Histopathology Analysis", icon: FlaskConical },
];
return (
<aside className="w-72 h-screen bg-white border-r border-gray-200 p-4 flex flex-col justify-between">
<div className="space-y-2">
{/* --- Start New Test Dropdown --- */}
<div>
<button
onClick={() => setIsTestOpen(!isTestOpen)}
className="flex items-center justify-between w-full px-3 py-3 rounded-lg hover:bg-gray-50 transition-colors text-gray-800 font-semibold"
>
<div className="flex items-center gap-3">
<PlusCircle className="w-5 h-5 text-teal-600" />
<span>Start New Test</span>
</div>
{isTestOpen ? (
<ChevronDown className="w-5 h-5 text-gray-500" />
) : (
<ChevronRight className="w-5 h-5 text-gray-500" />
)}
</button>
{isTestOpen && (
<div className="mt-1 ml-6 space-y-1">
{testTypes.map(({ value, label, icon: Icon }) => (
<button
key={value}
onClick={() => onTestChange(value)}
className={`flex items-center w-full gap-3 px-3 py-2 rounded-md text-sm transition-all duration-200
${
selectedTest === value
? "bg-gradient-to-r from-teal-700 to-teal-600 text-white font-medium shadow-sm"
: "text-gray-700 hover:bg-gray-50"
}`}
>
<Icon
className={`w-4 h-4 ${
selectedTest === value ? "text-white" : "text-gray-500"
}`}
/>
<span
className={`${
selectedTest === value ? "text-white" : "text-gray-700"
}`}
>
{label}
</span>
</button>
))}
</div>
)}
</div>
{/* --- Divider --- */}
<hr className="border-gray-200 my-4" />
{/* --- Other Options --- */}
<div>
<button className="w-full flex items-center gap-3 px-3 py-3 text-gray-700 hover:bg-gray-50 rounded-lg transition-colors">
<FileTextIcon className="w-5 h-5 text-gray-500" />
<span>History</span>
</button>
<button className="w-full flex items-center gap-3 px-3 py-3 text-gray-700 hover:bg-gray-50 rounded-lg transition-colors">
<HelpCircleIcon className="w-5 h-5 text-gray-500" />
<span>Help</span>
</button>
</div>
</div>
</aside>
);
}
|