Coverage.tsx

import React, { useState, useEffect, ChangeEvent } from 'react';
import styles from './Coverage.module.css';
import {deliverableRegulatoryLib, repRegulatoryLib} from '../../lib/regulatoryLib'

const Coverage: React.FC<Props> = ({setTabs}) => {
  const handleAddToTabs = (issue) => {

    if (issue) {
      setTabs((prevTabs) => [...prevTabs, issue]);
    } else {
      console.error(`Error adding model.`);
    }
  };

  return (
    <div className={`${styles.sideBySideItem2} flex flex-col`}>
        <h2 className={styles.headerTitle}>Select Cognitive Issue from Library</h2>
        <h2><strong>Deliverables:</strong></h2>
        <ul className="list-disc ml-4">
          {deliverableRegulatoryLib.map((item, index) => (
              <li className="flex items-center mb-2" key={index}>
                <button onClick={() => handleAddToTabs(item)} className="bg-blue-500 text-white px-1 py-0.5 rounded">+</button>
                <span className="ml-2">{item.title}</span>
              </li>
          ))}
        </ul>
        {/* <h2><strong>Mentee choose representation that are:</strong></h2>
        <ul className="list-disc ml-4">
          {repRegulatoryLib.map((item, index) => (
              <li className="flex items-center mb-2" key={index}>
                <button onClick={() => handleAddToTabs(item)} className="bg-blue-500 text-white px-1 py-0.5 rounded">+</button>
                <span className="ml-2">{item.title}</span>
              </li>
            ))}
        </ul> */}
    </div>
  );
};

export default Coverage;