57 lines
2.4 KiB
JavaScript
57 lines
2.4 KiB
JavaScript
const SNPGenotypingTechniques = ({
|
|
title = "Types of SNP-Based Genotyping using technique:",
|
|
backgroundColor = "bg-teal-50"
|
|
}) => {
|
|
const techniques = [
|
|
{
|
|
name: "PCR:",
|
|
description: "Utilizes PCR to amplify DNA regions containing SNPs, relying on allele-specific primers, probes, or melting curve differences for SNP detection.",
|
|
examples: "TaqMan Assay, KASP, ARMS-PCR, qPCR, High-Resolution Melting (HRM)."
|
|
},
|
|
{
|
|
name: "Microarray:",
|
|
description: "Employs DNA microarrays to detect and analyze SNPs across the genome using hybridization with oligonucleotide probes specific to SNP loci.",
|
|
examples: "Affymetrix GeneChips, Illumina Infinium Arrays, SNPlex, Axiom Array Platforms, MALDI-TOF Mass Spectrometry Arrays."
|
|
},
|
|
{
|
|
name: "NGS:",
|
|
description: "Uses Next-Generation Sequencing (NGS) for high-resolution, high-throughput SNP detection and analysis.",
|
|
examples: "Whole-Genome Sequencing (WGS), Exome Sequencing, Targeted Sequencing, Genotyping-by-Sequencing (GBS), Double Digest Restriction-site Associated DNA (ddRAD) Sequencing."
|
|
}
|
|
];
|
|
|
|
return (
|
|
<section className={`py-5 lg:py-5 mb-6 ${backgroundColor}`}>
|
|
<div className="container-fluid px-4 lg:px-6">
|
|
<h2 className="text-3xl font-bold text-teal-700 mb-4">
|
|
{title}
|
|
</h2>
|
|
|
|
<ol className="space-y-4 lg:px-6" style={{color: '#555555'}}>
|
|
{techniques.map((technique, index) => (
|
|
<li key={index} className="leading-relaxed">
|
|
<div className="flex items-start">
|
|
<span
|
|
className="inline-flex items-center justify-center w-6 h-6 rounded-full text-white font-bold text-sm mr-3 flex-shrink-0 mt-0.5"
|
|
style={{backgroundColor: '#faae31'}}
|
|
>
|
|
{index + 1}
|
|
</span>
|
|
<div className="flex-1">
|
|
<span className="font-semibold text-base">{technique.name}</span>
|
|
<br />
|
|
<span className="text-base">{technique.description}</span>
|
|
<br />
|
|
<span className="font-semibold" style={{color: '#faae31'}}>Examples: </span>
|
|
<span className="text-base italic">{technique.examples}</span>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
))}
|
|
</ol>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default SNPGenotypingTechniques; |