operify/app/rna-sequencing/components/RNATable.jsx

'use client';
import React from 'react';

const RNATable = () => {
  const sequencingData = [
    {
      approach: { name: 'Whole Transcriptome (Total RNA) Sequencing', link: '/rna-sequencing/whole-transcriptome-sequencing' },
      description: (
        <>
          Sequencing of all RNA molecules in a sample, including mRNA and non-coding RNA.
          Captures and quantifies all RNA transcripts, both coding and long non-coding RNAs.
        </>
      ),
      platform: 'Illumina NovaSeq 6000/ NovaSeq X Plus',
      applications: 'Gene expression profiling, discovery of novel RNAs, transcriptome analysis'
    },
    {
      approach: { name: 'mRNA Sequencing (mRNA-Seq)', link: '/rna-sequencing/mrna-sequencing' },
      description: (
        <>
          Focuses on sequencing messenger RNA to study gene expression and alternative splicing.
          Targets polyadenylated (poly-A) transcripts for precise gene expression analysis.
        </>
      ),
      platform: 'Illumina NovaSeq 6000/ NovaSeq X',
      applications: 'Quantifying gene expression, alternative splicing, transcript discovery'
    },
    {
      approach: { name: 'Small RNA Sequencing (sRNA-Seq)', link: '/rna-sequencing/small-rna-sequencing' },
      description: (
        <>
          Detects and sequences small RNA species, such as microRNA (miRNA) and piRNA, in a sample.
          Analyzes small non-coding RNAs under 200 nucleotides in length.
        </>
      ),
      platform: 'Illumina MiSeq, Nextseq 550',
      applications: 'miRNA profiling, regulatory RNA studies, biomarker discovery'
    },
    {
      approach: { name: 'Long Non-Coding RNA (lncRNA) Sequencing', link: '/rna-sequencing/lncrna-sequencing' },
      description: (
        <>
          Focuses on sequencing long non-coding RNAs, which play crucial roles in gene regulation.
          Identifies RNA molecules longer than 200 nucleotides that do not code for proteins.
        </>
      ),
      platform: 'Illumina NovaSeq 6000/ NovaSeq X',
      applications: 'Gene regulation, disease mechanisms, novel lncRNA discovery'
    },
    {
      approach: { name: 'Metatranscriptomics', link: '/rna-sequencing/metatranscriptomics-sequencing' },
      description: (
        <>
          Sequencing of RNA from microbial communities to understand gene expression in environmental samples.
          Examines active gene expression in entire microbial ecosystems.
        </>
      ),
      platform: 'Illumina NovaSeq 6000/ NovaSeq X',
      applications: 'Microbial community analysis, environmental and ecological research'
    },
    {
      approach: { name: 'Degradome Sequencing', link: '/rna-sequencing/degradome-sequencing' },
      description: (
        <>
          Targets and sequences degraded RNA to study RNA degradation processes and associated regulatory mechanisms.
          Also called Parallel Analysis of RNA Ends (PARE).
        </>
      ),
      platform: 'Illumina NovaSeq 6000/ NovaSeq X',
      applications: 'RNA stability, degradation pathway analysis, regulation of RNA turnover'
    },
    {
      approach: { name: 'Isoform Sequencing (Iso-Seq)', link: '/rna-sequencing/iso-sequencing' },
      description: (
        <>
          Uses long-read sequencing to capture full-length RNA isoforms, providing insights into alternative splicing.
          Leverages PacBio's SMRT sequencing technology for detailed transcript analysis.
        </>
      ),
      platform: 'PacBio SMRT, Oxford Nanopore',
      applications: 'Full-length transcript analysis, isoform discovery, gene expression'
    },
    {
      approach: { name: 'Circular RNA Sequencing', link: '/rna-sequencing/circular-rna-sequencing' },
      description: (
        <>
          Focuses on the identification and sequencing of circular RNAs, which are implicated in gene regulation and disease.
          Analyzes non-coding circular RNAs formed through back-splicing events.
        </>
      ),
      platform: 'Illumina NovaSeq 6000/ NovaSeq X',
      applications: 'Circular RNA discovery, gene regulation, disease studies'
    },
    {
      approach: { name: 'Single-Cell RNA Sequencing (scRNA-Seq)', link: '/rna-sequencing/single-cell-rna-sequencing' },
      description: (
        <>
          Analyzes RNA from individual cells to investigate cellular heterogeneity and gene expression at the single-cell level.
          Explores transcriptomic diversity within complex tissues.
        </>
      ),
      platform: '10X Genomics Chromium System followed by Illumina Sequencer',
      applications: 'Single-cell gene expression, cellular diversity, rare cell analysis'
    }
  ];

  return (
    <section className="pt-6 bg-white">
      <div className="container max-w-none px-6">
        <h3 className="text-2xl font-semibold text-gray-700 mb-6">RNA Sequencing Approaches</h3>
        <div className="overflow-x-auto mb-8">
          <table className="w-full border-collapse border border-gray-300 text-sm bg-white shadow-sm">
            <thead>
              <tr className="bg-teal-50">
                <th className="border border-gray-300 px-4 py-3 text-left font-semibold text-teal-700">
                  Sequencing Approach
                </th>
                <th className="border border-gray-300 px-4 py-3 text-left font-semibold text-teal-700">
                  Description
                </th>
                <th className="border border-gray-300 px-4 py-3 text-left font-semibold text-teal-700">
                  Sequencing Platform
                </th>
                <th className="border border-gray-300 px-4 py-3 text-left font-semibold text-teal-700">
                  Applications
                </th>
              </tr>
            </thead>
            <tbody>
              {sequencingData.map((row, index) => (
                <tr key={index} className={`${index % 2 === 1 ? 'bg-gray-50' : 'bg-white'} hover:bg-teal-25 transition-colors`}>
                  <td className="border border-gray-300 px-4 py-3 align-top">
                    <a href={row.approach.link} className="text-gray-600 hover:underline font-medium text-base">
                      {row.approach.name}
                    </a>
                  </td>
                  <td className="border border-gray-300 px-4 py-3 align-top text-gray-600 leading-relaxed">
                    {row.description}
                  </td>
                  <td className="border border-gray-300 px-4 py-3 align-top text-gray-600 font-medium">
                    {row.platform}
                  </td>
                  <td className="border border-gray-300 px-4 py-3 align-top text-gray-600 leading-relaxed">
                    {row.applications}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </section>
  );
};

export default RNATable;