56 lines
1.9 KiB
JavaScript
56 lines
1.9 KiB
JavaScript
import React from 'react';
|
|
|
|
const MetatranscriptomicsPipeline = ({
|
|
title = "Bioinformatics Pipeline",
|
|
svgContent = null, // Pass your SVG content here as JSX
|
|
svgUrl = "/images/flowchart/metatranscriptomicsrna.svg",
|
|
backgroundColor = "bg-gray-50",
|
|
textColor = "text-gray-700",
|
|
className = "",
|
|
titleClassName = "",
|
|
svgClassName = "",
|
|
containerClassName = ""
|
|
}) => {
|
|
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 ${containerClassName}`}>
|
|
<h2 className={`${textColor} text-left pb-4 sm:pb-6 text-xl sm:text-2xl lg:text-3xl font-normal ${titleClassName}`}>
|
|
{title}
|
|
</h2>
|
|
|
|
{/* 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-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>
|
|
) : (
|
|
// 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>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default MetatranscriptomicsPipeline; |