@fortawesome/free-solid-svg-icons#faPlus JavaScript Examples

function AddEditorBtn() {
    const [showForm, setShowForm] = useState(false);

    const openForm = () => {
        if (!showForm) setShowForm(true);
    };

    const closeForm = () => {
        setShowForm(false);
    };

    return (
        <div
            className={`managersEditors__item ${
                !showForm ? 'managersEditors__addEditor' : ''
            }`}
            onClick={openForm}
        >
            {showForm ? (
                <AddEditorForm closeForm={closeForm} />
            ) : (
                <div>
                    <FontAwesomeIcon
                        icon={faPlus}
                        className="managersEditors__addEditorBtn"
                    />
                    Ajouter un utilisateur
                </div>
            )}
        </div>
    );
}

constructor(router, timesheetService, store) {
    this.router = router;
    this.timesheetService = timesheetService;
    this.timesheet = {};
    this.timesheets = {};
    this.tasks = {};
    this.rates = {};
    this.store = store;
    this.faPlus = faPlus;
    this.myTimes = {};
    this.store.state.subscribe(
      (state) => (this.state = state)
    );
  }

library.add(
  faFileDownload,
  faTrash,
  faBars,
  faCheckSquare,
  faCheck,
  faPlus,
  faCogs,
  faServer,
  faLaptop,
  faMobileAlt
);

constructor(taskService, store, router) {
    this.taskService = taskService;
    this.store = store;
    this.router = router;
    this.faPlus = faPlus;
    this.faCheck = faCheck;
    this.faBars = faBars;
    this.subscription = this.store.state.subscribe(
      (state) => (this.state = state)
    );
  }

render() {
        return(
            <div className='profileBio'>
                <div>
                    <div>
                        <ProfileInfo bio={this.props.content.bio}/>
                    </div>
                    <hr />
                    <div>
                        <ProfileStats content={this.props.content.pathwayData}/>
                    </div>
                    <hr />
                    <div className='createPathwayLink'>
                        <Link to="/create">
                            <FontAwesomeIcon icon={faPlus} />
                            <span>Create a Pathway</span>
                        </Link>
                    </div>
                </div>
                <div className='profileFooter'>
                    pathways.
                </div>
            </div>
        );
    }

function AddTrackBtn({ setCreating }) {
    return (
        <Col xs={12} md={6} lg={3} onClick={() => setCreating(true)}>
            <div className="cupsList__cup">
                <FontAwesomeIcon
                    icon={faPlus}
                    className="cupsList__addCupIcon"
                />
                Ajouter
            </div>
        </Col>
    );
}

function AddCupBtn({ setCreating }) {
    return (
        <Col xs={6} md={4} lg={2} onClick={() => setCreating(true)}>
            <div className="cupsList__cup">
                <FontAwesomeIcon
                    icon={faPlus}
                    className="cupsList__addCupIcon"
                />
                Ajouter
            </div>
        </Col>
    );
}

ButtonTogglesBase = ({
  library, setShowPreviews, showPreviews, sending, quickAddBehavior, intl,
}) => (
  <>
    <Button variant="success" className="mr-1" size="lg" disabled={sending} onClick={quickAddBehavior}>
      <FontAwesomeIcon icon={faPlus} className="pr-1" />
      {intl.formatMessage(messages[`library.detail.add_${library.type}`])}
    </Button>
    <Button variant="primary" className="ml-1" onClick={() => setShowPreviews(!showPreviews)} size="lg">
      <FontAwesomeIcon icon={faSync} className="pr-1" />
      { intl.formatMessage(showPreviews ? messages['library.detail.hide_previews'] : messages['library.detail.show_previews']) }
    </Button>
  </>
)

