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

function ContributionSection({ data, org, className }) {
  return (
    <SidebarSectionList title="Edit History" className={className}>
      <SidebarSectionList.Item
        href={getEditUrl({ data, org })}
        text="Suggest an Edit"
        icon={faEdit}
      />

      {org.source && (
        <SidebarSectionList.Item
          text={`Source - ${org.source.name}`}
          href={org.source.url}
          icon={faFileAlt}
        />
      )}
    </SidebarSectionList>
  )
}

library.add(
  far,
  fas,
  faBookReader,
  faArrowLeft,
  faArrowRight,
  faQuestionCircle,
  faCopy,
  faSignOutAlt,
  faEdit,
  faAngleDown,
  faExternalLinkAlt,
  fab,
  faEthereum,
  faTwitter,
  faDiscord,
  faUnlink,
  faSearch,
  faFortAwesome,
  faExchangeAlt,
  faChartPie,
  faGlobe,
  faDonate,
  faDollarSign,
);

EditButton = ({ docId, status }) => {
  const url = `/documents/${docId}/edit`;
  if (status === 'Being Prepared')
    return (
      <InlineLink url={url}>
        <FontAwesomeIcon icon={faEdit} color="inherit" title="Edit" />
        &nbsp;&nbsp;Edit
      </InlineLink>
    );
  return (
    <DisabledInline>
      <FontAwesomeIcon icon={faEdit} color="inherit" title="Edit" />
      &nbsp;&nbsp;Edit
    </DisabledInline>
  );
}

function ContributionSection({ data, org, className }) {
  return (
    <SidebarSectionList title="Edit History" className={className}>
      <SidebarSectionList.Item
        href={getEditUrl({ data, org })}
        text="Suggest an Edit"
        icon={faEdit}
      />

      {org.source && (
        <SidebarSectionList.Item
          text={`Source - ${org.source.name}`}
          href={org.source.url}
          icon={faFileAlt}
        />
      )}
    </SidebarSectionList>
  )
}

ChartWrapper = withWidget({
  // The normal view
  view: {
    icon: <BcnLogo />,
    label: ({ t }) => t("View"),
    title: (props) => props.title,
    render: withData((props) => {
      const {
        // Translated
        days: dies,
        bcnData: data,
        // Discarded
        setBcnData,
        onRemove,
        t,
        dataset,
        onChangeDataset,
        bcnDataHandler,
        // Passed through
        ...restProps
      } = props;

      // Once downloaded, set parent's data, so it can properly
      // set title and other widget components
      React.useEffect(() => setBcnData(data), [data, setBcnData]);

      return <Chart {...{ dies, data }} {...restProps} />;
    }),
  },

  // Edit data
  edit: {
    icon: <FontAwesomeIcon icon={faEdit} />,
    label: ({ t }) => t("Edit"),
    title: ({ t }) => t("Edit BCN parameters"),
    render: Edit,
  },
})

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

        if(redirect){
            return <Redirect to={"/PlacementEditBoard"}/>
        }
    return (
        
        //let count = {this.state};
          <tr>
              <td>
                  {this.props.obj.sno}
              </td>
                <td>
                    {this.props.obj.Company_name}
                </td>
                <td>
                    {this.props.obj.Date}
                </td>
                <td>
                    {this.props.obj.CTC}
                </td>
                <td>
                    {this.props.obj.status}
                </td>
                <td>
                    <Tooltip title="Edit" placement="left">
                        <Link to={"/editplacement/"+1} ><FontAwesomeIcon icon={faEdit} className="ml-2 p-1 fa-lg" style={{backgroundColor:'#2A324B',color:'white',fontSize:'20',borderRadius:'10'}}/></Link>
                    </Tooltip>
                    <Tooltip title="Delete" placement="right">
                        <Link><FontAwesomeIcon icon={faTrash} onClick={this.delete} className="ml-2 p-1" style={{backgroundColor:'#2A324B',color:'white',fontSize:'20',borderRadius:'10'}}/></Link>
                    </Tooltip>
                </td>
            </tr>  
    )
    }

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

        if(redirect){
            return <Redirect to={"/user-staff"}/>
        }
    	return (
        <tr>
            <td>{this.props.obj.Emp_Id}</td>
            <td align="left">{this.props.obj.Emp_Name}</td>
            <td>{this.props.obj.Email_id}</td>
            <td>{this.props.obj.Campus}</td>
            <td>{this.props.obj.Department}</td>
            <td>{this.props.obj.Mobile_No}</td>
            <td>
                <Tooltip title="Edit" placement="left">
                    <Link to={"/edituserstaff/"+this.props.obj.Emp_Id} ><FontAwesomeIcon icon={faEdit} className="ml-2 p-1 fa-lg" style={{backgroundColor:'#2A324B',color:'white',fontSize:'20',borderRadius:'10'}}/></Link>
                </Tooltip>
                <Tooltip title="Delete" placement="right">
                    <FontAwesomeIcon icon={faTrash} onClick={this.deletestaff} className="ml-2 p-1" style={{backgroundColor:'#2A324B',color:'white',fontSize:'20',borderRadius:'10'}}/>
                </Tooltip>
            </td>        
        </tr>  
        )
    }

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

        if(redirect){
            return <Redirect to={"/TrainingBoardEdit"}/>
        }
    return (
          <tr>
                <td>
                    {this.props.obj.from_date}
                </td>
                <td>
                    {this.props.obj.to_date}
                </td>
                <td>
                    {this.props.obj.name_of_the_program}
                </td>
                <td>
                    {this.props.obj.status}
                </td>
                <td>
                    <Tooltip title="Edit" placement="left">
                        <Link to={"/edit/"+this.props.obj.id} ><FontAwesomeIcon icon={faEdit} className="ml-2 p-1 fa-lg" style={{backgroundColor:'#2A324B',color:'white',fontSize:'20',borderRadius:'10'}}/></Link>
                    </Tooltip>
                    <Tooltip title="Delete" placement="right">
                        <Link><FontAwesomeIcon icon={faTrash} onClick={this.delete} className="ml-2 p-1" style={{backgroundColor:'#2A324B',color:'white',fontSize:'20',borderRadius:'10'}}/></Link>
                    </Tooltip>
                </td>
            </tr>  
    )
    }

