parts.tsx

import { LoremMedium } from "../components/Loremipsum";
import { Section, Subesction } from "../components/sections";
import { PartTable } from "../components/Table";
import { useTabNavigation } from "../utils/TabNavigation";
import { BasicParts, CompositeParts  } from "../data/parts";

export function Parts() {
  useTabNavigation();
  let headcols = ["Part Name", "Registry Code", "Part Description", "length [bp]", "type"]
    return (
      <div className="col">
        <Section title="Introduction" id="Introduction">
          <Subesction title="Description" id="Introduction1">
            <LoremMedium/>
          </Subesction>
          <Subesction title="Characterization" id="Introduction2">
            <LoremMedium/>
          </Subesction>
        </Section>
        <Section title="Process" id="Process">
          <Subesction title="EC" id="Process1">
            <LoremMedium/> 
          </Subesction>
          <Subesction title="Design and Build" id="Process2">
            <LoremMedium/> 
          </Subesction>
        </Section>
        <Section title="Experiments" id="Experiments">
          <Subesction title="Cloning" id="Experiments1">
            <LoremMedium/> 
          </Subesction>
          <Subesction title="Nikase-Assay" id="Experiments2">
            <LoremMedium/> 
          </Subesction>
          <Subesction title="Activity Experiments" id="Experiments3">
            <LoremMedium/> 
          </Subesction>
        </Section>
        <Section title="Parts Collection" id="Parts Collection">
          <Subesction title="Plasmids" id="Parts Collection1">
            <LoremMedium/>
          </Subesction>
          <Subesction title="Basic Parts" id="Parts Collection2">
            <PartTable cols={headcols} data={BasicParts}/>
          </Subesction>
          <Subesction title="Composite Parts" id="Parts Collection3">
          <PartTable cols={headcols} data={CompositeParts}/>
          </Subesction>
        </Section>
      </div>
    );
  }