Flowchart update

app/rna-sequencing/small-rna-sequencing/components/SRNABioinformatics.jsx

@@ -1,28 +1,100 @@
-// app/rna-sequencing/small-rna-sequencing/components/SRNABioinformatics.jsx
+import React from 'react';
+import { ArrowDown, ArrowRight, ArrowUp } from 'lucide-react';
+
+const SRNABioinformatics = ({
+  title = "Bioinformatics Pipeline",
+  leftSteps = [
+    "Raw Sequencing Data (fastq files)",
+    "Quality Control and Preprocessing of Data", 
+    "High Quality Sequencing Data (fastq file)",
+    "Blast Against mRNA, Rfam and RepBase",
+    "Retained data with no annotation and remove data annotated with mRNA, Rfam and RepBase"
+  ],
+  rightSteps = [
+    "Downstream Advanced Analysis",
+    "Identification of known and Novel microRNA",
+    "Hairpin Prediction", 
+    "Aligned to Genome",
+    "Aligned to Genome"
+  ],
+  backgroundColor = "bg-gray-50",
+  cardColor = "bg-gray-300",
+  textColor = "text-teal-600",
+  arrowColor = "text-gray-600",
+  className = "",
+  cardClassName = "",
+  titleClassName = ""
+}) => {
+  // Combine steps for mobile layout
+  const mobileSteps = [...leftSteps, ...rightSteps.slice().reverse()];
 
-const SRNABioinformatics = () => {
   return (
-    <section className="py-8 lg:py-12 bg-gray-50">
-      <div className="container mx-auto max-w-none px-4 lg:px-6">
-        <h2 className="text-2xl lg:text-3xl text-gray-700 text-left pb-2 mb-6 lg:mb-6">
-          Bioinformatics Pipeline
+    <section className={`py-6 sm:py-8 lg:py-12 ${backgroundColor} ${className}`}>
+      <div className="container mx-auto max-w-none px-3 sm:px-4 lg:px-6">
+        <h2 className={`text-gray-700 text-left pb-4 sm:pb-6 text-xl sm:text-2xl lg:text-3xl font-normal ${titleClassName}`}>
+          {title}
         </h2>
-        
-        {/* Pipeline Image */}
-        <div className="bg-white rounded-xl shadow-lg p-6 lg:p-8">
+
+        {/* Pipeline Flowchart */}
+        <div className="bg-white rounded-xl shadow-lg p-4 sm:p-6 lg:p-8">
           <div className="flex justify-center">
-            <img 
-              src="/images/srna-bioinformatics-pipeline.jpg" 
-              alt="Small RNA Sequencing Bioinformatics Pipeline Workflow"
-              className="max-w-full h-auto rounded-lg"
-            />
-          </div>
-          
-          {/* Pipeline Description */}
-          <div className="mt-6 text-center">
-            <p className="text-gray-600 text-sm lg:text-base">
-              Small RNA sequencing bioinformatics pipeline for miRNA and small RNA analysis and expression profiling
-            </p>
+            <div className="w-full max-w-5xl">
+              <div className="relative">
+                {/* Mobile Layout - Single Column */}
+                <div className="block sm:hidden">
+                  <div className="flex flex-col items-center space-y-3">
+                    {mobileSteps.map((step, index) => (
+                      <React.Fragment key={index}>
+                        <div className={`${cardColor} rounded-lg p-3 w-full text-center border ${cardClassName}`}>
+                          <h3 className={`text-xs font-medium ${textColor}`}>{step}</h3>
+                        </div>
+                        {index < mobileSteps.length - 1 && (
+                          <ArrowDown className={`w-5 h-5 ${arrowColor}`} />
+                        )}
+                      </React.Fragment>
+                    ))}
+                  </div>
+                </div>
+
+                {/* Desktop Layout - Two Columns */}
+                <div className="hidden sm:block">
+                  <div className="grid grid-cols-2 gap-4 sm:gap-6 lg:gap-8">
+                    {/* Left Column */}
+                    <div className="flex flex-col items-center space-y-3">
+                      {leftSteps.map((step, index) => (
+                        <React.Fragment key={index}>
+                          <div className={`${cardColor} rounded-lg p-4 w-full text-center border ${cardClassName}`} style={{maxWidth: '19rem'}}>
+                            <h3 className={`text-sm font-medium ${textColor}`}>{step}</h3>
+                          </div>
+                          {index < leftSteps.length - 1 && (
+                            <ArrowDown className={`w-6 h-6 ${arrowColor}`} />
+                          )}
+                        </React.Fragment>
+                      ))}
+                    </div>
+
+                    {/* Right Column */}
+                    <div className="flex flex-col items-center space-y-3">
+                      {rightSteps.map((step, index) => (
+                        <React.Fragment key={index}>
+                          <div className={`${cardColor} rounded-lg p-4 w-full text-center border ${cardClassName}`} style={{maxWidth: '19rem'}}>
+                            <h3 className={`text-sm font-medium ${textColor}`}>{step}</h3>
+                          </div>
+                          {index < rightSteps.length - 1 && (
+                            <ArrowUp className={`w-6 h-6 ${arrowColor}`} />
+                          )}
+                        </React.Fragment>
+                      ))}
+                    </div>
+                  </div>
+
+                  {/* Horizontal Arrow from Transcript Assembly to Transcript Assembly Validation */}
+                  <div className="absolute bottom-4 left-1/2 transform -translate-x-1/2 flex items-center justify-center">
+                    <ArrowRight className={`w-8 h-8 ${arrowColor}`} />
+                  </div>
+                </div>
+              </div>
+            </div>
           </div>
         </div>
       </div>