MyTeamCard = ({ className, backgroundImg, title, description }) => {
  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>
          {description}
        </p>
      </div>
      <div className="my-project-icons">
        <FontAwesomeIcon icon={faEye} color="#084892" className="icon-edit" />
        <FontAwesomeIcon icon={faEdit} color="#084892" className="icon-edit" />
        <FontAwesomeIcon icon={faLink} color="#084892" className="icon-edit" />
      </div>
    </div>
  );
}

/* add any additional icon to the library */
library.add(fab, faLaptopCode, faDrawPolygon, faEdit, faEdit, faBullhorn, faMapMarkerAlt, faPhone, faPaperPlane);

render() {
        return (
            <>
            <tr className="active">
                <th className={this.props.comp === 'Archive' ? "strikeThrough" : (!this.state.checkBoxChecked ? "" : "strikeThrough")} scope="row">
                <div>
                <Form className="mb-3">
                    <Form.Group controlId="formBasicCheckbox">
                        <Form.Check
                            disabled={this.state.checkBoxDisabled}
                            type="checkbox"
                            checked={this.state.checkBoxChecked}
                            onChange={this.handleCheckBox}
                        />
                    </Form.Group>
                </Form>
                </div>
                </th>
                {
                    this.props.comp !== 'Archive' ? 
                    <td>
                        <FontAwesomeIcon icon={faEdit} onClick={() => this.toggleEditTask()}></FontAwesomeIcon>
                        <EditTask 
                            show={this.state.showEdit}
                            onHide={this.toggleEditTask}
                            isDark={this.props.isDark}
                            authToken={this.props.authToken}
                            editTask={this.state.editItem}
                            updateData={this.updateData}/>
                    </td> :
                    null
                }
                <td 
                    className={this.props.comp === 'Archive' ? 
                    "strikeThrough" : 
                    !this.state.checkBoxChecked ? 
                    "" : 
                    "strikeThrough"} >
                    <div>{this.props.desc}</div>    
                </td>
                <td 
                    className={this.props.comp === 'Archive' ? 
                    "strikeThrough" : 
                    !this.state.checkBoxChecked ? 
                    "" : 
                    "strikeThrough"}>
                    <div>{this.prettyStatus()}</div>    
                </td>
                <td 
                    className={this.props.comp === 'Archive' ? 
                    "strikeThrough" : 
                    !this.state.checkBoxChecked ? 
                    "" : 
                    "strikeThrough"}>
                    <div>{this.props.label}</div>    
                </td>
                <td 
                    className={this.props.comp === 'Archive' ? 
                    "strikeThrough" : 
                    !this.state.checkBoxChecked ? 
                    "" : 
                    "strikeThrough"}>
                    <div>{this.props.date}</div>    
                </td>
                <td 
                    className={this.props.comp === 'Archive' ? 
                    "strikeThrough" : 
                    !this.state.checkBoxChecked ? 
                    "" : 
                    "strikeThrough"}>
                    <div>{this.props.time}</div>    
                </td>
                <td>
                    <FontAwesomeIcon icon={faTrashAlt} onClick={() => this.removeItem()}></FontAwesomeIcon>
                </td>
            </tr>
            </>
        )
    }