TabsBar = (props) => {
  const {
    tabs,
    tabIndex,
    handleTabChange,
    handleNewTab,
    handleRemoveTab,
  } = props;

  return (
    <div>
      {/* Tabs Bar */}
      <div className="content__tabBar">
        <div className="content__tabBarRow">
          <div className="content__tabBarColumn" id="content__tabBarTabs">
            <div className="content__tabsRow">
              {/* Tabs */}
              {tabs.map((tab, index) => {
                return (
                  <div
                    key={index}
                    onClick={() => {
                      handleTabChange(index);
                    }}
                    className={
                      index === tabIndex
                        ? "content__requestTab active"
                        : "content__requestTab "
                    }
                  >
                    <span className="content__requestType">{tab.type}</span>
                    {tab.name}
                    <FontAwesomeIcon
                      icon={faTimes}
                      onClick={() => handleRemoveTab(tab)}
                      className="content__requestTabCloseIcon"
                    />
                  </div>
                );
              })}
              <div
                className="content__requestTab"
                id="content__requestTabAddTab"
                onClick={handleNewTab}
              >
                <FontAwesomeIcon icon={faPlus} />
              </div>
            </div>
          </div>
          <div className="content__tabBarColumn content__tabBarOptionsWrapper">
            <input value="DEV" className="content__tabBarSelect" />
            <button className="content__button">
              <FontAwesomeIcon icon={faEye} />
            </button>
            <button className="content__button">
              <FontAwesomeIcon icon={faCog} />
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}

IndexHeader = ({
  title,
  definition,
  buttonText,
  buttonUrl,
  filter,
  onClearFilter,
  onApplyFilter,
  organizations,
  allOrganizations,
  showFilters,
}) => (
  <div className="border-b border-gray-400 py-3">
    <div className="flex items-center md:mt-4 ">
      <h2 className="text-xl sm:text-2xl tracking-wide flex-grow">{title}</h2>

      <span className="text-gray-800 hidden sm:block">
        {organizations?.length} organizations
      </span>

      {buttonText && buttonUrl && (
        <a
          href={buttonUrl}
          className="px-4 py-2 ml-2 flex-shrink-0 leading-none border rounded text-teal-500 border-teal-500 hover:text-white hover:bg-teal-500"
          target="_blank"
          rel="noopener noreferrer"
        >
          <FontAwesomeIcon icon={faPlus} className="mr-2" />
          {buttonText}
        </a>
      )}
    </div>
    {definition && <p className="mt-3 mb-4 text-sm">{definition}</p>}

    <OrganizationFilter
      currentFilter={filter}
      onClearFilter={onClearFilter}
      onApplyFilter={onApplyFilter}
      organizations={allOrganizations}
      showFilters={showFilters}
    />
  </div>
)

library.add(
    faArrowAltCircleUp,
    faCog,
    faEdit,
    faEye,
    faEyeSlash,
    faList,
    faPause,
    faPlay,
    faPlus,
    faSearch,
    faTachometerAlt,
    faTimes,
    faTimesCircle,
    faTrash,
    faCheckCircle,
    faStream,
    faSave,
    faExclamationCircle,
    faBullhorn,
    faArrowsAltV,
    faUnlink,
    faQuestionCircle,
    faImages,
    faUpload,
    faCopy,
    faCheck,
    faFile,
    faAward,
    faLink,
    faChevronDown,
    faSignOutAlt,
    faPen,
    faExternalLinkSquareAlt,
    faSpinner,
    faUndo,
    faPlusCircle,
    faAngleDown,
    faLink,
);

CourseImportListItem = ({
  intl, course, libraryId, importBlocksHandler, ongoingImportState, taskPaginationParams,
}) => {
  const [importState, setImportState] = useState('default');

  useEffect(() => {
    setImportState(ongoingImportState);
  }, [ongoingImportState]);

  const handleImport = () => {
    importBlocksHandler({ params: { libraryId, courseId: course.id, taskPaginationParams } });
  };

  const importButtonProps = {
    state: ongoingImportState || 'default',
    variant: importState === 'error' ? 'danger' : 'primary',
    labels: {
      default: intl.formatMessage(messages['library.course_import.new_import.label']),
      pending: intl.formatMessage(messages['library.course_import.ongoing_import.label']),
      complete: intl.formatMessage(messages['library.course_import.import_scheduled.label']),
      error: intl.formatMessage(messages['library.course_import.import_schedule_failed.label']),
    },
    icons: {
      default: <FontAwesomeIcon icon={faPlus} className="icon-inline" />,
      pending: <FontAwesomeIcon icon={faSpinner} className="icon-inline fa-spin" />,
      complete: <FontAwesomeIcon icon={faCheck} className="icon-inline" />,
      error: <FontAwesomeIcon icon={faSync} className="icon-inline" />,
    },
    disabledStates: ['pending', 'complete'],
    className: 'btn-lg',
    onClick: handleImport,
  };

  return (
    <div className="library-link">
      <Row className="h-100">
        <Col xs={6} md={6} className="my-auto">
          <h3 className="library-title">{course.title}</h3>
        </Col>
        <Col xs={6} md={6} className="my-auto text-center text-md-right">
          <StatefulButton {...importButtonProps} />
        </Col>
      </Row>
      <div className="library-metadata">
        <span className="library-org metadata-item">
          <span className="label">{intl.formatMessage(messages['library.course_import.list_item.organization'])}</span>
          <span className="value">{course.org}</span>
        </span>
        <span className="library-slug metadata-item">
          <span className="label">{intl.formatMessage(messages['library.course_import.list_item.id'])}</span>
          <span className="value">{course.id}</span>
        </span>
      </div>
    </div>
  );
}

AccordionSection = ({
  i,
  expanded,
  setExpanded,
  headerText,
  children,
}) => {
  const isOpen = expanded[i] === true
  const icon = isOpen ? faMinus : faPlus

  // By using `AnimatePresence` to mount and unmount the contents, we can animate
  // them in and out while also only rendering the contents of open accordions
  return (
    <Container>
      <Header
        initial={false}
        animate={{
          backgroundColor: isOpen ? styles.colorWhite : styles.colorWhite,
          color: isOpen ? styles.colorGrayDarkest : styles.colorGrayDarkest,
        }}
        onClick={() => setExpanded({ ...expanded, [i]: isOpen ? false : true })}
      >
        <span>
          <Icon icon={icon} />
        </span>
        <span>{headerText}</span>
      </Header>
      <AnimatePresence initial={false}>
        {isOpen && (
          <Section
            key="content"
            initial="collapsed"
            animate="open"
            exit="collapsed"
            variants={{
              open: { opacity: 1, height: "auto" },
              collapsed: { opacity: 0, height: 0 },
            }}
            transition={{ duration: 0.8, ease: [0.04, 0.62, 0.23, 0.98] }}
          >
            <Content
              variants={{ collapsed: { scale: 0.8 }, open: { scale: 1 } }}
              transition={{ duration: 0.8 }}
              className="accordion-content"
            >
              {children}
            </Content>
          </Section>
        )}
      </AnimatePresence>
    </Container>
  )
}

Sidebar = () => {
  const [tabs] = useState(["History", "Collections", "APIs"]);
  const [tabIndex, setTabIndex] = useState(1);

  const handleTabChange = (index) => {
    setTabIndex(index);
  };

  return (
    <div className="sidebar">
      <div className="sidebar__searchBarWrapper">
        <input
          type="text"
          placeholder="Filter"
          className="sidebar__searchBar"
        />
        <div className="sidebar__menu">
          {tabs.map((tab, index) => {
            return (
              <span
                onClick={() => handleTabChange(index)}
                className={
                  index === tabIndex
                    ? "sidebar__menuOptions active"
                    : "sidebar__menuOptions"
                }
              >
                {tab}
              </span>
            );
          })}
        </div>
        <div className="sidebar__row">
          <div className="sidebar__column">
            <span className="sidebar__newCollectionLink">
              <FontAwesomeIcon icon={faPlus} /> New Collection
            </span>
            <span className="sidebar__trashLink">Trash</span>
          </div>
        </div>
        {/* Collections List */}
        <div className="sidebar__collectionList">
          {collections.map((collection, index) => {
            return (
              <div className="sidebar__collection">
                <div className="sidebar__collectionRow">
                  <div className="sidebar__collectionColumn">
                    <FontAwesomeIcon
                      icon={faCaretRight}
                      className="sidebar__icons"
                    />
                    <FontAwesomeIcon
                      icon={faFolder}
                      className="sidebar__icons"
                    />
                  </div>
                  <div className="sidebar__collectionColumn">
                    <span>{collection.name}</span>
                    <p className="sidebar__collectionRequests">
                      {collection.requestsCount} Requests
                    </p>
                  </div>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
}

PlusIcon = makeFAIcon(faPlus)

constructor(router, projectService) {
    this.router = router;
    this.projectService = projectService;
    this.faPlus = faPlus;
  }

constructor(router, resourceService) {
    this.faPlus = faPlus;
    this.faFilter = faFilter;
    this.router = router;
    this.resourceService = resourceService;
  }

constructor(router, timesheetService) {
    this.router = router;
    this.timesheetService = timesheetService;
    this.faPlus = faPlus;
    this.faFilter = faFilter;
  }

export default function () {
  library.add(faGithub, faWindows, faLinux, faTwitter, faReddit, faTelegram, faCheckCircle, faMicrochip, faTrashAlt,
    faPaperPlane, faSpinner, faFlask, faInfoCircle, faPen, faTools, faCheck, faPlus, faCog, faExclamationTriangle,
    faQuestionCircle, faSyncAlt, faInfinity, faDownload, faCopy, faPlug, faTimesCircle);
}

ProjectDetailList = () => {
  const playList1 = [
    { title: "Activity #1" },
    { title: "Activity #2" },
    { title: "My first activity", status: "Shared" },
  ];
  const playList2 = [
    { title: "Activity #1" },
    { title: "Activity #2" },
    { title: "My first activity", status: "Shared" },
    { title: "Activity #2" },
    { title: "Activity #2", status: "Shared" },
  ];

  const [openMyProject, setOpenMyProject] = useState(false);
  const [uploadImageStatus, setUploadImageStatus] = useState(false);
  return (
    <>
      <div className="myproject-playlist">
        <div className="content-wrapper">
          <div className="inner-content">
            <div className="topHeading-playlist-detail">
              <div className="topHeading-creation-btn">
                <div>
                  <TopHeading
                    description="Nevada Department of Education"
                    image={projectFolder}
                    heading="Design, Art & History"
                    color="#084892"
                    className="heading-style"
                  />
                </div>
                <div className="playlist-creation-btn">
                  <Buttons
                    secondary={true}
                    text="Create new playlist"
                    icon={faPlus}
                    width="189px"
                    height="35px"
                    hover={true}
                    className="btn-margin"
                  />
                  <Buttons
                    primary={true}
                    text="Project Preview"
                    icon={faEye}
                    width="162px"
                    height="35px"
                    hover={true}
                  />
                </div>
              </div>
            </div>
            <div className="topHeading-playlist-project-title">
              <HeadingThree text="Project name" color="#084892" />
            </div>
            <div className="project-playlist-card">
              <div className="playlist-card">
                <ProjectList
                  projectTitle="Playlist name #2"
                  playList={playList1}
                />
              </div>
              <div className="playlist-card">
                <ProjectList
                  projectTitle="Playlist name #3"
                  playList={playList2}
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </>
  );
}

function AddPlayerBtn({ tournamentId }) {
    const [showForm, setShowForm] = useState(false);

    const openForm = () => {
        if (!showForm) setShowForm(true);
    };

    const closeForm = () => {
        setShowForm(false);
    };

    return (
        <Row>
            <Col xs={12} onClick={openForm}>
                <div
                    className={`podium__player ${
                        !showForm ? 'podium__addPlayer' : ''
                    }`}
                >
                    <Row justify="center" align="center">
                        {showForm ? (
                            <AddPlayerForm
                                closeForm={closeForm}
                                tournamentId={tournamentId}
                            />
                        ) : (
                            <Col xs={12} className="podium__addPlayerWrapper">
                                <FontAwesomeIcon
                                    icon={faPlus}
                                    className="podium__addPlayerBtn"
                                />
                                Ajouter au podium
                            </Col>
                        )}
                    </Row>
                </div>
            </Col>
        </Row>
    );
}

function ParticipationComparison({
    tournament,
    onAddComparison,
    comparedUsers,
}) {
    const [showForm, setShowForm] = useState(false);

    const openForm = () => {
        if (!showForm) setShowForm(true);
    };

    const closeForm = () => {
        setShowForm(false);
    };

    const onAdd = (participation) => {
        setShowForm(false);
        onAddComparison(participation);
    };

    useEffect(() => {
        closeForm();
    }, [tournament]);

    return (
        <Row>
            <Col xs={12} onClick={openForm}>
                <div
                    className={`participation__comparison ${
                        !showForm ? 'participation__addComparison' : ''
                    }`}
                >
                    <Row justify="center" align="center">
                        {showForm ? (
                            <AddComparisonForm
                                closeForm={closeForm}
                                onAdd={onAdd}
                                tournament={tournament}
                                comparedUsers={comparedUsers}
                            />
                        ) : (
                            <Col xs={12}>
                                <FontAwesomeIcon
                                    icon={faPlus}
                                    className="participation__addComparisonBtn"
                                />
                                Comparer avec d'autres utilisateurs
                            </Col>
                        )}
                    </Row>
                </div>
            </Col>
        </Row>
    );
}

function AddParticipationStreamersChart({ tournament, comparedStreamers }) {
    const [showForm, setShowForm] = useState(false);

    const openForm = () => {
        if (!showForm) setShowForm(true);
    };

    const closeForm = () => {
        setShowForm(false);
    };

    const onClose = () => {
        setShowForm(false);
    };

    useEffect(() => {
        closeForm();
    }, [tournament]);

    return (
        <Row>
            <Col xs={12} onClick={openForm}>
                <div
                    className={`participation__comparison ${
                        !showForm ? 'participation__addComparison' : ''
                    }`}
                >
                    <Row justify="center" align="center">
                        {showForm ? (
                            <AddComparisonForm
                                closeForm={closeForm}
                                onClose={onClose}
                                tournament={tournament}
                                comparedStreamers={comparedStreamers}
                            />
                        ) : (
                            <Col xs={12}>
                                <FontAwesomeIcon
                                    icon={faPlus}
                                    className="participation__addComparisonBtn"
                                />
                                Comparer avec d'autres streamers
                            </Col>
                        )}
                    </Row>
                </div>
            </Col>
        </Row>
    );
}

export default function Headline({ setCreateProject }) {
  const organization = useSelector((state) => state.organization);
  const { currentOrganization, permission } = organization;
  const primaryColor = getGlobalColor('--main-primary-color');
  return (
    <>
      <div className="project-headline">
        <div className="title">
          <div className="title-name-heading-image">
            <Headings text={`${currentOrganization?.name}`} headingType="body2" color="#084892" />
            <div className="heading-image">
              {/* <img src={foldericon} alt="" /> */}
              <svg width="35" height="35" viewBox="0 0 30 31" fill="none" xmlns="http://www.w3.org/2000/svg">
                <g clipPath="url(#clip0)">
                  <path
                    d="M4 9.60938V24.6094C4 25.2998 4.55965 25.8594 5.25 25.8594H25.25C25.9404 25.8594 26.5 25.2998 26.5 24.6094V11.3402C26.5 10.6498 25.9404 10.0902 25.25 10.0902H16.4038"
                    stroke={primaryColor}
                    strokeWidth="2"
                    strokeLinecap="round"
                  />
                  <path
                    d="M16.4038 10.0902L12.933 6.04244C12.8159 5.92523 12.6569 5.85938 12.4911 5.85938H4.625C4.27983 5.85938 4 6.1392 4 6.48437V9.60937"
                    stroke={primaryColor}
                    strokeWidth="2"
                    strokeLinecap="round"
                  />
                </g>
                <defs>
                  <clipPath id="clip0">
                    <rect width="30" height="30" fill="white" transform="translate(0 0.859375)" />
                  </clipPath>
                </defs>
              </svg>

              {/* Projects */}
              <Headings text="My Projects" headingType="h2" color="#084892" />
            </div>
          </div>
          <div className="search-main-relaced">
            <div className="search-div">
              <SearchForm />
            </div>
            {permission?.Project?.includes('project:create') && (
              <Buttons
                primary
                text="Create a project"
                icon={faPlus}
                iconColor="#FF0000"
                width="auto"
                height="35px"
                onClick={() => {
                  setCurrentVisibilityType(null);
                  setCreateProject(true);
                }}
                hover
              />
            )}
          </div>
        </div>
        <Headings text="Create and organize your activities into projects to create complete courses." headingType="body2" color="#515151" className="top-heading-detail" />
      </div>
    </>
  );
}

function AddRaceBtn({ participationId }) {
    const [showForm, setShowForm] = useState(false);

    const openForm = () => {
        if (!showForm) setShowForm(true);
    };

    const closeForm = () => {
        setShowForm(false);
    };

    return (
        <Row className="participation__raceWrapper">
            <Col xs={12} onClick={openForm}>
                <div
                    className={`participation__race ${
                        !showForm ? 'participation__addRace' : ''
                    }`}
                >
                    <Row justify="center" align="center">
                        {showForm ? (
                            <AddRaceForm
                                closeForm={closeForm}
                                participationId={participationId}
                            />
                        ) : (
                            <Col xs={12}>
                                <FontAwesomeIcon
                                    icon={faPlus}
                                    className="participation__addRaceBtn"
                                />
                                Ajouter une course
                            </Col>
                        )}
                    </Row>
                </div>
            </Col>
        </Row>
    );
}

ProjectList = ({ className, projectTitle, playList }) => {
  const currikiUtility = classNames("curriki-utility-projectlist", className);
  const [editStatus, setEditStatus] = useState(true);
  return (
    <div className={currikiUtility}>
      <div className="playlist-top">
        <div className="playlist-card-title">
          <h3>{projectTitle}</h3>
        </div>
        <div className="playlist-card-dropdown">
          <ActivityCardDropDown />
        </div>
      </div>
      <div className="playlist-items-list">
        {/* <div className="project-list-items">
          <div className="project-list-title">
            <p>Activity #1</p>
          </div>
          <div className="project-list-status-dropdown">
            <div className="project-list-status">
              <p>
                <span></span> Shared
              </p>
            </div>
            <div className="project-list-dropdown">
              <ActivityCardDropDown />
            </div>
          </div>
        </div> */}
        {playList?.map((ltem, index) => {
          return (
            <div className="project-list-items">
              <div className="project-list-title">
                <p>{ltem.title}</p>
              </div>
              <div className="project-list-status-dropdown">
                <div className="project-list-status">
                  {ltem?.status && (
                    <p>
                      <span></span> {ltem.status}
                    </p>
                  )}
                </div>
                <div className="project-list-dropdown">
                  <ActivityCardDropDown />
                </div>
              </div>
            </div>
          );
        })}
      </div>
      <div className="project-list-add-activity">
        <Link
          to={`/org/:organization/project/create/one/playlist/addactivity/${editStatus}`}
          className="add-activity-link"
        >
          <FontAwesomeIcon icon={faPlus} style={{ marginRight: "20px" }} />
          Add new Activity
        </Link>
      </div>
    </div>
  );
}

render() {
    const {redirect} = this.state;

    if(redirect){
        return <Redirect to={"/home"}/>
    }
    return (
      <div className="container">
        <Card>
          <Card.Body>
            <div className="inline">
              <Card.Title>
                <h5 align="center">
                  Notice Board-Placements
                  <Tooltip title="Add">
                    <Link onClick={this.toggleModal}>
                      <FontAwesomeIcon icon={faPlus} size="xs" className="p-1 fa-lg" style={{backgroundColor:'#2A324B',color:'white',fontSize:'20',borderRadius:'10'}}/>
                    </Link>
                  </Tooltip>
                </h5>
              </Card.Title>
            </div>
            &nbsp;
            <div>
              <Table size="sm" responsive striped>
                <thead className="p-3" style={{backgroundColor:'#2A324B',color:'white',fontSize:'24px'}}>
                  <tr>
                    <th>S.No</th>
                    <th>Name of the Company</th>
                    <th>Date</th>
                    <th>CTC</th>
                    <th colspan="2">Operations</th>
                  </tr>
                </thead>
                <tbody>
                 {this.userList()}
                </tbody>
              </Table>
            </div>
          </Card.Body>
        </Card>
        <Modal isOpen={this.state.isModalOpen} toggle={this.toggleModal}>
          <ModalHeader toggle={this.toggleModal}>
            Add Placement Event
          </ModalHeader>
          <ModalBody>
            <Form onSubmit={this.handleSubmit}>
              <FormGroup>
                <Label htmlfor="company">Name Of The Company</Label>
                <Input type="text" id="company" name="company"  value={this.state.company} onChange={this.onChangeCompany} />
              </FormGroup>
              <FormGroup>
                <Label htmlFor="date"> From </Label>
                <Input type="date" id="date" name="date" value={this.state.date} onChange={this.onChangeDate} />
              </FormGroup>
              <FormGroup>
                <Label htmlFor="CTC"> CTC </Label>
                <Input type="text" id="ctc" name="ctc" value={this.state.CTC} onChange={this.onChangeCTC}/>
              </FormGroup>
              <Button type="submit" value="submit" color="primary">
                Submit
              </Button>
            </Form>
          </ModalBody>
        </Modal>
      </div>
    );
  }

MyProjectCard = ({ className, backgroundImg, title }) => {
  const currikiUtility = classNames(
    "curriki-utility-myproject-card",
    className
  );
  return (
    <div className={currikiUtility}>
      <div
        className="myproject-card-top"
        style={{ backgroundImage: `url(${backgroundImg})` }}
      >
        <div className="myproject-card-dropdown">
          <ActivityCardDropDown iconColor="white" />
        </div>
        <div className="myproject-card-title">
          <h2>{title}</h2>
        </div>
      </div>
      <div className="myproject-card-detail">
        <p>
          Within the six categories, there are over 50 learning activity types.
          These range from Interactive Video, Flashcards.
        </p>
      </div>
      <div className="myproject-card-status">
        <p>
          <span></span> Published
        </p>
      </div>
      <div className="myproject-card-add-share">
        <button
          style={{
            width: "86px",
            height: "32px",
            marginRight: "24px",
            textAlign: "left",
          }}
        >
          <Link
            to="/org/currikistudio/project/create/one/playlist"
            style={{ textDecoration: "none", color: "#084892" }}
          >
            <FontAwesomeIcon
              icon={faPlus}
              style={{ marginRight: "16px" }}
              color="#084892"
            />
            Add
          </Link>
        </button>
        <button style={{ width: "108px", height: "32px", textAlign: "right" }}>
          <FontAwesomeIcon
            icon={faShareSquare}
            style={{ marginRight: "16px" }}
            color="#084892"
          />
          Share
        </button>
      </div>
    </div>
  );
}

AddTeamProjects = ({ setPageLoad }) => {
  const primaryColor = getGlobalColor('--main-primary-color');
  return (
    <div className="add-team-projects">
      <div className="team-projects-top-section">
        <div>
          <div className="organization-name">CurrikiStudio</div>
          <div className="title-image">
            <div>
              <h1 className="title">Add projects</h1>
            </div>
          </div>
        </div>
        <div
          className="back-to-section"
          onClick={() => {
            setPageLoad((oldStatus) => !oldStatus);
          }}
        >
          <FontAwesomeIcon icon={faAngleLeft} className="back-icon" />
          <span>Back to team</span>
        </div>
      </div>

      <div className="project-tabs">
        <Tabs className="main-tabs" defaultActiveKey="Projects" id="uncontrolled-tab-example">
          <Tab eventKey="Projects" title="Projects">
            <div className="flex-button-top">
              <div className="team-controller">
                <div className="search-and-filters">
                  <div className="search-bar">
                    <input type="text" className="search-input" placeholder="Search project" />
                    {/*  <img src={searchimg} alt="search" />*/}
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" css-inspector-installed="true">
                      <path
                        d="M11 19C15.4183 19 19 15.4183 19 11C19 6.58172 15.4183 3 11 3C6.58175 3 3.00003 6.58172 3.00003 11C3.00003 15.4183 6.58175 19 11 19Z"
                        stroke={primaryColor}
                        stroke-width="2"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                      />
                      <path d="M21 20.9984L16.65 16.6484" stroke={primaryColor} stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                    </svg>
                  </div>
                </div>

                <div className="team-project-btns">
                  <div className="project-selection">
                    <p>5 projects have been selected. </p>
                  </div>
                  <Buttons icon={faPlus} text="Add projects to team" primary={true} width="188px" height="32px" hover={true} />
                </div>
              </div>
            </div>
            <div className="list-of-team-projects">
              <TeamProjectCard backgroundImg={Project1} title="The Curriki Vision" className="mrt" />
              <TeamProjectCard backgroundImg={Project2} title="The Curriki Vision" className="mrt" />
              <TeamProjectCard backgroundImg={Project3} title="The Curriki Vision" className="mrt" />
              <TeamProjectCard backgroundImg={Project1} title="The Curriki Vision" className="mrt" />
              <TeamProjectCard backgroundImg={Project2} title="The Curriki Vision" className="mrt" />
              <TeamProjectCard backgroundImg={Project3} title="The Curriki Vision" className="mrt" />
            </div>
          </Tab>
          <Tab eventKey="Search" title="Search">
            <div className="flex-button-top">
              <div className="team-controller">
                <div className="search-and-filters">
                  <div className="search-bar">
                    <input type="text" className="search-input" placeholder="Search project" />
                    <img src={searchimg} alt="search" />
                  </div>
                </div>

                <div className="team-project-btns">
                  <div className="project-selection">
                    <p>5 projects have been selected. </p>
                  </div>
                  <Buttons icon={faPlus} text="Add projects to team" primary={true} width="188px" height="32px" hover={true} />
                </div>
              </div>
            </div>
            <SearchInterface fromTeam={true} />
          </Tab>
        </Tabs>
      </div>
      {/* <div className="flex-button-top">
        <div className="team-controller">
          <div className="search-and-filters">
            <div className="search-bar">
              <input
                type="text"
                className="search-input"
                placeholder="Search project"
              />
              <img src={searchimg} alt="search" />
            </div>
          </div>

          <div className="team-project-btns">
            <div className="project-selection">
              <p>5 projects have been selected. </p>
            </div>
            <Buttons
              icon={faPlus}
              text="Add projects to team"
              primary={true}
              width="188px"
              height="32px"
              hover={true}
            />
          </div>
        </div>
      </div> */}
    </div>
  );
}