Docker config

app/components/PackagingShipping/SidebarNavigation.jsx

@@ -0,0 +1,39 @@
+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;