ActivityCardDropDown = ({ iconColor }) => {
  const IconColor = iconColor ? iconColor : "#084892";
  const dispatch = useDispatch();
  return (
    <div className="curriki-utility-activity-dropdown">
      <Dropdown className="activity-dropdown check ">
        <Dropdown.Toggle className="activity-dropdown-btn">
          <FontAwesomeIcon
            icon={faEllipsisV}
            style={{ fontSize: "13px", color: IconColor, marginLeft: "5px" }}
          />
          {/* <span>EditActivity</span> */}
        </Dropdown.Toggle>

        <Dropdown.Menu>
          <Dropdown.Item
            onClick={() => {
              dispatch({
                type: "SET_ACTIVE_ACTIVITY_SCREEN",
                payload: "addactivity",
              });
            }}
          >
            <FontAwesomeIcon icon={faEdit} className="mr-2" />
            Edit
          </Dropdown.Item>

          <Dropdown.Item>
            <FontAwesomeIcon icon={faCopy} className="mr-2" />
            Duplicate
          </Dropdown.Item>
          <Dropdown.Item>
            <FontAwesomeIcon icon={faTrash} className="mr-2" />
            Delete
          </Dropdown.Item>
        </Dropdown.Menu>
      </Dropdown>
    </div>
  );
}

ChartWrapper = withWidget({
  // The normal view
  view: {
    icon: <FontAwesomeIcon icon={faChart} />,
    label: ({ t }) => t("View"),
    title: ({ title }) => title,

    // withData: Uses {chartPopulation, chartDivision, chartRegion} props to handle `chartDataset` download
    //   and pass it as a prop, showing <Loading/> until it's downloaded
    render: withData((props) => {
      const {
        // Translated
        days: dies,
        chartData: valors,
        chartPopulation: population,
        chartRegionName: region,
        chartDataset: dataset,
        // Used
        setChartData,
        indexValues,
        id,
      } = props;

      // Once downloaded, set parent's data, so it can properly
      // set title and other widget components
      React.useEffect(() => setChartData(valors), [valors, setChartData]);

      return (
        <Chart
          {...{
            id,
            dies,
            indexValues,
            valors,
            population,
            region,
            dataset,
          }}
        />
      );
    }),
  },

  // Edit data
  edit: {
    icon: <FontAwesomeIcon icon={faEdit} />,
    label: ({ t }) => t("Edit"),
    title: ({ t }) => t("Edit chart parameters"),
    render: Edit,
  },
})

