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

The following examples show how to use @fortawesome/free-solid-svg-icons#faEdit. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: organization.js    From climatescape.org with MIT License 6 votes vote down vote up 
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>
  )
}
Example #2
Source File: App.js    From lrc-staking-dapp with MIT License 6 votes vote down vote up 
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,
);
Example #3
Source File: Buttons.jsx    From signdocs with MIT License 6 votes vote down vote up 
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>
  );
}
Example #4
Source File: organization.js    From goodhere with MIT License 6 votes vote down vote up 
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>
  )
}
Example #5
Source File: Widget.jsx    From covid with GNU General Public License v3.0 6 votes vote down vote up 
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,
  },
})
Example #6
Source File: RecordsListPlacement.js    From GB-GCGC with MIT License 6 votes vote down vote up 
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>  
    )
    }
Example #7
Source File: RecordListuserstaff.js    From GB-GCGC with MIT License 6 votes vote down vote up 
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>  
        )
    }
Example #8
Source File: RecordList.js    From GB-GCGC with MIT License 6 votes vote down vote up 
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>  
    )
    }
Example #9
Source File: myteamcard.js    From ActiveLearningStudio-react-client with GNU Affero General Public License v3.0 6 votes vote down vote up 
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>
  );
}
Example #10
Source File: index.js    From gatsby-markdown-personal-website with MIT License 5 votes vote down vote up 
/* add any additional icon to the library */
library.add(fab, faLaptopCode, faDrawPolygon, faEdit, faEdit, faBullhorn, faMapMarkerAlt, faPhone, faPaperPlane);
Example #11
Source File: Task.js    From Todo-List with MIT License 5 votes vote down vote up 
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>
            </>
        )
    }
Example #12
Source File: activitycarddropdown.js    From ActiveLearningStudio-react-client with GNU Affero General Public License v3.0 5 votes vote down vote up 
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>
  );
}
Example #13
Source File: Widget.jsx    From covid with GNU General Public License v3.0 5 votes vote down vote up 
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,
  },
})
Example #14
Source File: Widget.jsx    From covid with GNU General Public License v3.0 5 votes vote down vote up 
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]} />
    ),
  },
})
Example #15
Source File: icon.js    From uptime-kuma with MIT License 5 votes vote down vote up 
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,
);
Example #16
Source File: SideBar.js    From GB-GCGC with MIT License 4 votes vote down vote up 
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>
)
Example #17
Source File: Component.js    From agenda with MIT License 4 votes vote down vote up 
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>
        );
    }
Example #18
Source File: DemoSidebar.jsx    From react-lte with MIT License 4 votes vote down vote up 
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>
  );
}
Example #19
Source File: Tables.js    From volt-react-dashboard with MIT License 4 votes vote down vote up 
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>
  );
}
Example #20
Source File: addvideocard.js    From ActiveLearningStudio-react-client with GNU Affero General Public License v3.0 4 votes vote down vote up 
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>
    </>
  );
}