mukeshs/operify
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI styling update

Browse Source
This commit is contained in:
mukesh13
2025-08-21 12:40:06 +05:30
parent 543e21d2e2
commit 24ec58a76b
78 changed files with 524 additions and 307 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
app/rna-sequencing/circular-rna-sequencing/components/CircularIntroduction.jsx
View File

@ -8,11 +8,19 @@ const CircularIntroduction = () => {
"The workflow starts with isolating total RNA from the sample, which includes both linear and circular RNAs. Linear RNAs are then removed through ribosomal RNA (rRNA) depletion or exonuclease treatment to enrich the circular RNA fraction. Next, the RNA is circularized, and sequencing adapters are added during library preparation. The final step involves sequencing the prepared libraries.",
"Bioinformatics analysis for circRNA sequencing involves preprocessing data and mapping reads to a reference genome to identify back-splicing junctions. Computational tools are then used to quantify circRNA expression, discover novel circRNAs, and perform downstream analysis."
];
const advantageItems = [
"Circular RNAs are inherently more stable due to their covalently closed structure, making them less susceptible to degradation and providing reliable expression data.",
"Enables the identification of novel isoforms and splice variants that may not be detected with traditional RNA sequencing methods.",
"Offers a detailed view of circular RNA expression and their interactions within the cell, aiding in a deeper understanding of gene regulation and cellular processes.",
"Closed-loop structure of circRNAs minimizes potential sequencing artifacts, leading to more accurate and consistent data."
];
return (
<IntroductionLayout
title="Introduction and Workflow"
contentItems={contentItems}
introTitle="Introduction and Workflow"
advantageTitle="Advantage"
introItems={contentItems}
advantageItems={advantageItems}
imageUrl="/images/rna/circular_rna_sequencing.png"
imageAlt="Circular RNA Sequencing Workflow"
useParagraphs={true}

15
app/rna-sequencing/circular-rna-sequencing/components/CircularRNAPipeline.jsx
View File

@ -5,16 +5,15 @@ const CircularRNAPipeline = ({
svgContent = null, // Pass your SVG content here as JSX
svgUrl = "/images/flowchart/circularrna.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}`}>
<section className={`py-6 sm:py-8 lg:py-4 ${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}`}>
<h2 className={"text-3xl font-bold text-teal-700 mb-4"}>
{title}
</h2>
@ -22,19 +21,19 @@ const CircularRNAPipeline = ({
<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}`}>
{/* SVG Container with responsive sizing and reduced height */}
<div className={`w-full max-h-100 overflow-hidden ${svgClassName}`}>
{svgUrl ? (
// If SVG URL/path is provided
<img
src={svgUrl}
alt="Flowchart diagram"
className="w-full h-auto object-contain"
className="w-full h-auto object-contain max-h-100"
/>
) : svgContent ? (
// If SVG content is provided as JSX
<div className="w-full">
<div className="w-full">
<div className="w-full max-h-100">
<div className="w-full max-h-100 overflow-hidden">
{svgContent}
</div>
</div>