MapWrapper = withWidget({
  // The normal view
  view: {
    icon: <FontAwesomeIcon icon={faMap} />,
    label: ({ t }) => t("View"),
    title: (props) => props.name,
    render: withData(
      ({ t, mapKind, label, mapData, indexValues, colors, id }) => (
        <MapImage
          title={`${t("Map")}: Catalunya: ${t(mapKind)}`}
          label={label}
          values={mapData.valors}
          mapSrc={MapData.svg(mapKind)}
          indexValues={indexValues}
          colors={colors}
          id={id}
        />
      )
    ),
  },
  // Edit data
  edit: {
    icon: <FontAwesomeIcon icon={faEdit} />,
    label: ({ t }) => t("Edit"),
    title: ({ t }) => t("Edit map parameters"),
    render: (props) => (
      <Edit
        mapKind={props.mapKind}
        mapValue={props.mapValue}
        onChangeMapKind={props.onChangeMapKind}
        onChangeMapValue={props.onChangeMapValue}
      />
    ),
  },

  // Show map legend
  legend: {
    icon: <FontAwesomeIcon icon={faLegend} />,
    label: ({ t }) => t("Legend"),
    title: (props) => props.title,
    render: (props) => (
      <Legend colors={props.colors} subtitle={props.days[props.indexValues]} />
    ),
  },
})

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,
);

SideBar = ({ isOpen, toggle }) => (
  <div className={classNames("sidebar", { "is-open": isOpen })}>
    <div>
      <div className="sidebar-header">
        <span color="info" onClick={toggle} style={{ color: "#fff" }}>
          &times;
        </span>
        <Link to={"/home"}>
          <h3>GITAM Career Guidance Cell</h3>
        </Link>
      </div>
      <div align="center" className="pt-2 pb-2">
        <h4>Menu</h4>
      </div>
      <div className="side-menu">
        <Nav vertical className="pb-3">
          <li>
          <NavLink tag={Link} to={"/home"}>
              <FontAwesomeIcon icon={faHome} className="mr-2" />
              Home
            </NavLink>
          </li>
          <hr/>
          <span className="pl-3" style={{"textAlign":"initial"}}>
              <Collapsible className ="pl-1  fa fa" trigger={<UserIcon/>}>
              <Nav vertical className="list-unstyled">
                <ul style={{"padding":"0px"}}>
                <li className="pl-3">
                  <NavLink tag={Link} to={"/user-staff"}>
                  <FontAwesomeIcon icon={faUsers} className="mr-2" />
                    Staff
                  </NavLink>
                </li>
                <li className="pl-3">
                  <NavLink tag={Link} to={"/user-student"}>
                  <FontAwesomeIcon icon={faGraduationCap} className="mr-2" />
                    Student
                  </NavLink>
                </li>
                </ul>
              </Nav>
              </Collapsible>
            </span>
            <hr/>
          <li>
            <NavLink tag={Link} to={"/assessment"}>
                <FontAwesomeIcon icon={faEdit} className="mr-2"/>
                Assessment
            </NavLink>
          </li>
          <hr/>
          <li>
            <NavLink tag={Link} to={"/Placements"}>
              <FontAwesomeIcon icon={faUserGraduate} className="mr-2" />
              Placements
            </NavLink>
          </li>
          <hr/>
          <li>
            <NavLink tag={Link} to={"/IndividualStudentEntry"}>
              <FontAwesomeIcon icon={faChalkboardTeacher} className="mr-2" />
              Individual student
            </NavLink>
          </li>
          <hr/>
            <li>            
              <NavLink tag={Link} to={"/allstudents"}>
              <FontAwesomeIcon icon={faUserEdit} className="mr-2" />
              Allstudents
              </NavLink>
            </li>  
            <hr/>  
              <li>        
                <NavLink tag={Link} to={"/settings"}>
                <FontAwesomeIcon icon={faCog} className="mr-2"/>
                Settings
                </NavLink>
             </li>     
             <hr/>     
              <li>          
                <NavLink tag={Link} onClick={ e=>{localStorage.clear();
                  window.location.href = '/login';}}>
                        <FontAwesomeIcon icon={faSignOutAlt} className="mr-2" />
                        Logout
                      </NavLink>
                </li>   
                <hr/>     
</Nav>
      </div>
    </div>
  </div>
)

