Health page creation
This commit is contained in:
mukesh13
@ -1,7 +1,7 @@
|
||||
import TitleBar from '../../components/shared/TitleBar';
|
||||
import PageLayout from '../../components/Layout/PageLayout'
|
||||
import CircularIntroduction from './components/CircularIntroduction';
|
||||
// import CircularRNAPipeline from './components/CircularRNAPipeline';
|
||||
import CircularRNAPipeline from './components/CircularRNAPipeline';
|
||||
import CircularAdvantages from './components/CircularAdvantages';
|
||||
import CircularApplications from './components/CircularApplications';
|
||||
import CircularSpecifications from './components/CircularSpecifications';
|
||||
@ -21,7 +21,7 @@ export default function CircularRNASequencingPage() {
|
||||
/>
|
||||
<CircularIntroduction />
|
||||
<CircularAdvantages />
|
||||
{/* <CircularRNAPipeline/> */}
|
||||
<CircularRNAPipeline/>
|
||||
<CircularApplications />
|
||||
<CircularSpecifications />
|
||||
</PageLayout>
|
||||
|
||||
@ -1,98 +1,49 @@
|
||||
import React from 'react';
|
||||
import { ArrowDown, ArrowRight, ArrowUp } from 'lucide-react';
|
||||
|
||||
const MRNAPipeline = ({
|
||||
title = "Bioinformatics Pipeline",
|
||||
leftSteps = [
|
||||
"Raw Sequencing Data (fastq files)",
|
||||
"Quality Control and Preprocessing of Data",
|
||||
"High Quality Sequencing Data (fastq file)",
|
||||
"Alignment to Reference Genome",
|
||||
"Transcript Assembly"
|
||||
],
|
||||
rightSteps = [
|
||||
"Downstream Analysis",
|
||||
"Differential Expression Profiling",
|
||||
"Annotation",
|
||||
"Transcript Expression Profiling",
|
||||
"Transcript Assembly Validation"
|
||||
],
|
||||
svgContent = null, // Pass your SVG content here as JSX
|
||||
svgUrl = "/images/flowchart/mrna.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>
|
||||
|
||||
@ -1,98 +1,49 @@
|
||||
import React from 'react';
|
||||
import { ArrowDown, ArrowRight, ArrowUp } from 'lucide-react';
|
||||
|
||||
const SingleCellPipeline = ({
|
||||
title = "Bioinformatics Pipeline",
|
||||
leftSteps = [
|
||||
"Raw Sequencing Data (fastq files)",
|
||||
"Quality Control and Preprocessing of Data",
|
||||
"High Quality Sequencing Data (fastq file)",
|
||||
"Alignment to Reference Genome",
|
||||
"Transcript and Gene Expression Profiling"
|
||||
],
|
||||
rightSteps = [
|
||||
"Downstream Advanced Analysis",
|
||||
"GO/KEGG Enrichment",
|
||||
"Differential Expression Profiling",
|
||||
"Cell Clustering Cell definition (SingleR)",
|
||||
"Cell filter and Data Normalisation"
|
||||
],
|
||||
svgContent = null, // Pass your SVG content here as JSX
|
||||
svgUrl = "/images/flowchart/singlecellrna.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-28 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>
|
||||
|
||||
Reference in New Issue
Block a user