Files
operify/app/health/oncology/Components/HereditaryCancerPanel.jsx
2025-09-04 02:33:03 +05:30

61 lines
3.7 KiB
JavaScript

export default function HereditaryCancerPanel() {
const features = [
{ title: "Comprehensive Gene Coverage", desc: "Includes high- and moderate-risk genes such as BRCA1, BRCA2, TP53, MLH1, MSH2, APC, and others." },
{ title: "Germline Variant Detection", desc: "Accurately detects SNVs, Indels, and selected CNVs in genes associated with inherited cancer risk." },
{ title: "Family-Centered Testing", desc: "Supports cascade testing for at-risk relatives, enabling early detection and prevention." },
{ title: "Clinical Actionability", desc: "Provides insights that guide surveillance, preventive measures, and personalized treatment planning." },
{ title: "High Sensitivity & Specificity", desc: "Uses ≥100X sequencing depth with ≥90% Q30 base quality for reliable variant calling." },
{ title: "Expert Interpretation & Reporting", desc: "Variants classified using ACMG guidelines, backed by curated literature and clinical databases." },
{ title: "Genetic Counseling Support", desc: "Optional access to pre- and post-test counseling for patient education and informed decision-making." }
];
const points = [
"About 5-10% of all cancers are linked to inherited genetic mutations, often going undetected until late stages or after multiple family members are affected.",
"The Operify Hereditary Cancer Panel screens key high- and moderate-risk genes associated with hereditary cancer syndromes like HBOC, Lynch Syndrome (LS), Li Fraumeni Syndrome (LFS), Familial Adenomatous Polyposis (FAP), Cowden Syndrome (CS), Peutz-Jeghers Syndrome (PJS), Neurofibromatosis (NF) etc.",
"Early identification of germline mutations enables proactive clinical decisions, including risk-reducing strategies, targeted surveillance, and family cascade testing.",
"Studies show that genetic testing in hereditary cancer cases improves outcomes and informs care for both patients and at-risk relatives."
];
return (
<section className="mx-auto px-8 pt-8">
<h2 className="text-3xl font-bold text-teal-700 pb-2 mb-4">Operify Hereditary Cancer Panel</h2>
<div className="mb-8">
<ul className="space-y-4">
{points.map((point, idx) => (
<li key={idx} className="flex items-start">
<span
className="w-2 h-2 rounded-full mt-2 mr-3 flex-shrink-0"
style={{backgroundColor: '#faae31'}}
></span>
<p className="text-gray-600 leading-relaxed text-base text-justify">
<strong>{idx === 0 ? "About 5-10% of all cancers are linked to inherited genetic mutations" : ""}</strong>
{idx === 0 ? ", often going undetected until late stages or after multiple family members are affected." : point}
</p>
</li>
))}
</ul>
</div>
<h3 className="text-3xl font-semibold text-teal-700 pb-2 mb-4">Key Features</h3>
<div className="overflow-x-auto">
<table className="w-full border-collapse border border-gray-300 rounded-lg">
<thead>
<tr className="bg-teal-50">
<th className="border border-gray-300 px-3 py-2 text-left font-semibold text-teal-700">Feature</th>
<th className="border border-gray-300 px-3 py-2 text-left font-semibold text-teal-700">Description</th>
</tr>
</thead>
<tbody>
{features.map((feature, idx) => (
<tr key={idx} className="hover:bg-teal-50">
<td className="border border-gray-300 px-6 py-3 text-gray-700 font-medium">{feature.title}</td>
<td className="border border-gray-300 px-6 py-3 text-gray-600">{feature.desc}</td>
</tr>
))}
</tbody>
</table>
</div>
</section>
);
}