render() {
        const {modalFlag} = this.state;
        const {
            assignment, assignments
        } = this.props;
        return (
            <Container>
                <Row>
                    <Col>
                        <Button
                            className="float-right"
                            color="primary"
                            size="lg"
                            tag={Link}
                            to="/assignments/new"
                        >
                            Nueva asignación
                        </Button>
                    </Col>
                </Row>
                <hr/>
                <Row>
                    <Col>
                        <Table bordered condensed hover stripped size="sm">
                            <thead>
                                <tr>
                                    <th colSpan="4">Contacto</th>
                                    <th colSpan="3">Departamento</th>
                                    <th rowSpan="2">Acciones</th>
                                </tr>
                                <tr>
                                    <th>Nombre</th>
                                    <th>Apellido</th>
                                    <th>Direccion</th>
                                    <th>Cargo</th>

                                    <th>Nombre</th>
                                    <th>Dirección</th>
                                    <th>Decripción</th>
                                </tr>
                            </thead>
                            <tbody>
                                {assignments.map(assignment => (
                                    <tr>
                                        <td>{assignment.firstName}</td>
                                        <td>{assignment.lastName}</td>
                                        <td>{assignment.address}</td>
                                        <td>{assignment.role}</td>
                                        <td>{assignment.name}</td>
                                        <td>{assignment.departmentAddress}</td>
                                        <td>{assignment.description}</td>
                                        <td className="text-center">
                                            <ButtonGroup>
                                                <Button tag={Link} to={`/assignments/${assignment.id}`}>
                                                    <FontAwesomeIcon icon={faEdit}/>
                                                </Button>
                                                <Button
                                                    onClick={() => this.handleModal(true, assignment)}
                                                    color="danger"
                                                >
                                                    <FontAwesomeIcon icon={faTrash}/>
                                                </Button>
                                            </ButtonGroup>
                                        </td>
                                    </tr>
                                ))}
                            </tbody>
                        </Table>
                    </Col>
                </Row>
                {modalFlag && (
                    <ModalConfirm
                        title="Confirme borrado"
                        message="Estas por borrar una Asignacion"
                        onDismiss={() => this.handleModal(null)}
                        onAccept={() => this.onDelete(assignment)}
                    >
                        <div> Testing </div>
                    </ModalConfirm>
                )}
            </Container>
        );
    }

