93 lines
4.1 KiB
JavaScript
93 lines
4.1 KiB
JavaScript
import React from 'react';
|
|
import { ArrowDown, ArrowRight, ArrowUp } from 'lucide-react';
|
|
|
|
const BioinformaticsLayout = ({
|
|
title = "Bioinformatics Pipeline",
|
|
pipelineSteps = [],
|
|
sectionBackground = "bg-gray-50",
|
|
cardBackground = "bg-white",
|
|
titleColor = "text-gray-600",
|
|
stepBackground = "bg-[#e8f5f3]",
|
|
stepTextColor = "text-teal-600",
|
|
arrowColor = "text-gray-600"
|
|
}) => {
|
|
// For two-column layout, split steps appropriately
|
|
const leftColumnSteps = pipelineSteps.slice(0, 4);
|
|
const rightColumnSteps = pipelineSteps.slice(4).reverse();
|
|
|
|
return (
|
|
<section className={`py-6 sm:py-8 lg:py-8 ${sectionBackground}`}>
|
|
<div className="container mx-auto max-w-none px-3 sm:px-4 lg:px-6">
|
|
<h2 className={"text-3xl font-bold text-teal-700 mb-4"}>
|
|
{title}
|
|
</h2>
|
|
|
|
{/* Pipeline Flowchart */}
|
|
<div className={`${cardBackground} 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">
|
|
{pipelineSteps.map((step, index) => (
|
|
<React.Fragment key={index}>
|
|
<div className={`${stepBackground} rounded-lg p-3 w-full text-center`}>
|
|
<h3 className={`text-xs font-medium ${stepTextColor}`}>{step}</h3>
|
|
</div>
|
|
{index < pipelineSteps.length - 1 && (
|
|
<ArrowDown className={`w-5 h-5 ${arrowColor}`} />
|
|
)}
|
|
</React.Fragment>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Tablet and 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-2 sm:space-y-3">
|
|
{leftColumnSteps.map((step, index) => (
|
|
<React.Fragment key={index}>
|
|
<div className={`${stepBackground} rounded-lg p-3 sm:p-4 w-full max-w-80 text-center`}>
|
|
<h3 className={`text-xs sm:text-sm font-medium ${stepTextColor}`}>{step}</h3>
|
|
</div>
|
|
{index < leftColumnSteps.length - 1 && (
|
|
<ArrowDown className={`w-5 h-5 sm:w-6 sm:h-6 ${arrowColor}`} />
|
|
)}
|
|
</React.Fragment>
|
|
))}
|
|
</div>
|
|
|
|
{/* Right Column */}
|
|
<div className="flex flex-col items-center space-y-2 sm:space-y-3">
|
|
{rightColumnSteps.map((step, index) => (
|
|
<React.Fragment key={index}>
|
|
<div className={`${stepBackground} rounded-lg p-3 sm:p-4 w-full max-w-80 text-center`}>
|
|
<h3 className={`text-xs sm:text-sm font-medium ${stepTextColor}`}>{step}</h3>
|
|
</div>
|
|
{index < rightColumnSteps.length - 1 && (
|
|
<ArrowUp className={`w-5 h-5 sm:w-6 sm:h-6 ${arrowColor}`} />
|
|
)}
|
|
</React.Fragment>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Horizontal Arrow positioned between Primary and Secondary Assembly */}
|
|
<div className="absolute bottom-2 sm:bottom-4 lg:bottom-[0.7rem] left-1/2 transform -translate-x-1/2 flex items-center justify-center">
|
|
<ArrowRight className={`w-6 h-6 sm:w-8 sm:h-8 ${arrowColor}`} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default BioinformaticsLayout;
|