Docker config

app/components/PackagingShipping/ContentSection.jsx

@@ -0,0 +1,51 @@
+// components/PackagingShipping/ContentSection.jsx
+'use client';
+import React, { useState } from 'react';
+import SidebarNavigation from './SidebarNavigation';
+import GeneralGuidelines from './GeneralGuidelines';
+import PackagingGuideline from './PackagingGuideline';
+import DNASamples from './DNASamples';
+import RNASamples from './RNASamples';
+import ShippingTemperatureTable from './ShippingTemperatureTable';
+import ShippingSchedule from './ShippingSchedule';
+
+const ContentSection = () => {
+  const [activeSection, setActiveSection] = useState('general-content');
+
+  const renderContent = () => {
+    const sections = {
+      'general-content': <GeneralGuidelines />,
+      'packaging-content': <PackagingGuideline />,
+      'dna-content': <DNASamples />,
+      'rna-content': <RNASamples />,
+      'temperature-content': <ShippingTemperatureTable />,
+      'schedule-content': <ShippingSchedule />
+    };
+    return sections[activeSection] || <GeneralGuidelines />;
+  };
+
+  return (
+    <section className="bg-white py-5">
+      <div className="container mx-auto max-w-none px-4 xl:px-8">
+        <div className="bg-white p-4 md:p-6">
+          <div className="grid xl:grid-cols-[280px_1fr] gap-8">
+            {/* LEFT SIDEBAR */}
+            <div className="xl:sticky xl:top-8">
+              <SidebarNavigation 
+                activeSection={activeSection}
+                onSectionChange={setActiveSection}
+              />
+            </div>
+            
+            {/* RIGHT CONTENT */}
+            <div>
+              {renderContent()}
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default ContentSection;