export default function DemoSidebar() {
  return (
    <MainSidebar logo={logo} brandName='AdminLTE 3'>
      <SidebarUser avatar={user2} href='#' name='Alexander Pierce' />

      <NavSidebar>
        <NavItem>
          <NavLink tag={Link} to='/'>
            <FontAwesomeIcon icon={faTachometerAlt} className='nav-icon' />
            <p>Dashboard</p>
          </NavLink>
        </NavItem>

        <NavItem>
          <NavLink tag={Link} to='/widgets'>
            <FontAwesomeIcon icon={faTh} className='nav-icon' />
            <p>
              Widgets
              <Badge color='danger' className='right'>
                New
              </Badge>
            </p>
          </NavLink>
        </NavItem>

        <NavItem>
          <NavLink href='#'>
            <FontAwesomeIcon icon={faCopy} className='nav-icon' />
            <p>
              Layout Options
              <FontAwesomeIcon icon={faAngleLeft} className='right' />
              <Badge color='info' className='right'>
                6
              </Badge>
            </p>
          </NavLink>
          <ul className='nav nav-treeview'>
            <NavItem>
              <NavLink tag={Link} to='#'>
                <FontAwesomeIcon icon={farCircle} className='nav-icon' />
                <p>Top Navigation</p>
              </NavLink>
            </NavItem>
            <NavItem>
              <NavLink tag={Link} to='#'>
                <FontAwesomeIcon icon={farCircle} className='nav-icon' />
                <small>Top Navigation + Sidebar</small>
              </NavLink>
            </NavItem>
            <NavItem>
              <NavLink tag={Link} to='#'>
                <FontAwesomeIcon icon={farCircle} className='nav-icon' />
                <p>Boxed</p>
              </NavLink>
            </NavItem>
            <NavItem>
              <NavLink tag={Link} to='#'>
                <FontAwesomeIcon icon={farCircle} className='nav-icon' />
                <p>Fixed Sidebar</p>
              </NavLink>
            </NavItem>
            <NavItem>
              <NavLink tag={Link} to='#'>
                <FontAwesomeIcon icon={farCircle} className='nav-icon' />
                <small>Fixed Sidebar + Custom Area</small>
              </NavLink>
            </NavItem>
            <NavItem>
              <NavLink tag={Link} to='#'>
                <FontAwesomeIcon icon={farCircle} className='nav-icon' />
                <p>Fixed Navbar</p>
              </NavLink>
            </NavItem>
            <NavItem>
              <NavLink tag={Link} to='#'>
                <FontAwesomeIcon icon={farCircle} className='nav-icon' />
                <p>Fixed Footer</p>
              </NavLink>
            </NavItem>
            <NavItem>
              <NavLink tag={Link} to='#'>
                <FontAwesomeIcon icon={farCircle} className='nav-icon' />
                <p>Collapsed Sidebar</p>
              </NavLink>
            </NavItem>
          </ul>
        </NavItem>

        <NavItem>
          <NavLink href='#'>
            <FontAwesomeIcon icon={faChartPie} className='nav-icon' />
            <p>
              Charts
              <FontAwesomeIcon icon={faAngleLeft} className='right' />
            </p>
          </NavLink>
          <ul className='nav nav-treeview'>
            <NavItem>
              <NavLink tag={Link} to='#'>
                <FontAwesomeIcon icon={farCircle} className='nav-icon' />
                <p>ChartJS</p>
              </NavLink>
            </NavItem>
            <NavItem>
              <NavLink tag={Link} to='#'>
                <FontAwesomeIcon icon={farCircle} className='nav-icon' />
                <p>Flot</p>
              </NavLink>
            </NavItem>
            <NavItem>
              <NavLink tag={Link} to='#'>
                <FontAwesomeIcon icon={farCircle} className='nav-icon' />
                <p>Inline</p>
              </NavLink>
            </NavItem>
          </ul>
        </NavItem>

        <NavItem>
          <NavLink href='#'>
            <FontAwesomeIcon icon={faTree} className='nav-icon' />
            <p>
              UI Elements
              <FontAwesomeIcon icon={faAngleLeft} className='right' />
            </p>
          </NavLink>
          <ul className='nav nav-treeview'>
            <NavItem>
              <NavLink tag={Link} to='#'>
                <FontAwesomeIcon icon={farCircle} className='nav-icon' />
                <p>General</p>
              </NavLink>
            </NavItem>
            <NavItem>
              <NavLink tag={Link} to='#'>
                <FontAwesomeIcon icon={farCircle} className='nav-icon' />
                <p>Icons</p>
              </NavLink>
            </NavItem>
            <NavItem>
              <NavLink tag={Link} to='#'>
                <FontAwesomeIcon icon={farCircle} className='nav-icon' />
                <p>Buttons</p>
              </NavLink>
            </NavItem>
            <NavItem>
              <NavLink tag={Link} to='#'>
                <FontAwesomeIcon icon={farCircle} className='nav-icon' />
                <p>Sliders</p>
              </NavLink>
            </NavItem>
            <NavItem>
              <NavLink tag={Link} to='#'>
                <FontAwesomeIcon icon={farCircle} className='nav-icon' />
                <p>Modals & Alerts</p>
              </NavLink>
            </NavItem>
            <NavItem>
              <NavLink tag={Link} to='#'>
                <FontAwesomeIcon icon={farCircle} className='nav-icon' />
                <p>Navbar & Tabs</p>
              </NavLink>
            </NavItem>
            <NavItem>
              <NavLink tag={Link} to='#'>
                <FontAwesomeIcon icon={farCircle} className='nav-icon' />
                <p>Timeline</p>
              </NavLink>
            </NavItem>
            <NavItem>
              <NavLink tag={Link} to='#'>
                <FontAwesomeIcon icon={farCircle} className='nav-icon' />
                <p>Ribbons</p>
              </NavLink>
            </NavItem>
          </ul>
        </NavItem>

        <NavItem>
          <NavLink href='#'>
            <FontAwesomeIcon icon={faEdit} className='nav-icon' />
            <p>
              Forms
              <FontAwesomeIcon icon={faAngleLeft} className='right' />
            </p>
          </NavLink>
          <ul className='nav nav-treeview'>
            <NavItem>
              <NavLink tag={Link} to='#'>
                <FontAwesomeIcon icon={farCircle} className='nav-icon' />
                <p>General Elements</p>
              </NavLink>
            </NavItem>
            <NavItem>
              <NavLink tag={Link} to='#'>
                <FontAwesomeIcon icon={farCircle} className='nav-icon' />
                <p>Advanced Elements</p>
              </NavLink>
            </NavItem>
            <NavItem>
              <NavLink tag={Link} to='#'>
                <FontAwesomeIcon icon={farCircle} className='nav-icon' />
                <p>Editors</p>
              </NavLink>
            </NavItem>
            <NavItem>
              <NavLink tag={Link} to='#'>
                <FontAwesomeIcon icon={farCircle} className='nav-icon' />
                <p>Validation</p>
              </NavLink>
            </NavItem>
          </ul>
        </NavItem>

        <NavItem>
          <NavLink href='#'>
            <FontAwesomeIcon icon={faTable} className='nav-icon' />
            <p>
              Tables
              <FontAwesomeIcon icon={faAngleLeft} className='right' />
            </p>
          </NavLink>
          <ul className='nav nav-treeview'>
            <NavItem>
              <NavLink tag={Link} to='#'>
                <FontAwesomeIcon icon={farCircle} className='nav-icon' />
                <p>Simple Tables</p>
              </NavLink>
            </NavItem>
            <NavItem>
              <NavLink tag={Link} to='#'>
                <FontAwesomeIcon icon={farCircle} className='nav-icon' />
                <p>DataTables</p>
              </NavLink>
            </NavItem>
            <NavItem>
              <NavLink tag={Link} to='#'>
                <FontAwesomeIcon icon={farCircle} className='nav-icon' />
                <p>jsGrid</p>
              </NavLink>
            </NavItem>
          </ul>
        </NavItem>
      </NavSidebar>
    </MainSidebar>
  );
}

