HP-timeline.tsx

import { TabButtonRow } from "./Buttons";
import TimeHori from "./HorizontalTimeline";
import { BFHStyleTabs, ButtonRowTabs } from "./Tabs";
import { timelinedata } from "./data/hptimelinedata";
export function HPTimeline(){
    return(
      <section id="Timeline" className="section">
        <div className="center">
        </div> 
        <TabButtonRow data={timelinebuttonrowdata} classy="" opentype="timelinecardtabs" closing="timelinepersontabs" />
        <ButtonRowTabs cla="timelinecardtabs" data={timelinebuttonrowdata}/> 
        <BFHStyleTabs cla="timelinepersontabs" data={timelinedata}></BFHStyleTabs> 
      </section>
    )
  }

  let timelinebuttonrowdata = [
    {
      buttonname: "All", 
      node: <TimeHori tab="" ></TimeHori>, 
      cssname: "First"
    },
    { 
      node: <TimeHori tab="Patient" ></TimeHori>,
      buttonname: "Patients", 
      cssname: "Patient"
    },
    {
      node: <TimeHori tab="Medical Professional" ></TimeHori>,
      buttonname: "Medical Professionals", 
      cssname: "Medical"
    },
    {
      node: <TimeHori tab="Academia" ></TimeHori>,
      buttonname: "Academia", 
      cssname: "Academia"
    },
    { 
      node: <TimeHori tab="Industry" ></TimeHori>,
      buttonname: "Industry", 
      cssname: "Industry"
    }
  ]
  

/* export function HPtimelineNew(data: Array<NodeDatensatz>){
  var timelinecards: React.ReactNode; 
  var interviewtabs: 

} */