39 lines
1.3 KiB
JavaScript
39 lines
1.3 KiB
JavaScript
import React from 'react';
|
|
|
|
const SidebarNavigation = ({ activeSection, onSectionChange }) => {
|
|
const items = [
|
|
{ id: 'general-content', label: '1. General Guidelines' },
|
|
{ id: 'packaging-content', label: '2. Packaging Guideline' },
|
|
{ id: 'dna-content', label: '3. Shipping of DNA Samples' },
|
|
{ id: 'rna-content', label: '4. Shipping of RNA Samples' },
|
|
{ id: 'temperature-content', label: '5. Shipping Condition' },
|
|
{ id: 'schedule-content', label: '6. Shipping Schedule and Address' }
|
|
];
|
|
|
|
return (
|
|
<div className="space-y-3">
|
|
{items.map((item) => (
|
|
<button
|
|
key={item.id}
|
|
onClick={() => onSectionChange(item.id)}
|
|
className={`w-full text-left px-6 py-4 text-base font-medium rounded-full transition-all duration-300 border-2 ${
|
|
item.id === 'temperature-content' ? '' : 'whitespace-nowrap'
|
|
} ${
|
|
activeSection === item.id
|
|
? 'text-white shadow-lg border-transparent'
|
|
: 'bg-white text-gray-600 border-transparent hover:border-orange-400'
|
|
}`}
|
|
style={
|
|
activeSection === item.id
|
|
? { backgroundColor: '#ffa72a' }
|
|
: {}
|
|
}
|
|
>
|
|
{item.label}
|
|
</button>
|
|
))}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default SidebarNavigation; |