TransactionsTable = () => {
  const totalTransactions = transactions.length;

  const TableRow = (props) => {
    const { invoiceNumber, subscription, price, issueDate, dueDate, status } = props;
    const statusVariant = status === "Paid" ? "success"
      : status === "Due" ? "warning"
        : status === "Canceled" ? "danger" : "primary";

    return (
      <tr>
        <td>
          <Card.Link as={Link} to={Routes.Invoice.path} className="fw-normal">
            {invoiceNumber}
          </Card.Link>
        </td>
        <td>
          <span className="fw-normal">
            {subscription}
          </span>
        </td>
        <td>
          <span className="fw-normal">
            {issueDate}
          </span>
        </td>
        <td>
          <span className="fw-normal">
            {dueDate}
          </span>
        </td>
        <td>
          <span className="fw-normal">
            ${parseFloat(price).toFixed(2)}
          </span>
        </td>
        <td>
          <span className={`fw-normal text-${statusVariant}`}>
            {status}
          </span>
        </td>
        <td>
          <Dropdown as={ButtonGroup}>
            <Dropdown.Toggle as={Button} split variant="link" className="text-dark m-0 p-0">
              <span className="icon icon-sm">
                <FontAwesomeIcon icon={faEllipsisH} className="icon-dark" />
              </span>
            </Dropdown.Toggle>
            <Dropdown.Menu>
              <Dropdown.Item>
                <FontAwesomeIcon icon={faEye} className="me-2" /> View Details
              </Dropdown.Item>
              <Dropdown.Item>
                <FontAwesomeIcon icon={faEdit} className="me-2" /> Edit
              </Dropdown.Item>
              <Dropdown.Item className="text-danger">
                <FontAwesomeIcon icon={faTrashAlt} className="me-2" /> Remove
              </Dropdown.Item>
            </Dropdown.Menu>
          </Dropdown>
        </td>
      </tr>
    );
  };

  return (
    <Card border="light" className="table-wrapper table-responsive shadow-sm">
      <Card.Body className="pt-0">
        <Table hover className="user-table align-items-center">
          <thead>
            <tr>
              <th className="border-bottom">#</th>
              <th className="border-bottom">Bill For</th>
              <th className="border-bottom">Issue Date</th>
              <th className="border-bottom">Due Date</th>
              <th className="border-bottom">Total</th>
              <th className="border-bottom">Status</th>
              <th className="border-bottom">Action</th>
            </tr>
          </thead>
          <tbody>
            {transactions.map(t => <TableRow key={`transaction-${t.invoiceNumber}`} {...t} />)}
          </tbody>
        </Table>
        <Card.Footer className="px-3 border-0 d-lg-flex align-items-center justify-content-between">
          <Nav>
            <Pagination className="mb-2 mb-lg-0">
              <Pagination.Prev>
                Previous
              </Pagination.Prev>
              <Pagination.Item active>1</Pagination.Item>
              <Pagination.Item>2</Pagination.Item>
              <Pagination.Item>3</Pagination.Item>
              <Pagination.Item>4</Pagination.Item>
              <Pagination.Item>5</Pagination.Item>
              <Pagination.Next>
                Next
              </Pagination.Next>
            </Pagination>
          </Nav>
          <small className="fw-bold">
            Showing <b>{totalTransactions}</b> out of <b>25</b> entries
          </small>
        </Card.Footer>
      </Card.Body>
    </Card>
  );
}

