54 lines
1.6 KiB
TypeScript
54 lines
1.6 KiB
TypeScript
interface SubSection {
|
|
id: string;
|
|
label: string;
|
|
}
|
|
|
|
interface AsideSectionProps {
|
|
activeSubSection: string;
|
|
onSubSectionClick: (subSectionId: string) => void;
|
|
subSections: SubSection[];
|
|
mainTabTitle: string;
|
|
}
|
|
|
|
const AsideSection = ({
|
|
activeSubSection,
|
|
onSubSectionClick,
|
|
subSections,
|
|
mainTabTitle
|
|
}: AsideSectionProps) => {
|
|
// If no subsections, don't render the aside navigation
|
|
if (subSections.length === 0) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<div className="w-[16vw] p-4">
|
|
<div className="mb-4">
|
|
<h3 className="text-lg font-semibold text-gray-800">{mainTabTitle}</h3>
|
|
<p className="text-sm text-gray-500 mt-1">Navigate through sections</p>
|
|
</div>
|
|
|
|
<nav className="space-y-2 max-h-96 overflow-y-auto">
|
|
{subSections.map((subSection) => (
|
|
<a
|
|
key={subSection.id}
|
|
href={`#${subSection.id}`}
|
|
onClick={(e) => {
|
|
e.preventDefault(); // Prevent default anchor behavior
|
|
onSubSectionClick(subSection.id);
|
|
}}
|
|
className={`block w-full text-left px-3 py-2 rounded-md text-sm font-medium transition-all duration-200 hover:bg-gray-50 cursor-pointer no-underline ${
|
|
activeSubSection === subSection.id
|
|
? "bg-blue-50 text-blue-600 border-l-4 border-blue-600 shadow-sm"
|
|
: "text-gray-600 hover:text-gray-800 hover:bg-gray-50"
|
|
}`}
|
|
>
|
|
<span className="block">{subSection.label}</span>
|
|
</a>
|
|
))}
|
|
</nav>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default AsideSection; |