Flowchart Updated

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

@@ -1,98 +1,49 @@
 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"
-  ],
+  svgContent = null, // Pass your SVG content here as JSX
+  svgUrl = "/images/flowchart/smallrna.svg",
   backgroundColor = "bg-gray-50",
-  cardColor = "bg-gray-300",
-  textColor = "text-teal-600",
-  arrowColor = "text-gray-600",
+  textColor = "text-gray-700",
   className = "",
-  cardClassName = "",
-  titleClassName = ""
+  titleClassName = "",
+  svgClassName = "",
+  containerClassName = ""
 }) => {
-  // Combine steps for mobile layout
-  const mobileSteps = [...leftSteps, ...rightSteps.slice().reverse()];
-
   return (
     <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}`}>
+      <div className={`container mx-auto max-w-none px-3 sm:px-4 lg:px-6 ${containerClassName}`}>
+        <h2 className={`${textColor} text-left pb-4 sm:pb-6 text-xl sm:text-2xl lg:text-3xl font-normal ${titleClassName}`}>
           {title}
         </h2>
 
-        {/* Pipeline Flowchart */}
+        {/* SVG Flowchart Container */}
         <div className="bg-white rounded-xl shadow-lg p-4 sm:p-6 lg:p-8">
           <div className="flex justify-center">
-            <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 className="w-full max-w-6xl">
+              {/* SVG Container with responsive sizing */}
+              <div className={`w-full ${svgClassName}`}>
+                {svgUrl ? (
+                  // If SVG URL/path is provided
+                  <img 
+                    src={svgUrl} 
+                    alt="Flowchart diagram"
+                    className="w-full h-auto object-contain"
+                  />
+                ) : svgContent ? (
+                  // If SVG content is provided as JSX
+                  <div className="w-full">
+                    <div className="w-full">
+                      {svgContent}
                     </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}`} />
+                ) : (
+                  // Fallback message
+                  <div className="flex items-center justify-center h-40 text-gray-500">
+                    <p>Please provide SVG content or URL</p>
                   </div>
-                </div>
+                )}
               </div>
             </div>
           </div>