Flowchart update
This commit is contained in:
mukesh13
@ -0,0 +1,137 @@
|
||||
import React from 'react';
|
||||
import { ArrowDown, ArrowRight, ArrowUp } from 'lucide-react';
|
||||
|
||||
const CircularRNAPipeline = ({
|
||||
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"
|
||||
],
|
||||
rightSteps = [
|
||||
"Downstream Advanced Analysis",
|
||||
"Circular RNA Identification",
|
||||
"Circular RNA Prediction",
|
||||
"Back Splicing Junction Reads"
|
||||
],
|
||||
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()];
|
||||
|
||||
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}`}>
|
||||
{title}
|
||||
</h2>
|
||||
|
||||
{/* Pipeline Flowchart */}
|
||||
<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>
|
||||
|
||||
{/* 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">
|
||||
{leftSteps.map((step, index) => (
|
||||
<React.Fragment key={index}>
|
||||
<div className={`${cardColor} rounded-lg p-3 sm:p-4 w-full max-w-80 text-center border ${cardClassName}`}>
|
||||
<h3 className={`text-xs sm:text-sm font-medium ${textColor}`}>{step}</h3>
|
||||
</div>
|
||||
{index < leftSteps.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">
|
||||
{rightSteps.map((step, index) => (
|
||||
<React.Fragment key={index}>
|
||||
<div className={`${cardColor} rounded-lg p-3 sm:p-4 w-full max-w-80 text-center border ${cardClassName}`}>
|
||||
<h3 className={`text-xs sm:text-sm font-medium ${textColor}`}>{step}</h3>
|
||||
</div>
|
||||
{index < rightSteps.length - 1 && (
|
||||
<ArrowUp className={`w-5 h-5 sm:w-6 sm:h-6 ${arrowColor}`} />
|
||||
)}
|
||||
</React.Fragment>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Custom arrows from "Alignment to Reference Genome" */}
|
||||
<div className="absolute bottom-12 sm:bottom-16 lg:bottom-{2rem} left-1/2 transform -translate-x-1/2">
|
||||
<div className="relative w-0 h-0">
|
||||
|
||||
{/* Arrow 1: Straight horizontal to "Back Splicing Junction Reads" (Unmapped Reads) */}
|
||||
<div className="absolute top-0 left-0">
|
||||
<div className="relative">
|
||||
{/* Horizontal line */}
|
||||
<div className="w-16 sm:w-20 lg:w-28 h-0.5 bg-gray-600"></div>
|
||||
{/* Arrowhead */}
|
||||
<div className="absolute right-0 -top-1 w-2 h-2 border-r-2 border-t-2 border-gray-600 rotate-45"></div>
|
||||
{/* Label */}
|
||||
<div className="absolute top-2 left-4 sm:left-6 lg:left-10 text-xs text-gray-700 font-medium whitespace-nowrap">
|
||||
Unmapped Reads
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Arrow 2: Diagonal upward to "Circular RNA Prediction" (Mapped Reads) */}
|
||||
<div className="absolute top-0 left-0">
|
||||
<div className="relative">
|
||||
{/* Diagonal line going up and right */}
|
||||
<div className="absolute origin-left w-20 sm:w-24 lg:w-32 h-0.5 bg-gray-600 transform -rotate-45"></div>
|
||||
{/* Arrowhead positioned at the end of diagonal line */}
|
||||
<div className="absolute w-2 h-2 border-r-2 border-t-2 border-gray-600 transform rotate-0"
|
||||
style={{
|
||||
left: 'calc(20 * 0.25rem * 0.707 - 4px)', // cos(45deg) ≈ 0.707
|
||||
top: 'calc(-20 * 0.25rem * 0.707 - 4px)' // -sin(45deg) ≈ -0.707
|
||||
}}></div>
|
||||
{/* Label */}
|
||||
<div className="absolute -top-8 left-6 sm:left-8 lg:left-12 text-xs text-gray-700 font-medium whitespace-nowrap">
|
||||
Mapped Reads
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default CircularRNAPipeline;
|
||||
@ -1,6 +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 CircularAdvantages from './components/CircularAdvantages';
|
||||
import CircularApplications from './components/CircularApplications';
|
||||
import CircularSpecifications from './components/CircularSpecifications';
|
||||
@ -20,6 +21,7 @@ export default function CircularRNASequencingPage() {
|
||||
/>
|
||||
<CircularIntroduction />
|
||||
<CircularAdvantages />
|
||||
{/* <CircularRNAPipeline/> */}
|
||||
<CircularApplications />
|
||||
<CircularSpecifications />
|
||||
</PageLayout>
|
||||
|
||||
@ -0,0 +1,130 @@
|
||||
import React from 'react';
|
||||
import { ArrowDown, ArrowRight, ArrowUp } from 'lucide-react';
|
||||
|
||||
const DegradomeSequencingPipeline = ({
|
||||
title = "Degradome Sequencing",
|
||||
backgroundColor = "bg-gray-50",
|
||||
cardColor = "bg-blue-200",
|
||||
textColor = "text-gray-800",
|
||||
arrowColor = "text-gray-600",
|
||||
className = "",
|
||||
cardClassName = "",
|
||||
titleClassName = ""
|
||||
}) => {
|
||||
const leftSteps = [
|
||||
"Raw Sequencing Data (fastq files)",
|
||||
"Quality Control and Preprocessing of Data",
|
||||
"High Quality Sequencing Data (fastq file)",
|
||||
"Alignment to Reference Genome"
|
||||
];
|
||||
|
||||
const rightSteps = [
|
||||
"Related miRNA Identification",
|
||||
"mRNAs Degradome Sites",
|
||||
"Identify Target mRNAs",
|
||||
"Retain mRNA data Remove rRNA, tRNA and other RNA"
|
||||
];
|
||||
|
||||
const middleSteps = [
|
||||
"Functional Analysis"
|
||||
];
|
||||
|
||||
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}`}>
|
||||
{title}
|
||||
</h2>
|
||||
|
||||
{/* Pipeline Flowchart */}
|
||||
<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">
|
||||
<div className="relative">
|
||||
{/* Mobile Layout - Single Column */}
|
||||
<div className="block lg:hidden">
|
||||
<div className="flex flex-col items-center space-y-3">
|
||||
{[...leftSteps, ...rightSteps.slice().reverse(), ...middleSteps].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 < leftSteps.length + rightSteps.length + middleSteps.length - 1 && (
|
||||
<ArrowDown className={`w-5 h-5 ${arrowColor}`} />
|
||||
)}
|
||||
</React.Fragment>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Desktop Layout - Complex Flow */}
|
||||
<div className="hidden lg:block">
|
||||
<div className="grid grid-cols-3 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 max-w-80 text-center border ${cardClassName}`}>
|
||||
<h3 className={`text-sm font-medium ${textColor}`}>{step}</h3>
|
||||
</div>
|
||||
{index < leftSteps.length - 1 && (
|
||||
<ArrowDown className={`w-6 h-6 ${arrowColor}`} />
|
||||
)}
|
||||
</React.Fragment>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Middle Column */}
|
||||
<div className="flex flex-col items-center justify-center space-y-3">
|
||||
{middleSteps.map((step, index) => (
|
||||
<div key={index} className={`${cardColor} rounded-lg p-4 w-full max-w-60 text-center border ${cardClassName}`}>
|
||||
<h3 className={`text-sm font-medium ${textColor}`}>{step}</h3>
|
||||
</div>
|
||||
))}
|
||||
</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 max-w-80 text-center border ${cardClassName}`}>
|
||||
<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 left to right (after alignment) */}
|
||||
<div className="absolute bottom-4 left-1/3 transform -translate-x-1/2 flex items-center justify-center">
|
||||
<ArrowRight className={`w-8 h-8 ${arrowColor}`} />
|
||||
</div>
|
||||
|
||||
{/* Bidirectional arrows between middle and right columns */}
|
||||
<div className="absolute top-1/2 right-1/3 transform translate-x-1/2 -translate-y-1/2 flex flex-col items-center space-y-2">
|
||||
<ArrowUp className={`w-6 h-6 ${arrowColor}`} />
|
||||
<ArrowDown className={`w-6 h-6 ${arrowColor}`} />
|
||||
</div>
|
||||
|
||||
{/* Additional arrows for the circular flow in right column */}
|
||||
<div className="absolute top-1/4 right-6 flex items-center justify-center">
|
||||
<ArrowUp className={`w-5 h-5 ${arrowColor}`} />
|
||||
</div>
|
||||
|
||||
<div className="absolute top-2/3 right-6 flex items-center justify-center">
|
||||
<ArrowUp className={`w-5 h-5 ${arrowColor}`} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default DegradomeSequencingPipeline;
|
||||
@ -1,6 +1,7 @@
|
||||
import TitleBar from '../../components/shared/TitleBar';
|
||||
import DegradomeIntroduction from './components/DegradomeIntroduction';
|
||||
import DegradomeAdvantages from './components/DegradomeAdvantages';
|
||||
import DegradomeSequencingPipeline from './components/DegradomeSequencingPipeline';
|
||||
import DegradomeApplications from './components/DegradomeApplications';
|
||||
import DegradomeSpecifications from './components/DegradomeSpecifications';
|
||||
import PageLayout from '../../components/Layout/PageLayout';
|
||||
@ -20,6 +21,7 @@ export default function DegradomeSequencingPage() {
|
||||
/>
|
||||
<DegradomeIntroduction />
|
||||
<DegradomeAdvantages />
|
||||
<DegradomeSequencingPipeline/>
|
||||
<DegradomeApplications />
|
||||
<DegradomeSpecifications />
|
||||
</PageLayout>
|
||||
|
||||
134
app/rna-sequencing/iso-sequencing/components/IsoformPipeline.jsx
Normal file
134
app/rna-sequencing/iso-sequencing/components/IsoformPipeline.jsx
Normal file
@ -0,0 +1,134 @@
|
||||
import React from 'react';
|
||||
import { ArrowDown, ArrowRight, ArrowUp } from 'lucide-react';
|
||||
|
||||
const IsoformPipeline = ({
|
||||
title = "Bioinformatics Pipeline",
|
||||
leftSteps = [
|
||||
"Raw Sequencing Data (fastq files)",
|
||||
"Quality Control and Preprocessing of Data",
|
||||
"High Quality Sequencing Data (fastq file)",
|
||||
"Build Similarity Graph and Polishing"
|
||||
],
|
||||
rightSteps = [
|
||||
"Downstream Analysis (Fusion Analysis, Splicing Analysis)",
|
||||
"Transcript Annotation and Classification",
|
||||
"Sequencing Merge and Redundancy Removal",
|
||||
"Alignment to Reference 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()];
|
||||
|
||||
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}`}>
|
||||
{title}
|
||||
</h2>
|
||||
|
||||
{/* Pipeline Flowchart */}
|
||||
<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>
|
||||
</div>
|
||||
|
||||
{/* Diagonal Arrow from High Quality Sequencing Data to Alignment to Reference Genome */}
|
||||
<div className="absolute top-80 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
|
||||
<svg
|
||||
width="180"
|
||||
height="60"
|
||||
viewBox="0 0 180 60"
|
||||
className={arrowColor}
|
||||
style={{transform: 'rotate(20deg)'}}
|
||||
>
|
||||
<defs>
|
||||
<marker
|
||||
id="arrowhead"
|
||||
markerWidth="10"
|
||||
markerHeight="7"
|
||||
refX="9"
|
||||
refY="3.5"
|
||||
orient="auto"
|
||||
>
|
||||
<polygon
|
||||
points="0 0, 10 3.5, 0 7"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</marker>
|
||||
</defs>
|
||||
<line
|
||||
x1="10"
|
||||
y1="10"
|
||||
x2="170"
|
||||
y2="50"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
markerEnd="url(#arrowhead)"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default IsoformPipeline;
|
||||
@ -1,6 +1,7 @@
|
||||
import TitleBar from '../../components/shared/TitleBar';
|
||||
import IsoIntroduction from './components/IsoIntroduction';
|
||||
import IsoAdvantages from './components/IsoAdvantages';
|
||||
import IsoformPipeline from './components/IsoformPipeline';
|
||||
import IsoApplications from './components/IsoApplications';
|
||||
import IsoSpecifications from './components/IsoSpecifications';
|
||||
import PageLayout from '../../components/Layout/PageLayout';
|
||||
@ -20,6 +21,7 @@ export default function IsoSequencingPage() {
|
||||
/>
|
||||
<IsoIntroduction />
|
||||
<IsoAdvantages />
|
||||
<IsoformPipeline/>
|
||||
<IsoApplications />
|
||||
<IsoSpecifications />
|
||||
</PageLayout>
|
||||
|
||||
@ -0,0 +1,195 @@
|
||||
import React from 'react';
|
||||
import { ArrowDown, ArrowRight, ArrowUp } from 'lucide-react';
|
||||
|
||||
const MetatranscriptomicsPipeline = ({
|
||||
title = "Metatranscriptomics",
|
||||
backgroundColor = "bg-gray-50",
|
||||
cardColor = "bg-blue-200",
|
||||
textColor = "text-blue-800",
|
||||
arrowColor = "text-gray-600",
|
||||
className = "",
|
||||
cardClassName = "",
|
||||
titleClassName = ""
|
||||
}) => {
|
||||
const topSteps = [
|
||||
"Raw Sequencing Data (fastq files)",
|
||||
"Quality Control",
|
||||
"High Quality Sequencing Data (fastq file)",
|
||||
"Retain mRNA reads and remove rRNA Reads"
|
||||
];
|
||||
|
||||
const bottomLeftSteps = [
|
||||
"Reference Genome Alignment",
|
||||
"Gene Expression Analysis",
|
||||
"Differential Analysis"
|
||||
];
|
||||
|
||||
const bottomCenterSteps = [
|
||||
"Transcript Assembly",
|
||||
"Structural Identification",
|
||||
"SNPs, SSRs Analysis eQTLs Analysis"
|
||||
];
|
||||
|
||||
const bottomRightSteps = [
|
||||
"Functional Annotation",
|
||||
"Statistical Analysis"
|
||||
];
|
||||
|
||||
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}`}>
|
||||
{title}
|
||||
</h2>
|
||||
|
||||
{/* Pipeline Flowchart */}
|
||||
<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">
|
||||
<div className="relative">
|
||||
{/* Mobile Layout - Single Column */}
|
||||
<div className="block lg:hidden">
|
||||
<div className="flex flex-col items-center space-y-3">
|
||||
{topSteps.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 < topSteps.length - 1 && (
|
||||
<ArrowDown className={`w-5 h-5 ${arrowColor}`} />
|
||||
)}
|
||||
</React.Fragment>
|
||||
))}
|
||||
|
||||
{/* Bottom sections for mobile */}
|
||||
<div className="grid grid-cols-1 gap-4 w-full mt-6">
|
||||
{bottomLeftSteps.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 < bottomLeftSteps.length - 1 && (
|
||||
<ArrowDown className={`w-5 h-5 ${arrowColor} mx-auto`} />
|
||||
)}
|
||||
</React.Fragment>
|
||||
))}
|
||||
|
||||
{bottomCenterSteps.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 < bottomCenterSteps.length - 1 && (
|
||||
<ArrowDown className={`w-5 h-5 ${arrowColor} mx-auto`} />
|
||||
)}
|
||||
</React.Fragment>
|
||||
))}
|
||||
|
||||
{bottomRightSteps.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 < bottomRightSteps.length - 1 && (
|
||||
<ArrowDown className={`w-5 h-5 ${arrowColor} mx-auto`} />
|
||||
)}
|
||||
</React.Fragment>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Desktop Layout */}
|
||||
<div className="hidden lg:block">
|
||||
{/* Top vertical sequence */}
|
||||
<div className="flex flex-col items-center space-y-4 mb-8">
|
||||
{topSteps.map((step, index) => (
|
||||
<React.Fragment key={index}>
|
||||
<div className={`${cardColor} rounded-lg p-4 w-96 text-center border ${cardClassName}`}>
|
||||
<h3 className={`text-sm font-medium ${textColor}`}>{step}</h3>
|
||||
</div>
|
||||
{index < topSteps.length - 1 && (
|
||||
<ArrowDown className={`w-6 h-6 ${arrowColor}`} />
|
||||
)}
|
||||
</React.Fragment>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Branching arrows from "Retain mRNA reads and remove rRNA Reads" */}
|
||||
<div className="flex justify-center mb-8">
|
||||
<div className="relative">
|
||||
{/* Left branch arrow */}
|
||||
<div className="absolute -left-32 top-0">
|
||||
<ArrowDown className={`w-6 h-6 ${arrowColor}`} />
|
||||
</div>
|
||||
|
||||
{/* Right branch arrow */}
|
||||
<div className="absolute left-32 top-0">
|
||||
<ArrowDown className={`w-6 h-6 ${arrowColor}`} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Bottom three columns */}
|
||||
<div className="grid grid-cols-3 gap-8">
|
||||
{/* Left Column */}
|
||||
<div className="flex flex-col items-center space-y-4">
|
||||
{bottomLeftSteps.map((step, index) => (
|
||||
<React.Fragment key={index}>
|
||||
<div className={`${cardColor} rounded-lg p-4 w-full text-center border ${cardClassName}`}>
|
||||
<h3 className={`text-sm font-medium ${textColor}`}>{step}</h3>
|
||||
</div>
|
||||
{index < bottomLeftSteps.length - 1 && (
|
||||
<ArrowDown className={`w-6 h-6 ${arrowColor}`} />
|
||||
)}
|
||||
</React.Fragment>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Center Column */}
|
||||
<div className="flex flex-col items-center space-y-4">
|
||||
{bottomCenterSteps.map((step, index) => (
|
||||
<React.Fragment key={index}>
|
||||
<div className={`${cardColor} rounded-lg p-4 w-full text-center border ${cardClassName}`}>
|
||||
<h3 className={`text-sm font-medium ${textColor}`}>{step}</h3>
|
||||
</div>
|
||||
{index < bottomCenterSteps.length - 1 && (
|
||||
<ArrowDown className={`w-6 h-6 ${arrowColor}`} />
|
||||
)}
|
||||
</React.Fragment>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Right Column */}
|
||||
<div className="flex flex-col items-center space-y-4">
|
||||
{bottomRightSteps.map((step, index) => (
|
||||
<React.Fragment key={index}>
|
||||
<div className={`${cardColor} rounded-lg p-4 w-full text-center border ${cardClassName}`}>
|
||||
<h3 className={`text-sm font-medium ${textColor}`}>{step}</h3>
|
||||
</div>
|
||||
{index < bottomRightSteps.length - 1 && (
|
||||
<ArrowDown className={`w-6 h-6 ${arrowColor}`} />
|
||||
)}
|
||||
</React.Fragment>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Horizontal arrows connecting bottom sections */}
|
||||
<div className="absolute bottom-4 left-1/3 transform -translate-x-1/2">
|
||||
<ArrowRight className={`w-6 h-6 ${arrowColor}`} />
|
||||
</div>
|
||||
<div className="absolute bottom-4 right-1/3 transform translate-x-1/2">
|
||||
<ArrowRight className={`w-6 h-6 ${arrowColor}`} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default MetatranscriptomicsPipeline;
|
||||
@ -2,6 +2,7 @@ import TitleBar from '../../components/shared/TitleBar';
|
||||
import MetatranscriptomicsIntroduction from './components/MetatranscriptomicsIntroduction';
|
||||
import MetatranscriptomicsAdvantages from './components/MetatranscriptomicsAdvantages';
|
||||
import MetatranscriptomicsApplications from './components/MetatranscriptomicsApplications';
|
||||
import MetatranscriptomicsPipeline from './components/MetatranscriptomicsPipeline';
|
||||
import MetatranscriptomicsSpecifications from './components/MetatranscriptomicsSpecifications';
|
||||
import PageLayout from '../../components/Layout/PageLayout';
|
||||
|
||||
@ -20,6 +21,7 @@ export default function MetatranscriptomicsSequencingPage() {
|
||||
/>
|
||||
<MetatranscriptomicsIntroduction />
|
||||
<MetatranscriptomicsAdvantages />
|
||||
<MetatranscriptomicsPipeline/>
|
||||
<MetatranscriptomicsApplications />
|
||||
<MetatranscriptomicsSpecifications />
|
||||
</PageLayout>
|
||||
|
||||
105
app/rna-sequencing/mrna-sequencing/components/MRNAPipeline.jsx
Normal file
105
app/rna-sequencing/mrna-sequencing/components/MRNAPipeline.jsx
Normal file
@ -0,0 +1,105 @@
|
||||
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"
|
||||
],
|
||||
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()];
|
||||
|
||||
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}`}>
|
||||
{title}
|
||||
</h2>
|
||||
|
||||
{/* Pipeline Flowchart */}
|
||||
<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>
|
||||
</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>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default MRNAPipeline;
|
||||
@ -5,6 +5,7 @@ import MRNAAdvantages from './components/MRNAAdvantages';
|
||||
import MRNAApplications from './components/MRNAApplications';
|
||||
import MRNASpecifications from './components/MRNASpecifications';
|
||||
import PageLayout from '../../components/Layout/PageLayout';
|
||||
import MRNAPipeline from './components/MRNAPipeline';
|
||||
|
||||
export default function MRNASequencingPage() {
|
||||
const breadcrumbs = [
|
||||
@ -21,6 +22,7 @@ export default function MRNASequencingPage() {
|
||||
/>
|
||||
<MRNAIntroduction />
|
||||
<MRNAAdvantages />
|
||||
<MRNAPipeline/>
|
||||
<MRNAApplications />
|
||||
<MRNASpecifications />
|
||||
</PageLayout>
|
||||
|
||||
@ -0,0 +1,105 @@
|
||||
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"
|
||||
],
|
||||
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()];
|
||||
|
||||
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}`}>
|
||||
{title}
|
||||
</h2>
|
||||
|
||||
{/* Pipeline Flowchart */}
|
||||
<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>
|
||||
</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}`} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default SingleCellPipeline;
|
||||
@ -2,6 +2,7 @@ import TitleBar from '../../components/shared/TitleBar';
|
||||
import SingleCellIntroduction from './components/SingleCellIntroduction';
|
||||
import SingleCellAdvantages from './components/SingleCellAdvantages';
|
||||
import SingleCellApplications from './components/SingleCellApplications';
|
||||
import SingleCellPipeline from './components/SingleCellPipeline';
|
||||
import SingleCellSpecifications from './components/SingleCellSpecifications';
|
||||
import PageLayout from '../../components/Layout/PageLayout';
|
||||
|
||||
@ -20,6 +21,7 @@ export default function SingleCellRNASequencingPage() {
|
||||
/>
|
||||
<SingleCellIntroduction />
|
||||
<SingleCellAdvantages />
|
||||
<SingleCellPipeline/>
|
||||
<SingleCellApplications />
|
||||
<SingleCellSpecifications />
|
||||
</PageLayout>
|
||||
|
||||
@ -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>
|
||||
|
||||
Reference in New Issue
Block a user