AddVideoCard = ({
  setModalShow,
  setCurrentActivity,
  setScreenStatus,
  setOpenVideo,
  className,
  data,
  selectionStatus = false,
  setAddActivityPopUp,
}) => {
  const [changeAddActivityPopUp, setChangeAddActivityPopUp] = useState(false);
  const currikiUtility = classNames("curriki-utility-addvideo-card", className);
  const dispatch = useDispatch();
  const { activeOrganization } = useSelector((state) => state.organization);
  const primaryColor = getGlobalColor("--main-primary-color");
  return (
    <>
      <div className={currikiUtility}>
        <div
          className="addvideo-card-top"
          style={{
            backgroundImage: `url(${
              data.thumb_url?.includes("pexels.com")
                ? data.thumb_url
                : global.config.resourceUrl + data.thumb_url
            })`,
          }}
        >
          <div className="addvideo-card-dropdown">
            <DropDownEdit data={data} iconColor="white" />
          </div>
          <div className="addvideo-card-title">
            <h2>{data.title}</h2>
          </div>
        </div>
        <div className="addvideo-card-detail">
          <p>{data.description?.slice(0, 50)}</p>
        </div>

        <div className="addvideo-card-add-share">
          <div className="btn-box">
            <div
              className="addvideo-card-add-share-options"
              onClick={() => {
                setCurrentActivity(data.id);
                setModalShow(true);
              }}
            >
              <FontAwesomeIcon
                icon={faEye}
                style={{ marginRight: "6px" }}
                color={primaryColor}
              />
              View &nbsp;&nbsp;&nbsp;
            </div>
            <div
              onClick={() => {
                setCurrentActivity(data.id);
                setModalShow(true);
              }}
            ></div>
            <div
              onClick={async () => {
                toast.dismiss();
                toast.info("Loading Activity ...", {
                  className: "project-loading",
                  closeOnClick: false,
                  closeButton: false,
                  position: toast.POSITION.BOTTOM_RIGHT,
                  autoClose: 10000,
                  icon: "",
                });
                const result = await videoServices.videoh5pDetail(
                  activeOrganization.id,
                  data.id
                );
                if (result.activity?.brightcoveData) {
                  dispatch({
                    type: "EDIT_CMS_SCREEN",
                    payload: result.activity?.brightcoveData.accountId,
                  });
                  window.brightcoveAccountId =
                    result.activity?.brightcoveData.accountId;
                }

                toast.dismiss();
                dispatch({
                  type: "ADD_VIDEO_URL",
                  platform: "",
                });
                dispatch({
                  type: "SET_ACTIVE_VIDEO_SCREEN",
                  payload: result.activity,
                });

                setOpenVideo(true);
                setScreenStatus("AddVideo");
              }}
            >
              <FontAwesomeIcon
                icon={faEdit}
                style={{ marginRight: "6px" }}
                color={primaryColor}
              />
              Edit
            </div>
          </div>
        </div>
        {selectionStatus && (
          <div className="addvideo-selection-box">
            <input type="checkbox" />
            <span>Select</span>
          </div>
        )}
      </div>
    </>
  );
}