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/dna-sequencing/enrichment-sequencing/components/EnrichmentIntroduction.jsx
View File

@ -9,6 +9,12 @@ const EnrichmentIntroduction = () => {
"In the bioinformatics analysis, these reads are aligned to a known reference genome to detect genomic alterations.",
"It is a powerful tool for diverse genomic studies, capable of sequencing humans, livestock, plants, bacteria, and disease-related microbes."
];
const advantageItems = [
"Provides a more affordable alternative to Whole Genome Sequencing (WGS), making it accessible to a wider range of researchers and clinicians.",
"Enhances detection of single-nucleotide variants (SNVs), copy number variants (CNVs), and insertions/deletions (InDels) with sensitivity and accuracy comparable to WGS, particularly in exonic regions.",
"Produces smaller data sets compared to WGS, allowing for quicker and more straightforward data analysis, which accelerates research and diagnostics.",
"Focuses on exonic regions, which are more likely to harbor disease-causing variants, leading to a more efficient and targeted approach in identifying genetic variants."
];
const customBadgeContent = (
<div className="text-center">
@ -31,8 +37,10 @@ const EnrichmentIntroduction = () => {
return (
<IntroductionLayout
title="Introduction and Workflow"
contentItems={contentItems}
introTitle="Introduction and Workflow"
advantageTitle="Advantage"
introItems={contentItems}
advantageItems={advantageItems}
imageUrl="/images/dna/enrichment-overview.png"
imageAlt="Enrichment Overview"
backgroundColor="#f8f9fa"

15
app/dna-sequencing/enrichment-sequencing/components/EnrichmentPipeline.jsx
View File

@ -5,16 +5,15 @@ const EnrichmentPipeline = ({
svgContent = null, // Pass your SVG content here as JSX
svgUrl = "/images/flowchart/resequencing.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 EnrichmentPipeline = ({
<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>