reactstrap#Badge JavaScript Examples

The following examples show how to use reactstrap#Badge. 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: EducationCard.jsx    From developer-portfolio with Apache License 2.0 6 votes vote down vote up
EducationCard = ({ education }) => {
	return (
		<Fade left duration={2000} >
			<Card className="card-lift--hover shadow mt-4">
				<CardBody>
					<div className="d-flex px-3">
						<div className="pl-4">
							<h5 className="text-info">
								{education.schoolName}
							</h5>
							<h6>{education.subHeader}</h6>
							<Badge color="info" className="mr-1">
								{education.duration}
							</Badge>
							<p className="description mt-3">{education.desc}</p>
							<ul>
								{education.descBullets
									? education.descBullets.map((desc) => {
											return <li key={desc}>{desc}</li>;
									  })
									: null}
							</ul>
						</div>
					</div>
				</CardBody>
			</Card>
		</Fade>
	);
}
Example #2
Source File: Labels.jsx    From nodejs-rest-api-boilerplate with MIT License 6 votes vote down vote up
render() {
    return (
      <>
        <Col lg="5">
          <h3 className="h4 text-success font-weight-bold mb-5">Labels</h3>
          <Badge className="text-uppercase" color="primary" pill>
            Primary
          </Badge>
          <Badge className="text-uppercase" color="success" pill>
            Success
          </Badge>
          <Badge className="text-uppercase" color="danger" pill>
            Danger
          </Badge>
          <Badge className="text-uppercase" color="warning" pill>
            Warning
          </Badge>
          <Badge className="text-uppercase" color="info" pill>
            Info
          </Badge>
        </Col>
      </>
    );
  }
Example #3
Source File: EventItem.js    From DMS_React with GNU Affero General Public License v3.0 6 votes vote down vote up
EventItem =({data})=> {
  const {image, title, address, date} = data;

  return (
    <div className="media jr-featured-item">

      <div className="jr-featured-thumb">
        <img className="rounded-lg img-fluid" src={image} alt="..."/>
      </div>
      <div className="media-body jr-featured-content">
        <div className="jr-featured-content-left">
          <Badge className="jr-rounded-xs text-uppercase" color="info">Music concert</Badge>
          <h3 className="mb-2">{title}</h3>
          <div className="row-flex">
            <div className="media text-grey mb-1">
              <i className={`zmdi zmdi-pin jr-fs-lg mr-2 d-inline-flex align-middle`}/>
              <span className="media-body ml-1">{address}</span>
            </div>
          </div>
        </div>
        <div className="jr-featured-content-right jr-profile-content-right">
          <h2 className="text-primary mb-1">
            <i className={`zmdi zmdi-calendar jr-fs-lg mr-2 d-inline-flex align-middle`}/> <span
            className="d-inline-flex align-middle">{date}</span>
          </h2>
          <p className="text-primary text-truncate mt-sm-auto mb-0 pointer">Check in detail <i
            className={`zmdi zmdi-long-arrow-right jr-fs-xxl ml-1 ml-sm-2 d-inline-flex align-middle`}/>
          </p>
        </div>

      </div>
    </div>
  );
}
Example #4
Source File: ProjectsCell.js    From DMS_React with GNU Affero General Public License v3.0 6 votes vote down vote up
ProjectsCell = ({data}) => {
  const {id, name, date, status, color} = data;
  return (

    <tr
      tabIndex={-1}
      key={'projects-' + id}>

      <td className="max-width-100">
        <p className="text-truncate mb-0" data-test="name-component">{name}</p>
      </td>

      <td className="text-nowrap" data-test="date-component">{date}</td>
      <td>
        <Badge className="d-block" color={color} data-test="badge-component">{status}</Badge>
      </td>
      <td className="text-right">
        <IconButton className="icon-btn text-light p-1"><i className="zmdi zmdi-more-vert text-grey"/></IconButton>
      </td>
    </tr>

  );
}
Example #5
Source File: LteNavDropdown.jsx    From react-lte with MIT License 6 votes vote down vote up
LteNavDropdown = ({ icon, badgeText, badgeColor, children }) => {
  const [dropdownOpen, setDropdownOpen] = useState(false);
  const toggle = () => setDropdownOpen(!dropdownOpen);

  return (
    <Dropdown tag='li' isOpen={dropdownOpen} toggle={toggle}>
      <DropdownToggle nav>
        <FontAwesomeIcon icon={icon} />
        <Badge color={badgeColor} className='navbar-badge'>
          {badgeText}
        </Badge>
      </DropdownToggle>
      <DropdownMenu right className='dropdown-menu-lg'>
        {children}
      </DropdownMenu>
    </Dropdown>
  );
}
Example #6
Source File: Users.js    From id.co.moonlay-eworkplace-admin-web with MIT License 6 votes vote down vote up
function UserRow(props) {
  const user = props.user
  const userLink = `/users/${user.id}`

  const getBadge = (status) => {
    return status === 'Active' ? 'success' :
      status === 'Inactive' ? 'secondary' :
        status === 'Pending' ? 'warning' :
          status === 'Banned' ? 'danger' :
            'primary'
  }

  return (
    <tr key={user.id.toString()}>
      <th scope="row"><Link to={userLink}>{user.id}</Link></th>
      <td><Link to={userLink}>{user.name}</Link></td>
      <td>{user.registered}</td>
      <td>{user.role}</td>
      <td><Link to={userLink}><Badge color={getBadge(user.status)}>{user.status}</Badge></Link></td>
    </tr>
  )
}
Example #7
Source File: Job.component.js    From hiring-system with GNU General Public License v3.0 5 votes vote down vote up
Job = ({ job }) => {
  const {
    userId,
    jobTitle,
    jobCreatorLogo,
    jobLocation,
    // jobApplyURL,
    jobCreator,
    dateModified,
    jobDescription,
    jobWorkType,
  } = job;

  const [dropdownOpen, setDropdownOpen] = useState(false);

  const toggle = () => setDropdownOpen((prevState) => !prevState);

  return (
    <ListGroupItem className="job-card" key={userId}>
      <div className="d-flex flex-column">
        <div className="job-card--header mb-3">
          {jobCreatorLogo ? (
            <img className="job-image" src={jobCreatorLogo} alt={jobCreator} />
          ) : (
            <h3 className="company mr-4">{jobCreator}</h3>
          )}

          <span className="text-tiny job-time">
            {moment(dateModified).fromNow()}
          </span>

          <Dropdown
            className="drop-down-icon"
            isOpen={dropdownOpen}
            toggle={toggle}
          >
            <DropdownToggle>
              <FontAwesomeIcon icon={faEllipsisV} />
            </DropdownToggle>
            <DropdownMenu right>
              <DropdownItem>
                <FontAwesomeIcon icon={faHeart} className="mr-1" /> Save Job
              </DropdownItem>
              <DropdownItem>
                <FontAwesomeIcon icon={faBan} className="mr-2" />
                Not Interested
              </DropdownItem>
            </DropdownMenu>
          </Dropdown>
        </div>

        <div className="mr-auto">
          <h4 className="job-card--title text-dark">{jobTitle}</h4>
          <h6 className="text-muted">
            <FontAwesomeIcon icon={faMapMarkerAlt} />
            <span className="ml-2">{jobLocation}</span>
          </h6>

          <p>
            {jobDescription.replace(/(<([^>]+)>)/gi, "").substring(0, 100)} ...
          </p>

          <Badge className="p-2 mt-1 mr-2" color="primary">
            {jobWorkType}
          </Badge>
        </div>
      </div>
    </ListGroupItem>
  );
}
Example #8
Source File: index.js    From tunnel-tool with MIT License 5 votes vote down vote up
Label = ({ color = "info", label: { name, value } }) => (
  <Badge color={color} pill>
    <small>
      <Icon /> {name}:<b>{value}</b>
    </small>
  </Badge>
)
Example #9
Source File: index.js    From tunnel-tool with MIT License 5 votes vote down vote up
OfflineLabel = () => (
  <small>
    <Badge color={"secondary"} pill>
      offline
    </Badge>
  </small>
)
Example #10
Source File: index.js    From tunnel-tool with MIT License 5 votes vote down vote up
OnlineLabel = () => (
  <small>
    <Badge color={"success"} pill>
      online
    </Badge>
  </small>
)
Example #11
Source File: NotificationsPanel.js    From study-chain with MIT License 5 votes vote down vote up
/* istanbul ignore next */
	render() {
		const { classes, notifications } = this.props;
		if (notifications.length === 0) {
			return (
				<div className={classes.panel}>
					<div className={classes.root}>
						<List component="nav" className={classes.panel}>
							<ListItem button>
								<Typography variant="title" className={classes.panel}>
									NO NOTIFICATIONS
								</Typography>
							</ListItem>
						</List>
					</div>
				</div>
			);
		}

		/* istanbul ignore next */
		return (
			<div className={classes.panel}>
				<div className={classes.root}>
					<List component="nav" className={classes.panel}>
						{notifications.map((notify, index) => (
							<div>
								<ListItem key={index} button className={classes.panel}>
									{this.avatarIcon(notify.type, classes)}
									<ListItemText
										className={classes.panel}
										primary={notify.title}
										secondary={notify.message}
									/>
								</ListItem>
								<Badge className={classes.badge}>
									<Timeago
										className={classes.time}
										date={notify.time}
										live={false}
										minPeriod={60}
									/>
								</Badge>
							</div>
						))}
					</List>
				</div>
			</div>
		);
	}
Example #12
Source File: TimelineStream.js    From study-chain with MIT License 5 votes vote down vote up
render() {
    const { notifications, classes } = this.props;
    const { blockHash, dialogOpenBlockHash } = this.state;
    return (
      <div>
        <div className={classes.scrollable}>
          <Timeline>
            {notifications.map(item => (
              <TimelineEvent
                key={item.title}
                title={item.title}
                icon={<FontAwesome name="cube" />}
                iconColor="#0D3799"
                container="card"
                className={classes.event}
                titleStyle={{ fontWeight: 'bold' }}
                style={{ width: '65%' }}
                cardHeaderStyle={{
                  backgroundColor: '#6283D0',
                  fontSize: '13pt'
                }}
                contentStyle={{
                  backgroundColor: 'transparent'
                }}
                buttons={
                  <a
                    data-command="block-link"
                    href="#/"
                    onClick={() =>
                      this.handleDialogOpenBlockHash(item.blockhash)
                    }
                  >
                    <img
                      src={blockOpen}
                      alt="View Blocks"
                      className={classes.open}
                    />
                  </a>
                }
              >
                <Typography variant="body1">
                  <b className={classes.text}> Channel Name:</b>{' '}
                  {item.channelName} <br />
                  <b className={classes.text}> Datahash:</b> {item.datahash}{' '}
                  <br />
                  <b className={classes.text}> Number of Tx:</b> {item.txcount}
                </Typography>
                <h5 className={classes.text}>
                  <Badge className={classes.text}>
                    <Timeago
                      className={classes.text}
                      date={item.time}
                      live={false}
                      minPeriod={60}
                    />
                  </Badge>
                </h5>
              </TimelineEvent>
            ))}
          </Timeline>
        </div>

        <Dialog
          open={dialogOpenBlockHash}
          onClose={this.handleDialogCloseBlockHash}
          fullWidth
          maxWidth="md"
        >
          <BlockView
            blockHash={blockHash}
            onClose={this.handleDialogCloseBlockHash}
          />
        </Dialog>
      </div>
    );
  }
Example #13
Source File: RequestsSlide.js    From covidsos with MIT License 5 votes vote down vote up
render() {
    const {request} = this.state;
    const {isAuthorisedUser, currentUserID} = this.props;
    const name = request.requestor_name || 'Someone';
    const location = request.full_address || request.location || request.geoaddress || request.where
        || 'NA';
    const why = request.why || request.what;
    const requestStr = request.request || 'NA';
    const source = request.source_org || request.source || 'NA';
    const helpText = this.getHelpText(name, location, why, requestStr);
    const ownedTask = request.managed_by_id === currentUserID;
    return (
        <>
          <Card className='full-height-card' key={(request.r_id || request.id)}>
            <CardHeader hidden={!isAuthorisedUser}>
              <div>
                <CardText>Managed By: <Badge color={ownedTask ? "success" : "primary"}>{ownedTask
                    ? 'You' : (request.managed_by || 'Admin')}</Badge></CardText>
                <CardText>
                  <Button outline color={ownedTask ? "success" : "primary"} size="sm"
                          disabled={ownedTask}
                          onClick={() => this.handleAssignToMeAsManager(ownedTask, request,
                              parseInt(currentUserID))}>
                    {ownedTask ? "Assigned" : "Assign to me"}
                  </Button>
                </CardText>
              </div>
            </CardHeader>
            <CardBody>
              <CardTitle className="h3 mb-0">{why || requestStr}</CardTitle>
              <CardText className="text-gray text-custom-small">
                Requested by {name} at {request.request_time}
              </CardText>
              {displayRequestCardDetails('Address', location)}
              {displayRequestCardDetails('Received via', source)}
            </CardBody>
            <CardFooter className="pt-0 pb-2">
              <Badge color="warning">{request.type}</Badge>
            </CardFooter>
            <CardFooter className="pt-2">
              <Row>
                <Col xs={6}>
                  {getShareButtons(request.accept_link, helpText)}
                </Col>
                <Col xs={{size: 3, offset: 1}} className="text-center">
                  <Button className="btn-link border-0 px-2 text-primary" size="md"
                          onClick={() => this.props.openPopup(request,
                              {name, location, why, requestStr, source, helpText})}>
                    See Details
                  </Button>
                </Col>
              </Row>
            </CardFooter>
          </Card>
        </>
    );
  }
Example #14
Source File: Badges.js    From id.co.moonlay-eworkplace-admin-web with MIT License 5 votes vote down vote up
render() {
    return (
      <div className="animated fadeIn">
        <Row>
          <Col xs="12" md="6">
            <Card>
              <CardHeader>
                <i className="fa fa-align-justify"></i><strong>Badges</strong>
                <div className="card-header-actions">
                  <a href="https://reactstrap.github.io/components/badge/" rel="noreferrer noopener" target="_blank" className="card-header-action">
                    <small className="text-muted">docs</small>
                  </a>
                </div>
              </CardHeader>
              <CardBody>
                <h1>Heading <Badge color="secondary">New</Badge></h1>
                <h2>Heading <Badge color="secondary">New</Badge></h2>
                <h3>Heading <Badge color="secondary">New</Badge></h3>
                <h4>Heading <Badge color="secondary">New</Badge></h4>
                <h5>Heading <Badge color="secondary">New</Badge></h5>
                <h6>Heading <Badge color="secondary">New</Badge></h6>
              </CardBody>
              <CardFooter>
                <Button color="primary" outline>
                  Notifications <Badge color="secondary" pill style={{ position: 'static' }}>9</Badge>
                </Button>
              </CardFooter>
            </Card>
          </Col>
          <Col xs="12" md="6">
            <Card>
              <CardHeader>
                <i className="fa fa-align-justify"></i><strong>Badges</strong> <small>contextual variations</small>
              </CardHeader>
              <CardBody>
                <Badge className="mr-1" color="primary">Primary</Badge>
                <Badge className="mr-1" color="secondary">Secondary</Badge>
                <Badge className="mr-1" color="success">Success</Badge>
                <Badge className="mr-1" color="danger">Danger</Badge>
                <Badge className="mr-1" color="warning">Warning</Badge>
                <Badge className="mr-1" color="info">Info</Badge>
                <Badge className="mr-1" color="light">Light</Badge>
                <Badge className="mr-1" color="dark">Dark</Badge>
              </CardBody>
            </Card>
            <Card>
              <CardHeader>
                <i className="fa fa-align-justify"></i><strong>Badges</strong> <small>pill badges</small>
              </CardHeader>
              <CardBody>
                <Badge className="mr-1" color="primary" pill>Primary</Badge>
                <Badge className="mr-1" color="secondary" pill>Secondary</Badge>
                <Badge className="mr-1" color="success" pill>Success</Badge>
                <Badge className="mr-1" color="danger" pill>Danger</Badge>
                <Badge className="mr-1" color="warning" pill>Warning</Badge>
                <Badge className="mr-1" color="info" pill>Info</Badge>
                <Badge className="mr-1" color="light" pill>Light</Badge>
                <Badge className="mr-1" color="dark" pill>Dark</Badge>
              </CardBody>
            </Card>
            <Card>
              <CardHeader>
                <i className="fa fa-align-justify"></i><strong>Badges</strong> <small>links</small>
              </CardHeader>
              <CardBody>
                <Badge className="mr-1" href="#" color="primary">Primary</Badge>
                <Badge className="mr-1" href="#" color="secondary">Secondary</Badge>
                <Badge className="mr-1" href="#" color="success">Success</Badge>
                <Badge className="mr-1" href="#" color="danger">Danger</Badge>
                <Badge className="mr-1" href="#" color="warning">Warning</Badge>
                <Badge className="mr-1" href="#" color="info">Info</Badge>
                <Badge className="mr-1" href="#" color="light">Light</Badge>
                <Badge className="mr-1" href="#" color="dark" pill>Dark</Badge>
              </CardBody>
            </Card>
          </Col>
        </Row>
      </div>
    );
  }
Example #15
Source File: index.js    From gobench with Apache License 2.0 4 votes vote down vote up
render() {
    return (
      <div className="row">
        <div className="col-lg-6">
          <h5 className="mb-4">
            <strong>Base</strong>
          </h5>
          <div className="mb-5">
            <h1>
              Example heading <Badge color="light">New</Badge>
            </h1>
            <h2>
              Example heading <Badge color="light">New</Badge>
            </h2>
            <h3>
              Example heading <Badge color="light">New</Badge>
            </h3>
            <h4>
              Example heading <Badge color="light">New</Badge>
            </h4>
            <h5>
              Example heading <Badge color="light">New</Badge>
            </h5>
            <h6>
              Example heading <Badge color="light">New</Badge>
            </h6>
          </div>
        </div>
        <div className="col-lg-6">
          <h5 className="mb-4">
            <strong>In Buttons</strong>
          </h5>
          <div className="mb-5">
            <Button color="primary">
              Notifications <Badge color="light">4</Badge>
            </Button>
          </div>
        </div>
        <div className="col-lg-6">
          <h5 className="mb-4">
            <strong>Colors</strong>
          </h5>
          <div className="mb-5">
            <Badge color="primary" className="mr-2">
              Primary
            </Badge>
            <Badge color="secondary" className="mr-2">
              Secondary
            </Badge>
            <Badge color="success" className="mr-2">
              Success
            </Badge>
            <Badge color="danger" className="mr-2">
              Danger
            </Badge>
            <Badge color="warning" className="mr-2">
              Warning
            </Badge>
            <Badge color="info" className="mr-2">
              Info
            </Badge>
            <Badge color="light" className="mr-2">
              Light
            </Badge>
            <Badge color="dark" className="mr-2">
              Dark
            </Badge>
          </div>
        </div>
        <div className="col-lg-6">
          <h5 className="mb-4">
            <strong>Pills</strong>
          </h5>
          <div className="mb-5">
            <Badge color="primary" pill className="mr-2">
              Primary
            </Badge>
            <Badge color="secondary" pill className="mr-2">
              Secondary
            </Badge>
            <Badge color="success" pill className="mr-2">
              Success
            </Badge>
            <Badge color="danger" pill className="mr-2">
              Danger
            </Badge>
            <Badge color="warning" pill className="mr-2">
              Warning
            </Badge>
            <Badge color="info" pill className="mr-2">
              Info
            </Badge>
            <Badge color="light" pill className="mr-2">
              Light
            </Badge>
            <Badge color="dark" pill className="mr-2">
              Dark
            </Badge>
          </div>
        </div>
        <div className="col-lg-6">
          <h5 className="mb-4">
            <strong>Links</strong>
          </h5>
          <div className="mb-5">
            <Badge href="#" color="primary" className="mr-2">
              Primary
            </Badge>
            <Badge href="#" color="secondary" className="mr-2">
              Secondary
            </Badge>
            <Badge href="#" color="success" className="mr-2">
              Success
            </Badge>
            <Badge href="#" color="danger" className="mr-2">
              Danger
            </Badge>
            <Badge href="#" color="warning" className="mr-2">
              Warning
            </Badge>
            <Badge href="#" color="info" className="mr-2">
              Info
            </Badge>
            <Badge href="#" color="light" className="mr-2">
              Light
            </Badge>
            <Badge href="#" color="dark" className="mr-2">
              Dark
            </Badge>
          </div>
        </div>
      </div>
    )
  }
Example #16
Source File: help.js    From hivemind with Apache License 2.0 4 votes vote down vote up
Page = () => (
  <Row>
    <Col
      xs="auto"
      md={3}
      tabIndex="1"
      style={{ height: '90vh', overflowY: 'scroll' }}
    >
      <h3>Navigation</h3>
      <Nav vertical id={'nav'} className={'navbar-light bg-light'}>
        <NavLink href="#intro">Introduction</NavLink>
        <NavLink href="#at-a-glance">At a Glance</NavLink>
        <Nav vertical>
          <NavLink href="#key-points" className={'ml-3'}>
            Key Points
          </NavLink>
        </Nav>
        <NavLink href="#quick-start">Quick Start</NavLink>
        <Nav vertical>
          <NavLink href="#logging-in" className={'ml-3'}>
            Logging In
          </NavLink>
          <NavLink href="#create-mind-map" className={'ml-3'}>
            Creating a mind map
          </NavLink>
          <NavLink href="#create-child-node" className={'ml-3'}>
            Creating a (child) node
          </NavLink>
          <NavLink href="#delete-node" className={'ml-3'}>
            Deleting a node
          </NavLink>
          <NavLink href="#edit-node" className={'ml-3'}>
            Editing a node
          </NavLink>
          <NavLink href="#view-node" className={'ml-3'}>
            Viewing a node
          </NavLink>
          <NavLink href="#hide-node" className={'ml-3'}>
            Hiding a node
          </NavLink>
          <NavLink href="#reveal-node" className={'ml-3'}>
            Revealing (Un-hiding) a node (sub-tree)
          </NavLink>
          <NavLink href="#time-travel" className={'ml-3'}>
            Time travel
          </NavLink>
          <Nav vertical>
            <NavLink href="#timeline" className={'ml-5'}>
              Using the Timeline
            </NavLink>
            <NavLink href="#playback" className={'ml-5'}>
              Using the Playback Buttons
            </NavLink>
          </Nav>
          <NavLink href="#search" className={'ml-3'}>
            Searching
          </NavLink>
          <NavLink href="#rename" className={'ml-3'}>
            Renaming a mind map
          </NavLink>
          <NavLink href="#fit" className={'ml-3'}>
            Fit on canvas
          </NavLink>
          <NavLink href="#show-all" className={'ml-3'}>
            Show All
          </NavLink>
        </Nav>
      </Nav>
    </Col>
    <Col
      xs="auto"
      md={9}
      tabIndex="0"
      style={{ height: '90vh', overflowY: 'scroll' }}
    >
      <Jumbotron>
        <h1 id={'intro'}>Introduction</h1>
        <p>
          Hivemind is a free tool that lets you create mind maps in your
          browser. It supports time-travel (through the change history of the
          mind map), tagging specific time points (
          <Badge color="secondary">Planned</Badge>) and collaborative editing (
          <Badge color="secondary">Planned</Badge>).
        </p>

        <h1 id={'at-a-glance'}>At a Glance</h1>
        <p>
          Each mind map is modelled as a tree, ie. it has a single root node,
          and all other nodes are descendants of this root node through a single
          hierarchy. There are no cases of multiple parents, cycles, loops
          (self-joining edges), parallel edges or orphaned nodes.
        </p>

        <CollapsibleExample>
          <Card className={'mb-4'}>
            <CardImg
              top
              width="100%"
              src="/img/help/Screenshot_2021-03-28 Hivemind.png"
              alt="Example Mind Map"
            />
            <CardBody>
              <CardTitle tag="h5">An example mind map</CardTitle>
              <CardSubtitle tag="h6" className="mb-2 text-muted">
                Tree structure with a single root node.
              </CardSubtitle>
              <CardText>
                This tree is 3 levels deep. Each node can have one or more
                children, but exactly one parent (except the root node, which
                has none). The timeline at the bottom shows at what points this
                mind map was modified.
              </CardText>
            </CardBody>
          </Card>
        </CollapsibleExample>

        <p>
          Each node in the mindmap is a container for information. There is a
          title, a summary and a content field. This node is connected to
          exactly one parent by an edge (except when it is the root node), and
          can optionally have one or mode child nodes. The edges themselves do
          not carry any information at present, other than which nodes they
          connect.
        </p>

        <CollapsibleExample>
          <Card className={'mb-4'}>
            <CardImg
              top
              width="100%"
              src="/img/help/Screenshot_2021-03-28-1 Hivemind.png"
              alt="Node Details"
            />
            <CardBody>
              <CardTitle tag="h5">Expanded view of a node</CardTitle>
              <CardSubtitle tag="h6" className="mb-2 text-muted">
                Accessed by a context menu upon clicking the node.
              </CardSubtitle>
              <CardText>
                Apart from the title, summary and content, a few other bits of
                information are displayed, like who created/last updated the
                node, and where the node sits in the overall hierarchy.
              </CardText>
            </CardBody>
          </Card>
        </CollapsibleExample>

        <h2 id={'key-points'}>Key Points</h2>
        <p>
          Every write operation that is performed on a node
          (create/update/delete) is recorded permanently in a time-travelling
          database, allowing for point-in-time lookups of any historic version
          of a single node or the graph as a whole.
        </p>

        <ol>
          <li>
            The root node is special - it cannot be deleted, and is the only
            node without a parent.
          </li>
          <li className={'text-danger'}>
            Whenever a node is deleted, the entire subtree under it is also
            deleted in order to ensure there are no orphaned nodes.
          </li>
          <li>
            Only users with edit or admin access can perform write operations on
            the tree.
          </li>
          <li>
            <Badge color="secondary">Planned</Badge> A user with admin access
            can additionally share the mindmap with other users (by
            granting/revoking read/write/admin access) or make it publicly
            (in)visible (read-only).
          </li>
          <li>
            <Badge color="secondary">Planned</Badge> Only an admin user can
            delete a mind map.
          </li>
          <li className={'text-danger'}>
            Access control is <strong>NOT</strong> modelled temporally, ie. if
            your access to a mind map is revoked, you lose access to ALL its
            history, not just from the time of revocation. Conversely, if you
            are granted access to a mind map, you gain access to its{' '}
            <strong>ENTIRE</strong> history, not just from now onwards.
          </li>
        </ol>

        <h1 id={'quick-start'}>Quick Start</h1>
        <h2 id={'logging-in'}>Logging in</h2>
        <CollapsibleExample>
          <Card className={'mb-4'}>
            <CardImg
              top
              width="100%"
              src="/img/help/Screenshot_2021-03-28-2 Hivemind.png"
              alt="Login Prompt"
            />
            <CardBody>
              <CardTitle tag="h5">Login Prompt</CardTitle>
              <CardSubtitle tag="h6" className="mb-2 text-muted">
                Login via email or an external authentication provider.
              </CardSubtitle>
              <CardText>
                Anonymous users must first login to start creating mind maps.
              </CardText>
            </CardBody>
          </Card>
        </CollapsibleExample>

        <ul>
          <li>
            Go the the Hivemind{' '}
            <Link href={'/'}>
              <a>home</a>
            </Link>{' '}
            page.
          </li>
          <li>
            If you&apos;re not logged in, you&apos;ll see a login prompt as shown in the
            example above.
          </li>
          <li>
            Use an email (that you own) or one of the other providers (currently
            Google, GitHub) to sign in.
          </li>
          <li>
            If you&apos;re signing in for the first time, you&apos;ll have to perform a
            few extra steps, either to set your password, or to authorize
            Hivemind with the external provider.
          </li>
          <li>
            Once you&apos;ve signed in, you&apos;ll be redirected to the list of mind maps
            that you own.
          </li>
        </ul>

        <h2 id={'create-mind-map'}>Creating a mind map</h2>
        <CollapsibleExample>
          <Card className={'mb-4'}>
            <CardImg
              top
              width="100%"
              src="/img/help/Screenshot_2021-03-28-3 Hivemind.png"
              alt="Login Prompt"
            />
            <CardBody>
              <CardTitle tag="h5">Create a Mind Map</CardTitle>
              <CardSubtitle tag="h6" className="mb-2 text-muted">
                Accessed from the mind maps{' '}
                <Link href={'/mmaps'}>
                  <a>list</a>
                </Link>{' '}
                page.
              </CardSubtitle>
              <CardText>
                Click on the{' '}
                <Button color="success" size="sm" id="create">
                  <Plus /> Create
                </Button>{' '}
                button. Then just type a name and hit ⏎.
              </CardText>
            </CardBody>
          </Card>
        </CollapsibleExample>

        <ul>
          <li>
            Go to the mind maps{' '}
            <Link href={'/mmaps'}>
              <a>list</a>
            </Link>{' '}
            page.
          </li>
          <li>
            Click on the{' '}
            <Button color="success" size="sm" id="create">
              <Plus /> Create
            </Button>{' '}
            button.
          </li>
          <li>Type a name and hit ⏎ (&lt;Enter&gt;).</li>
          <li>
            <strong>
              The first node in the mind map will inherit its title from the
              mind map&apos;s name.
            </strong>
          </li>
        </ul>

        <h2 id={'create-child-node'}>Creating a (child) node</h2>
        <p>
          Each node (except the root node) is a child of exactly one other node.
          While the root node is automatically created for you when you create
          the mind map, every other node must be created as a descendant of the
          root node by accessing a context menu within the mind map canvas (the
          black area). This context menu is available on all nodes, but its
          contents could vary depending on a number of factors. The &lsquo;create
          child&rsquo; option is available, provided:
        </p>

        <ol>
          <li>The user has &lsquo;admin&rsquo; or &lsquo;write&rsquo; access to the mind map, and</li>
          <li>
            The mind map is being viewed in &lsquo;write&rsquo; mode (i.e., not in &lsquo;lookback
            mode&rsquo; - to be discussed later).
          </li>
        </ol>

        <CollapsibleExample>
          <CreateChildCarousel />
        </CollapsibleExample>

        <ul>
          <li>Click on the node under which you wish to create the child.</li>
          <li>
            Select the &lsquo;<Plus /> Child&rsquo; option.
          </li>
          <li>Type a name and hit ⏎ (&lt;Enter&gt;).</li>
          <li>The new node will show up under the node selected above.</li>
        </ul>

        <h2 id={'delete-node'}>Deleting a node</h2>
        <p>
          All nodes (except the root node) can be deleted. Upon deletion, the
          entire sub-tree under the deleted node is also deleted. The &lsquo;delete
          node&rsquo; option is available, provided:
        </p>

        <ol>
          <li>The user has &lsquo;admin&rsquo; or &lsquo;write&rsquo; access to the mind map,</li>
          <li>
            The mind map is being viewed in &lsquo;write&rsquo; mode (i.e., not in &lsquo;lookback
            mode&rsquo; - to be discussed later), and
          </li>
          <li>The node is not the root node.</li>
        </ol>

        <CollapsibleExample>
          <Card className={'mb-4'}>
            <CardImg
              top
              width="100%"
              src="/img/help/Screenshot_2021-03-28-6 Hivemind.png"
              alt="Delete a node"
            />
            <CardBody>
              <CardTitle tag="h5">Delete a Node</CardTitle>
              <CardSubtitle tag="h6" className="mb-2 text-muted">
                Accessed by clicking on the &lsquo;<Trash2 /> Del&rsquo; option from the
                context menu.
              </CardSubtitle>
              <CardText>
                Confirm delete operation to get rid of the node (and all of its
                descendants, if present).
              </CardText>
            </CardBody>
          </Card>
        </CollapsibleExample>
        <ul>
          <li>Click on the node that you would like to remove.</li>
          <li>
            Select the &lsquo;<Trash2 /> Del&rsquo; option.
          </li>
          <li>
            Confirm that you want to delete the node by clicking the{' '}
            <Button size="sm" color="danger">
              <Trash2 /> Delete
            </Button>{' '}
            button.
          </li>
        </ul>

        <h2 id={'edit-node'}>Editing a node</h2>
        <p>
          All nodes can be edited. The &lsquo;edit node&rsquo; option is available,
          provided:
        </p>

        <ol>
          <li>The user has &lsquo;admin&rsquo; or &lsquo;write&rsquo; access to the mind map, and</li>
          <li>
            The mind map is being viewed in &lsquo;write&rsquo; mode (i.e., not in &lsquo;lookback
            mode&rsquo; - to be discussed later).
          </li>
        </ol>

        <CollapsibleExample>
          <Card className={'mb-4'}>
            <CardImg
              top
              width="100%"
              src="/img/help/Screenshot_2021-03-28-7 Hivemind.png"
              alt="Edit a node"
            />
            <CardBody>
              <CardTitle tag="h5">Edit a Node</CardTitle>
              <CardSubtitle tag="h6" className="mb-2 text-muted">
                Accessed by clicking on the &lsquo;<Edit3 /> Edit&rsquo; option from the
                context menu.
              </CardSubtitle>
              <CardText>
                Edit one or more of the &lsquo;title&rsquo;, &lsquo;summary&rsquo; and &lsquo;content&rsquo; fields,
                and click the{' '}
                <Button color="primary" size="sm">
                  <Save /> Save
                </Button>{' '}
                button.
              </CardText>
            </CardBody>
          </Card>
        </CollapsibleExample>
        <ul>
          <li>Click on the node that you would like to edit.</li>
          <li>
            Select the &lsquo;<Edit3 /> Edit&rsquo; option.
          </li>
          <li>
            The popup screen will appear with a title, summary and content of
            the node.
          </li>
          <li>
            Modify one or more of the attributes as required as click on&nbsp;
            <Button color="primary" size="sm">
              <Save /> Save
            </Button>
            .
          </li>
        </ul>

        <h2 id={'view-node'}>Viewing a node</h2>
        <CollapsibleExample>
          <Card className={'mb-4'}>
            <CardImg
              top
              width="100%"
              src="/img/help/Screenshot_2021-03-28-1 Hivemind.png"
              alt="View a node"
            />
            <CardBody>
              <CardTitle tag="h5">View a Node</CardTitle>
              <CardSubtitle tag="h6" className="mb-2 text-muted">
                Accessed by clicking on the &lsquo;<Eye /> View&rsquo; option from the
                context menu.
              </CardSubtitle>
              <CardText>
                View the title, summary and content of the node. Also shows its
                position in the hierarchy and who created/last updated it.
              </CardText>
            </CardBody>
          </Card>
        </CollapsibleExample>
        <ul>
          <li>Click on the node that you would like to view.</li>
          <li>
            Select the &lsquo;<Eye /> View&rsquo; option.
          </li>
          <li>
            The popup screen will appear with a title, summary and content of
            the node.
          </li>
        </ul>

        <h2 id={'hide-node'}>Hiding a node</h2>
        <p>
          Each node (except the root node) has an option to be hidden from
          display on the canvas. This can be useful to temporarily remove
          clutter when a large number of nodes are on display. Upon hiding, the
          entire sub-tree under the node is also hidden. To indicate that a node
          was hidden, its parent is marked in a grey/black shaded background.
          The hidden node (and all its descendants) can be revealed using a menu
          option under its parent.
        </p>

        <CollapsibleExample>
          <HideCarousel />
        </CollapsibleExample>

        <ul>
          <li>Click on the node which you wish to hide.</li>
          <li>
            Select the &lsquo;<EyeOff /> Hide&rsquo; option.
          </li>
          <li>
            Hides the entire sub-tree under this node (as well as the node
            itself).
          </li>
          <li>Shades the parent to indicate hidden children.</li>
        </ul>

        <h2 id={'reveal-node'}>Revealing (Un-hiding) a node (sub-tree)</h2>
        <p>
          A hidden node (and its descendants) is indicated by a shaded
          background on its parent. To reveal its sub-tree and render them back
          onto the canvas, a menu option is added to the parent (only for
          parents with hidden children). Clicking on this reveals (un-hides) the{' '}
          <strong>entire sub-tree under the parent</strong>.
        </p>

        <CollapsibleExample>
          <RevealCarousel />
        </CollapsibleExample>

        <ul>
          <li>Click on the (shaded) node whose children you wish to reveal.</li>
          <li>
            Select the &lsquo;<Eye /><ArrowDownRight /> Reveal&rsquo; option.
          </li>
          <li>
            Reveals the <strong>entire sub-tree under this node</strong>.
          </li>
          <li>Un-shades the node to indicate no hidden children.</li>
        </ul>

        <h2 id={'time-travel'}>Time travel</h2>
        <p>
          Hivemind can <strong>time-travel</strong>. What this means is, as you
          keep changing the mindmap through create/edit/delete operations,
          Hivemind keeps track of all these changes and retains a history of all
          the revisions of the mind map as a whole. This gives users of Hivemind
          the unique ability to rewind back to any point in time through the
          history of the mind map, and view it as it was at that time. This is
          achieved either by using the timeline component (below the canvas) or
          the playback buttons (in the menu bar above the canvas). See the image
          below.
        </p>

        <CollapsibleExample>
          <Card className={'mb-4'}>
            <CardImg
              top
              width="100%"
              src="/img/help/Screenshot_2021-03-28-10 Hivemind.png"
              alt="Time Travel Controls"
            />
            <CardBody>
              <CardTitle tag="h5">Time Travel</CardTitle>
              <CardSubtitle tag="h6" className="mb-2 text-muted">
                Use the playback buttons or the timeline.
              </CardSubtitle>
              <CardText>
                Travel back/forth through the history of changes to the mind
                map, and view it as it was at any point in time through its
                lifecycle.
              </CardText>
            </CardBody>
          </Card>
        </CollapsibleExample>

        <p>
          Whenever the user travels through time to look back at a historical
          version of the mind map, it is said to be in{' '}
          <strong>&lsquo;lookback mode&rsquo;</strong>, and all modifications are disabled
          (since its history is treated as immutable). This is indicated in
          three ways:
        </p>

        <ol>
          <li>
            A <code>timestamp</code> query parameter in the URL, which also
            serves as a permalink to this point-in-time version of the mind map,
          </li>
          <li>
            A button at the top right of the menu bar, which shows a{' '}
            <span className={'text-secondary'}>
              <Lock />
            </span>{' '}
            symbol (otherwise showing a{' '}
            <span className={'text-danger'}>
              <Unlock />
            </span>{' '}
            symbol when in &lsquo;write mode&rsquo;),
          </li>
          <li>
            A grey border around the canvas (which is otherwise red in &lsquo;write
            mode&rsquo;).
          </li>
        </ol>

        <p>
          <strong>
            While the mind map is in &lsquo;lookback mode&rsquo;, it cannot be edited.
          </strong>
        </p>

        <h3 id={'timeline'}>Using the Timeline</h3>
        <p>
          The timeline is the component displayed at the bottom of the mind map
          canvas, that shows a time series of write events that took place on
          the mind map, in chronological order. It has the following properties:
        </p>
        <ol>
          <li>
            The timeline can zoom in and out. This is manually achieved by
            scrolling while the cursor is on the timeline (or using pinch zoom
            on a touchscreen).
          </li>
          <li>
            When fully zoomed out, the timeline fits all events of the mind map.
            It cannot be zoomed out beyond the boundaries defined by the first
            and the last events of the mind map.
          </li>
          <li>When fully zoomed in, it has a resolution of 1 minute.</li>
          <li>
            Events are color-coded to depict their type. A &lsquo;create&rsquo; event is{' '}
            <span className={'text-success'}>green</span>, an &lsquo;update&rsquo; event is{' '}
            <span className={'text-primary'}>blue</span> and a &lsquo;delete&rsquo; event is{' '}
            <span className={'text-danger'}>red</span>.
          </li>
          <li>
            When two or more events get too close together on the timeline to be
            clearly rendered (ie. they start overlapping), they are clubbed
            together in a &lsquo;cluster&rsquo;, with a number showing the number of events
            in that cluster.
          </li>
          <li>
            A cluster can be expanded to fill the timeline by double-clicking on
            it.
          </li>
          <li>
            Double-clicking an empty portion of the timeline will cause it to
            zoom out fully.
          </li>
        </ol>

        <p>
          Open the example below for a step-by-step guide how to use the
          timeline.
        </p>

        <p>
          <strong>
            Any jump triggered on the timeline automatically puts the mind map
            in &lsquo;lookback mode&rsquo;.
          </strong>
          It can be put back into &lsquo;write mode&rsquo; by clicking on the{' '}
          <Button outline color="secondary" size={'sm'}>
            <Lock />
          </Button>{' '}
          button at the top right in the menu bar.
        </p>

        <CollapsibleExample>
          <TimelineCarousel />
        </CollapsibleExample>

        <h3 id={'playback'}>Using the Playback Buttons</h3>
        <p>
          The playback buttons at the top menu bar should be fairly easy to
          understand and use. They look and work similar to an audio player -
          only that in this case, the buttons are used to jump between events on
          the timeline, rather than between items in a playlist.
        </p>
        <ol>
          <li>
            The{' '}
            <Button outline color="secondary" size={'sm'}>
              <SkipBack />
            </Button>{' '}
            button takes you directly to the first event of the timeline.
          </li>
          <li>
            The{' '}
            <Button outline color="secondary" size={'sm'}>
              <Rewind />
            </Button>{' '}
            button takes you to the previous event from the current event on the
            timeline. If you are currently in &lsquo;write mode&rsquo; then this takes you
            to the last event.
          </li>
          <li>
            The{' '}
            <Button outline color="secondary" size={'sm'}>
              <FastForward />
            </Button>{' '}
            button takes you to the next event from the current event on the
            timeline. If you are currently in &lsquo;write mode&rsquo; then this takes you
            to the last event.
          </li>
          <li>
            The{' '}
            <Button outline color="secondary" size={'sm'}>
              <SkipForward />
            </Button>{' '}
            button takes you directly to the last event of the timeline.
          </li>
        </ol>

        <p>
          <strong>
            Any action on the playback buttons automatically puts the mind map
            in &lsquo;lookback mode&rsquo;.
          </strong>
          It can be put back into &lsquo;write mode&rsquo; by clicking on the{' '}
          <Button outline color="secondary" size={'sm'}>
            <Lock />
          </Button>{' '}
          button at the top right in the menu bar.
        </p>

        <h2 id={'search'}>Searching</h2>
        <CollapsibleExample>
          <Card className={'mb-4'}>
            <CardImg
              top
              width="100%"
              src="/img/help/Screenshot_2021-03-28-16 Hivemind.png"
              alt="Search"
            />
            <CardBody>
              <CardTitle tag="h5">Search</CardTitle>
              <CardSubtitle tag="h6" className="mb-2 text-muted">
                Search for nodes on canvas.
              </CardSubtitle>
              <CardText>
                Use one or more filters/sort to locate a particular node of your
                interest. Clicking on a row will make the canvas zoom in one the
                node corresponding to that row.
              </CardText>
            </CardBody>
          </Card>
        </CollapsibleExample>

        <ul>
          <li>
            Click on the{' '}
            <Button outline color="secondary" size={'sm'}>
              <Search />
            </Button>{' '}
            button in the top menu bar.
          </li>
          <li>
            Enter your filter criteria or sort the columns in
            ascending/descending order.
          </li>
          <li>
            If a node that matches all filter critera exists, you should see it
            in the list.
          </li>
          <li>
            Click on the node if you would like to navigate to it in the canvas.
          </li>
        </ul>

        <h2 id={'rename'}>Renaming a mind map</h2>
        <p>
          The mind map can be renamed when in &lsquo;write mode&rsquo;. This is true when:
        </p>

        <ol>
          <li>The user has &lsquo;admin&rsquo; or &lsquo;write&rsquo; access to the mind map, and</li>
          <li>
            The mind map is being viewed in &lsquo;write&rsquo; mode (i.e., not in &lsquo;lookback
            mode&rsquo; - as discussed earlier).
          </li>
        </ol>
        <CollapsibleExample>
          <Card className={'mb-4'}>
            <CardImg
              top
              width="100%"
              src="/img/help/Screenshot_2021-03-28-17 Hivemind.png"
              alt="Rename"
            />
            <CardBody>
              <CardTitle tag="h5">Rename</CardTitle>
              <CardSubtitle tag="h6" className="mb-2 text-muted">
                Rename the mind map.
              </CardSubtitle>
              <CardText>
                Click on the{' '}
                <Button outline color="primary" size={'sm'}>
                  <Edit3 />
                </Button>{' '}
                button. Enter the new name and hit{' '}
                <Button color="primary" size="sm">
                  <Save /> Save
                </Button>
                .
              </CardText>
            </CardBody>
          </Card>
        </CollapsibleExample>

        <ul>
          <li>
            Click on the{' '}
            <Button outline color="primary" size={'sm'}>
              <Edit3 />
            </Button>{' '}
            button.
          </li>
          <li>This button can be found in the menu bar.</li>
          <li>Modify the name as required and hit ⏎ (&lt;Enter&gt;).</li>
        </ul>

        <h2 id={'fit'}>Fit on canvas</h2>
        <p>
          If the mind map does not optimally fit in the canvas, either because
          you played around with the canvas zoom or moved a few nodes around, or
          just hid/revealed a bunch of nodes, you can force them to optimally
          fit by clicking on the{' '}
          <Button outline color="secondary" size={'sm'}>
            <Maximize />
          </Button>{' '}
          button in the top menu bar.
        </p>

        <CollapsibleExample>
          <FitCarousel />
        </CollapsibleExample>

        <h2 id={'show-all'}>Show All</h2>
        <p>
          If several sub-trees were hidden on the canvas, it can get tedious to
          reveal them all by navigating to their parents one-by-one. For such
          cases a quick shortcut is to click on the{' '}
          <Button outline color="secondary" size={'sm'}>
            <Eye />
          </Button>{' '}
          button in the top menu bar. This causes the canvas to immediately
          reveal all hidden sub-trees and also re-run the layout if necessary.
        </p>

        <CollapsibleExample>
          <ShowCarousel />
        </CollapsibleExample>
      </Jumbotron>
    </Col>
  </Row>
)
Example #17
Source File: Header.js    From light-blue-react-template with MIT License 4 votes vote down vote up
render() {
    return (
      <Navbar className={`d-print-none `}>
        <div className={s.burger}>
          <NavLink
              onClick={this.toggleSidebar}
              className={`d-md-none ${s.navItem} text-white`}
              href="#"
            >
              <BurgerIcon className={s.headerIcon} />
            </NavLink>
        </div>
        <div className={`d-print-none ${s.root}`}>
          <UncontrolledAlert
            className={`${s.alert} mr-3 d-lg-down-none animate__animated animate__bounceIn animate__delay-1s`}
          >
            Check out Light Blue{" "}
            <button
              className="btn-link"
              onClick={() => this.setState({ settingsOpen: true })}
            >
              <SettingsIcon className={s.settingsIcon} />
            </button>{" "}
            on the right!
          </UncontrolledAlert>
          <Collapse
            className={`${s.searchCollapse} ml-lg-0 mr-md-3`}
            isOpen={this.state.searchOpen}
          >
            <InputGroup
              className={`${s.navbarForm} ${
                this.state.searchFocused ? s.navbarFormFocused : ""
              }`}
            >
              <InputGroupAddon addonType="prepend" className={s.inputAddon}>
                <InputGroupText>
                  <i className="fa fa-search" />
                </InputGroupText>
              </InputGroupAddon>
              <Input
                id="search-input-2"
                placeholder="Search..."
                className="input-transparent"
                onFocus={() => this.setState({ searchFocused: true })}
                onBlur={() => this.setState({ searchFocused: false })}
              />
            </InputGroup>
          </Collapse>
          <Form className="d-md-down-none mr-3 ml-3" inline>
            <FormGroup>
              <InputGroup className={`input-group-no-border ${s.searchForm}`}>
                <InputGroupAddon addonType="prepend">
                  <InputGroupText className={s.inputGroupText}>
                    <SearchIcon className={s.headerIcon} />
                  </InputGroupText>
                </InputGroupAddon>
                <Input
                  id="search-input"
                  className="input-transparent"
                  placeholder="Search Dashboard"
                />
              </InputGroup>
            </FormGroup>
          </Form>

          <Nav className="ml-md-0">
            <Dropdown
              nav
              isOpen={this.state.notificationsOpen}
              toggle={this.toggleNotifications}
              id="basic-nav-dropdown"
              className={`${s.notificationsMenu}`}
            >
              <DropdownToggle nav caret style={{ color: "#C1C3CF", padding: 0 }}>
                <span
                  className={`${s.avatar} rounded-circle thumb-sm float-left`}
                >
                  <img src={avatar} alt="..." />
                </span>
                <span className={`small d-sm-down-none ${s.accountCheck}`}>Philip smith</span>
                <Badge className={`d-sm-down-none ${s.badge}`} color="danger">
                  9
                </Badge>
              </DropdownToggle>
              <DropdownMenu
                right
                className={`${s.notificationsWrapper} py-0 animate__animated animate__faster animate__fadeInUp`}
              >
                <Notifications />
              </DropdownMenu>
            </Dropdown>
            <NavItem className="d-lg-none">
              <NavLink
                onClick={this.toggleSearchOpen}
                className={s.navItem}
                href="#"
              >
                <SearchIcon addId='header-search' className={s.headerIcon} />
              </NavLink>
            </NavItem>
            <Dropdown
              className="d-none d-sm-block"
              nav
              isOpen={this.state.messagesOpen}
              toggle={this.toggleMessagesDropdown}
            >
              <DropdownToggle nav className={`d-sm-down-none ${s.navItem} text-white`}>
                <MessageIcon className={s.headerIcon} />
              </DropdownToggle>
              <DropdownMenu className={`${s.dropdownMenu} ${s.messages}`}>
                <DropdownItem>
                  <img className={s.image} src={sender1} alt="" />
                  <div className={s.details}>
                    <div>Jane Hew</div>
                    <div className={s.text}>Hey, John! How is it going? ...</div>
                  </div>
                </DropdownItem>
                <DropdownItem>
                  <img className={s.image} src={sender2} alt="" />
                  <div className={s.details}>
                    <div>Alies Rumiancaŭ</div>
                    <div className={s.text}>
                      I will definitely buy this template
                    </div>
                  </div>
                </DropdownItem>
                <DropdownItem>
                  <img className={s.image} src={sender3} alt="" />
                  <div className={s.details}>
                    <div>Michał Rumiancaŭ</div>
                    <div className={s.text}>
                      Is it really Lore ipsum? Lore ...
                    </div>
                  </div>
                </DropdownItem>
                <DropdownItem>
                  {/* eslint-disable-next-line */}
                  <a href="#" className="text-white">
                    See all messages <ArrowIcon className={s.headerIcon} maskName="messagesArrow" />
                  </a>
                </DropdownItem>
              </DropdownMenu>
            </Dropdown>
            <NavItem className={`${s.divider} d-none d-sm-block`} />
            <Dropdown
              className="d-none d-sm-block"
              nav
              isOpen={this.state.settingsOpen}
              toggle={this.toggleSettingsDropdown}
            >
              <DropdownToggle nav className={`${s.navItem} text-white`}>
                <SettingsIcon addId='header-settings' className={s.headerIcon} />
              </DropdownToggle>
              <DropdownMenu className={`${s.dropdownMenu} ${s.settings}`}>
                <h6>Sidebar on the</h6>
                <ButtonGroup size="sm">
                  <Button
                    color="primary"
                    onClick={() => this.moveSidebar("left")}
                    className={
                      this.props.sidebarPosition === "left" ? "active" : ""
                    }
                  >
                    Left
                  </Button>
                  <Button
                    color="primary"
                    onClick={() => this.moveSidebar("right")}
                    className={
                      this.props.sidebarPosition === "right" ? "active" : ""
                    }
                  >
                    Right
                  </Button>
                </ButtonGroup>
                <h6 className="mt-2">Sidebar</h6>
                <ButtonGroup size="sm">
                  <Button
                    color="primary"
                    onClick={() => this.toggleVisibilitySidebar("show")}
                    className={
                      this.props.sidebarVisibility === "show" ? "active" : ""
                    }
                  >
                    Show
                  </Button>
                  <Button
                    color="primary"
                    onClick={() => this.toggleVisibilitySidebar("hide")}
                    className={
                      this.props.sidebarVisibility === "hide" ? "active" : ""
                    }
                  >
                    Hide
                  </Button>
                </ButtonGroup>
              </DropdownMenu>
            </Dropdown>
            <Dropdown
              className="d-none d-sm-block"
              nav
              isOpen={this.state.supportOpen}
              toggle={this.toggleSupportDropdown}
            >
              <DropdownToggle nav className={`${s.navItem} text-white`}>
                <BellIcon className={s.headerIcon} />
                <div className={s.count}></div>
              </DropdownToggle>
              <DropdownMenu right className={`${s.dropdownMenu} ${s.support}`}>
                <DropdownItem>
                  <Badge color="danger">
                    <i className="fa fa-bell-o" />
                  </Badge>
                  <div className={s.details}>Check out this awesome ticket</div>
                </DropdownItem>
                <DropdownItem>
                  <Badge color="warning">
                    <i className="fa fa-question-circle" />
                  </Badge>
                  <div className={s.details}>What is the best way to get ...</div>
                </DropdownItem>
                <DropdownItem>
                  <Badge color="success">
                    <i className="fa fa-info-circle" />
                  </Badge>
                  <div className={s.details}>
                    This is just a simple notification
                  </div>
                </DropdownItem>
                <DropdownItem>
                  <Badge color="info">
                    <i className="fa fa-plus" />
                  </Badge>
                  <div className={s.details}>12 new orders has arrived today</div>
                </DropdownItem>
                <DropdownItem>
                  <Badge color="danger">
                    <i className="fa fa-tag" />
                  </Badge>
                  <div className={s.details}>
                    One more thing that just happened
                  </div>
                </DropdownItem>
                <DropdownItem>
                  {/* eslint-disable-next-line */}
                  <a href="#" className="text-white">
                    See all tickets <ArrowIcon className={s.headerIcon} maskName="bellArrow" />
                  </a>
                </DropdownItem>
              </DropdownMenu>
            </Dropdown>
            <NavItem>
              <NavLink
                onClick={this.doLogout}
                className={`${s.navItem} text-white`}
                href="#"
              >
                <PowerIcon className={s.headerIcon} />
              </NavLink>
            </NavItem>
          </Nav>
        </div>
      </Navbar>
    );
  }
Example #18
Source File: LinksGroup.js    From light-blue-react-template with MIT License 4 votes vote down vote up
render() {
    const isOpen = this.props.activeItem &&
      this.props.activeItem.includes(this.props.index) &&
      this.state.headerLinkWasClicked;

    const {exact} = this.props.exact;

    if (!this.props.childrenLinks) {
      if (this.props.isHeader) {
        return (
          <li className={[s.headerLink, this.props.className].join(' ')}>
            <NavLink
              to={this.props.link}
              activeClassName={s.headerLinkActive}
              exact={exact}
              target={this.props.target}
            >
              <span className={s.icon}>
                {this.props.iconName}
              </span>
              {this.props.header} {this.props.label && <sup className={`${s.headerLabel} text-${this.props.labelColor || 'warning'}`}>{this.props.label}</sup>}
              {this.props.badge && <Badge className={s.badge} color="primary" pill>9</Badge>}
            </NavLink>
          </li>
        );
      }
      return (
        <li>
          <NavLink
            to={this.props.link}
            activeClassName={s.headerLinkActive}
            style={{ paddingLeft: `${50 + (10 * (this.props.deep - 1))}px` }}
            onClick={(e) => {
              // able to go to link is not available(for Demo)
              if (this.props.link.includes('menu')) {
                e.preventDefault();
              }
            }}
            exact={exact}
          >
            {this.props.header} {this.props.label && <sup className={`${s.headerLabel} text-${this.props.labelColor || 'warning'}`}>{this.props.label}</sup>}
          </NavLink>
        </li>
      );
    }
    /* eslint-disable */
    return (
      <Route
        path={this.props.link}
        children={(params) => {
          const { match } = params;
          return (
            <li className={classnames({ [s.headerLink]: this.props.isHeader }, this.props.className)}>
              <a className={classnames(s.accordionToggle, { [s.headerLinkActive]: match }, { [s.collapsed]: isOpen }, "d-flex")}
                style={{ paddingLeft: `${this.props.deep == 0 ? 10 : 35 + 10 * (this.props.deep - 1)}px` }}
                onClick={(e) => this.togglePanelCollapse(this.props.link, e)}
                href="#"
              >
                {this.props.isHeader ?
                  <span className={s.icon}>
                    {this.props.iconName}
                  </span> : null
                }
                {this.props.header} {this.props.label && <sup className={`${s.headerLabel} text-${this.props.labelColor || 'warning'} ml-1`}>{this.props.label}</sup>}
                <b className={['fa fa-angle-right', s.caret].join(' ')} />
              </a>
              {/* eslint-enable */}
              <Collapse className={s.panel} isOpen={isOpen}>
                <ul>
                  {this.props.childrenLinks &&
                    this.props.childrenLinks.map((child, ind) =>
                      <LinksGroup
                        onActiveSidebarItemChange={this.props.onActiveSidebarItemChange}
                        activeItem={this.props.activeItem}
                        header={child.header}
                        link={child.link}
                        index={child.index}
                        childrenLinks={child.childrenLinks}
                        deep={this.props.deep + 1}
                        key={ind} // eslint-disable-line
                      />,
                    )}
                </ul>
              </Collapse>
            </li>
          );
        }}
      />
    );
  }
Example #19
Source File: Landing.jsx    From nodejs-rest-api-boilerplate with MIT License 4 votes vote down vote up
render() {
    return (
      <>
        <DemoNavbar />
        <main ref="main">
          <div className="position-relative">
            {/* shape Hero */}
            <section className="section section-lg section-shaped pb-250">
              <div className="shape shape-style-1 shape-default">
                <span />
                <span />
                <span />
                <span />
                <span />
                <span />
                <span />
                <span />
                <span />
              </div>
              <Container className="py-lg-md d-flex">
                <div className="col px-0">
                  <Row>
                    <Col lg="6">
                      <h1 className="display-3 text-white">
                        A beautiful Design System{" "}
                        <span>completed with examples</span>
                      </h1>
                      <p className="lead text-white">
                        The design system comes with four pre-built pages to
                        help you get started faster. You can change the text and
                        images and you're good to go.
                      </p>
                      <div className="btn-wrapper">
                        <Button
                          className="btn-icon mb-3 mb-sm-0"
                          color="info"
                          href="https://demos.creative-tim.com/argon-design-system-react/#/documentation/alerts?ref=adsr-landing-page"
                        >
                          <span className="btn-inner--icon mr-1">
                            <i className="fa fa-code" />
                          </span>
                          <span className="btn-inner--text">Components</span>
                        </Button>
                        <Button
                          className="btn-white btn-icon mb-3 mb-sm-0 ml-1"
                          color="default"
                          href="https://www.creative-tim.com/product/argon-design-system-react?ref=adsr-landing-page"
                        >
                          <span className="btn-inner--icon mr-1">
                            <i className="ni ni-cloud-download-95" />
                          </span>
                          <span className="btn-inner--text">
                            Download React
                          </span>
                        </Button>
                      </div>
                    </Col>
                  </Row>
                </div>
              </Container>
              {/* SVG separator */}
              <div className="separator separator-bottom separator-skew">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  preserveAspectRatio="none"
                  version="1.1"
                  viewBox="0 0 2560 100"
                  x="0"
                  y="0"
                >
                  <polygon
                    className="fill-white"
                    points="2560 0 2560 100 0 100"
                  />
                </svg>
              </div>
            </section>
            {/* 1st Hero Variation */}
          </div>
          <section className="section section-lg pt-lg-0 mt--200">
            <Container>
              <Row className="justify-content-center">
                <Col lg="12">
                  <Row className="row-grid">
                    <Col lg="4">
                      <Card className="card-lift--hover shadow border-0">
                        <CardBody className="py-5">
                          <div className="icon icon-shape icon-shape-primary rounded-circle mb-4">
                            <i className="ni ni-check-bold" />
                          </div>
                          <h6 className="text-primary text-uppercase">
                            Download Argon
                          </h6>
                          <p className="description mt-3">
                            Argon is a great free UI package based on Bootstrap
                            4 that includes the most important components and
                            features.
                          </p>
                          <div>
                            <Badge color="primary" pill className="mr-1">
                              design
                            </Badge>
                            <Badge color="primary" pill className="mr-1">
                              system
                            </Badge>
                            <Badge color="primary" pill className="mr-1">
                              creative
                            </Badge>
                          </div>
                          <Button
                            className="mt-4"
                            color="primary"
                            href="#pablo"
                            onClick={e => e.preventDefault()}
                          >
                            Learn more
                          </Button>
                        </CardBody>
                      </Card>
                    </Col>
                    <Col lg="4">
                      <Card className="card-lift--hover shadow border-0">
                        <CardBody className="py-5">
                          <div className="icon icon-shape icon-shape-success rounded-circle mb-4">
                            <i className="ni ni-istanbul" />
                          </div>
                          <h6 className="text-success text-uppercase">
                            Build Something
                          </h6>
                          <p className="description mt-3">
                            Argon is a great free UI package based on Bootstrap
                            4 that includes the most important components and
                            features.
                          </p>
                          <div>
                            <Badge color="success" pill className="mr-1">
                              business
                            </Badge>
                            <Badge color="success" pill className="mr-1">
                              vision
                            </Badge>
                            <Badge color="success" pill className="mr-1">
                              success
                            </Badge>
                          </div>
                          <Button
                            className="mt-4"
                            color="success"
                            href="#pablo"
                            onClick={e => e.preventDefault()}
                          >
                            Learn more
                          </Button>
                        </CardBody>
                      </Card>
                    </Col>
                    <Col lg="4">
                      <Card className="card-lift--hover shadow border-0">
                        <CardBody className="py-5">
                          <div className="icon icon-shape icon-shape-warning rounded-circle mb-4">
                            <i className="ni ni-planet" />
                          </div>
                          <h6 className="text-warning text-uppercase">
                            Prepare Launch
                          </h6>
                          <p className="description mt-3">
                            Argon is a great free UI package based on Bootstrap
                            4 that includes the most important components and
                            features.
                          </p>
                          <div>
                            <Badge color="warning" pill className="mr-1">
                              marketing
                            </Badge>
                            <Badge color="warning" pill className="mr-1">
                              product
                            </Badge>
                            <Badge color="warning" pill className="mr-1">
                              launch
                            </Badge>
                          </div>
                          <Button
                            className="mt-4"
                            color="warning"
                            href="#pablo"
                            onClick={e => e.preventDefault()}
                          >
                            Learn more
                          </Button>
                        </CardBody>
                      </Card>
                    </Col>
                  </Row>
                </Col>
              </Row>
            </Container>
          </section>
          <section className="section section-lg">
            <Container>
              <Row className="row-grid align-items-center">
                <Col className="order-md-2" md="6">
                  <img
                    alt="..."
                    className="img-fluid floating"
                    src={require("../../assets/img/theme/promo-1.png")}
                  />
                </Col>
                <Col className="order-md-1" md="6">
                  <div className="pr-md-5">
                    <div className="icon icon-lg icon-shape icon-shape-success shadow rounded-circle mb-5">
                      <i className="ni ni-settings-gear-65" />
                    </div>
                    <h3>Awesome features</h3>
                    <p>
                      The kit comes with three pre-built pages to help you get
                      started faster. You can change the text and images and
                      you're good to go.
                    </p>
                    <ul className="list-unstyled mt-5">
                      <li className="py-2">
                        <div className="d-flex align-items-center">
                          <div>
                            <Badge
                              className="badge-circle mr-3"
                              color="success"
                            >
                              <i className="ni ni-settings-gear-65" />
                            </Badge>
                          </div>
                          <div>
                            <h6 className="mb-0">
                              Carefully crafted components
                            </h6>
                          </div>
                        </div>
                      </li>
                      <li className="py-2">
                        <div className="d-flex align-items-center">
                          <div>
                            <Badge
                              className="badge-circle mr-3"
                              color="success"
                            >
                              <i className="ni ni-html5" />
                            </Badge>
                          </div>
                          <div>
                            <h6 className="mb-0">Amazing page examples</h6>
                          </div>
                        </div>
                      </li>
                      <li className="py-2">
                        <div className="d-flex align-items-center">
                          <div>
                            <Badge
                              className="badge-circle mr-3"
                              color="success"
                            >
                              <i className="ni ni-satisfied" />
                            </Badge>
                          </div>
                          <div>
                            <h6 className="mb-0">
                              Super friendly support team
                            </h6>
                          </div>
                        </div>
                      </li>
                    </ul>
                  </div>
                </Col>
              </Row>
            </Container>
          </section>
          <section className="section bg-secondary">
            <Container>
              <Row className="row-grid align-items-center">
                <Col md="6">
                  <Card className="bg-default shadow border-0">
                    <CardImg
                      alt="..."
                      src={require("../../assets/img/theme/img-1-1200x1000.jpg")}
                      top
                    />
                    <blockquote className="card-blockquote">
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        className="svg-bg"
                        preserveAspectRatio="none"
                        viewBox="0 0 583 95"
                      >
                        <polygon
                          className="fill-default"
                          points="0,52 583,95 0,95"
                        />
                        <polygon
                          className="fill-default"
                          opacity=".2"
                          points="0,42 583,95 683,0 0,95"
                        />
                      </svg>
                      <h4 className="display-3 font-weight-bold text-white">
                        Design System
                      </h4>
                      <p className="lead text-italic text-white">
                        The Arctic Ocean freezes every winter and much of the
                        sea-ice then thaws every summer, and that process will
                        continue whatever happens.
                      </p>
                    </blockquote>
                  </Card>
                </Col>
                <Col md="6">
                  <div className="pl-md-5">
                    <div className="icon icon-lg icon-shape icon-shape-warning shadow rounded-circle mb-5">
                      <i className="ni ni-settings" />
                    </div>
                    <h3>Our customers</h3>
                    <p className="lead">
                      Don't let your uses guess by attaching tooltips and
                      popoves to any element. Just make sure you enable them
                      first via JavaScript.
                    </p>
                    <p>
                      The kit comes with three pre-built pages to help you get
                      started faster. You can change the text and images and
                      you're good to go.
                    </p>
                    <p>
                      The kit comes with three pre-built pages to help you get
                      started faster. You can change the text and images and
                      you're good to go.
                    </p>
                    <a
                      className="font-weight-bold text-warning mt-5"
                      href="#pablo"
                      onClick={e => e.preventDefault()}
                    >
                      A beautiful UI Kit for impactful websites
                    </a>
                  </div>
                </Col>
              </Row>
            </Container>
          </section>
          <section className="section pb-0 bg-gradient-warning">
            <Container>
              <Row className="row-grid align-items-center">
                <Col className="order-lg-2 ml-lg-auto" md="6">
                  <div className="position-relative pl-md-5">
                    <img
                      alt="..."
                      className="img-center img-fluid"
                      src={require("../../assets/img/ill/ill-2.svg")}
                    />
                  </div>
                </Col>
                <Col className="order-lg-1" lg="6">
                  <div className="d-flex px-3">
                    <div>
                      <div className="icon icon-lg icon-shape bg-gradient-white shadow rounded-circle text-primary">
                        <i className="ni ni-building text-primary" />
                      </div>
                    </div>
                    <div className="pl-4">
                      <h4 className="display-3 text-white">Modern Interface</h4>
                      <p className="text-white">
                        The Arctic Ocean freezes every winter and much of the
                        sea-ice then thaws every summer, and that process will
                        continue whatever.
                      </p>
                    </div>
                  </div>
                  <Card className="shadow shadow-lg--hover mt-5">
                    <CardBody>
                      <div className="d-flex px-3">
                        <div>
                          <div className="icon icon-shape bg-gradient-success rounded-circle text-white">
                            <i className="ni ni-satisfied" />
                          </div>
                        </div>
                        <div className="pl-4">
                          <h5 className="title text-success">
                            Awesome Support
                          </h5>
                          <p>
                            The Arctic Ocean freezes every winter and much of
                            the sea-ice then thaws every summer, and that
                            process will continue whatever.
                          </p>
                          <a
                            className="text-success"
                            href="#pablo"
                            onClick={e => e.preventDefault()}
                          >
                            Learn more
                          </a>
                        </div>
                      </div>
                    </CardBody>
                  </Card>
                  <Card className="shadow shadow-lg--hover mt-5">
                    <CardBody>
                      <div className="d-flex px-3">
                        <div>
                          <div className="icon icon-shape bg-gradient-warning rounded-circle text-white">
                            <i className="ni ni-active-40" />
                          </div>
                        </div>
                        <div className="pl-4">
                          <h5 className="title text-warning">
                            Modular Components
                          </h5>
                          <p>
                            The Arctic Ocean freezes every winter and much of
                            the sea-ice then thaws every summer, and that
                            process will continue whatever.
                          </p>
                          <a
                            className="text-warning"
                            href="#pablo"
                            onClick={e => e.preventDefault()}
                          >
                            Learn more
                          </a>
                        </div>
                      </div>
                    </CardBody>
                  </Card>
                </Col>
              </Row>
            </Container>
            {/* SVG separator */}
            <div className="separator separator-bottom separator-skew zindex-100">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                preserveAspectRatio="none"
                version="1.1"
                viewBox="0 0 2560 100"
                x="0"
                y="0"
              >
                <polygon
                  className="fill-white"
                  points="2560 0 2560 100 0 100"
                />
              </svg>
            </div>
          </section>
          <section className="section section-lg">
            <Container>
              <Row className="justify-content-center text-center mb-lg">
                <Col lg="8">
                  <h2 className="display-3">The amazing Team</h2>
                  <p className="lead text-muted">
                    According to the National Oceanic and Atmospheric
                    Administration, Ted, Scambos, NSIDClead scentist, puts the
                    potentially record maximum.
                  </p>
                </Col>
              </Row>
              <Row>
                <Col className="mb-5 mb-lg-0" lg="3" md="6">
                  <div className="px-4">
                    <img
                      alt="..."
                      className="rounded-circle img-center img-fluid shadow shadow-lg--hover"
                      src={require("../../assets/img/theme/team-1-800x800.jpg")}
                      style={{ width: "200px" }}
                    />
                    <div className="pt-4 text-center">
                      <h5 className="title">
                        <span className="d-block mb-1">Ryan Tompson</span>
                        <small className="h6 text-muted">Web Developer</small>
                      </h5>
                      <div className="mt-3">
                        <Button
                          className="btn-icon-only rounded-circle"
                          color="warning"
                          href="#pablo"
                          onClick={e => e.preventDefault()}
                        >
                          <i className="fa fa-twitter" />
                        </Button>
                        <Button
                          className="btn-icon-only rounded-circle ml-1"
                          color="warning"
                          href="#pablo"
                          onClick={e => e.preventDefault()}
                        >
                          <i className="fa fa-facebook" />
                        </Button>
                        <Button
                          className="btn-icon-only rounded-circle ml-1"
                          color="warning"
                          href="#pablo"
                          onClick={e => e.preventDefault()}
                        >
                          <i className="fa fa-dribbble" />
                        </Button>
                      </div>
                    </div>
                  </div>
                </Col>
                <Col className="mb-5 mb-lg-0" lg="3" md="6">
                  <div className="px-4">
                    <img
                      alt="..."
                      className="rounded-circle img-center img-fluid shadow shadow-lg--hover"
                      src={require("../../assets/img/theme/team-2-800x800.jpg")}
                      style={{ width: "200px" }}
                    />
                    <div className="pt-4 text-center">
                      <h5 className="title">
                        <span className="d-block mb-1">Romina Hadid</span>
                        <small className="h6 text-muted">
                          Marketing Strategist
                        </small>
                      </h5>
                      <div className="mt-3">
                        <Button
                          className="btn-icon-only rounded-circle"
                          color="primary"
                          href="#pablo"
                          onClick={e => e.preventDefault()}
                        >
                          <i className="fa fa-twitter" />
                        </Button>
                        <Button
                          className="btn-icon-only rounded-circle ml-1"
                          color="primary"
                          href="#pablo"
                          onClick={e => e.preventDefault()}
                        >
                          <i className="fa fa-facebook" />
                        </Button>
                        <Button
                          className="btn-icon-only rounded-circle ml-1"
                          color="primary"
                          href="#pablo"
                          onClick={e => e.preventDefault()}
                        >
                          <i className="fa fa-dribbble" />
                        </Button>
                      </div>
                    </div>
                  </div>
                </Col>
                <Col className="mb-5 mb-lg-0" lg="3" md="6">
                  <div className="px-4">
                    <img
                      alt="..."
                      className="rounded-circle img-center img-fluid shadow shadow-lg--hover"
                      src={require("../../assets/img/theme/team-3-800x800.jpg")}
                      style={{ width: "200px" }}
                    />
                    <div className="pt-4 text-center">
                      <h5 className="title">
                        <span className="d-block mb-1">Alexander Smith</span>
                        <small className="h6 text-muted">UI/UX Designer</small>
                      </h5>
                      <div className="mt-3">
                        <Button
                          className="btn-icon-only rounded-circle"
                          color="info"
                          href="#pablo"
                          onClick={e => e.preventDefault()}
                        >
                          <i className="fa fa-twitter" />
                        </Button>
                        <Button
                          className="btn-icon-only rounded-circle ml-1"
                          color="info"
                          href="#pablo"
                          onClick={e => e.preventDefault()}
                        >
                          <i className="fa fa-facebook" />
                        </Button>
                        <Button
                          className="btn-icon-only rounded-circle ml-1"
                          color="info"
                          href="#pablo"
                          onClick={e => e.preventDefault()}
                        >
                          <i className="fa fa-dribbble" />
                        </Button>
                      </div>
                    </div>
                  </div>
                </Col>
                <Col className="mb-5 mb-lg-0" lg="3" md="6">
                  <div className="px-4">
                    <img
                      alt="..."
                      className="rounded-circle img-center img-fluid shadow shadow-lg--hover"
                      src={require("../../assets/img/theme/team-4-800x800.jpg")}
                      style={{ width: "200px" }}
                    />
                    <div className="pt-4 text-center">
                      <h5 className="title">
                        <span className="d-block mb-1">John Doe</span>
                        <small className="h6 text-muted">Founder and CEO</small>
                      </h5>
                      <div className="mt-3">
                        <Button
                          className="btn-icon-only rounded-circle"
                          color="success"
                          href="#pablo"
                          onClick={e => e.preventDefault()}
                        >
                          <i className="fa fa-twitter" />
                        </Button>
                        <Button
                          className="btn-icon-only rounded-circle ml-1"
                          color="success"
                          href="#pablo"
                          onClick={e => e.preventDefault()}
                        >
                          <i className="fa fa-facebook" />
                        </Button>
                        <Button
                          className="btn-icon-only rounded-circle ml-1"
                          color="success"
                          href="#pablo"
                          onClick={e => e.preventDefault()}
                        >
                          <i className="fa fa-dribbble" />
                        </Button>
                      </div>
                    </div>
                  </div>
                </Col>
              </Row>
            </Container>
          </section>
          <section className="section section-lg pt-0">
            <Container>
              <Card className="bg-gradient-warning shadow-lg border-0">
                <div className="p-5">
                  <Row className="align-items-center">
                    <Col lg="8">
                      <h3 className="text-white">
                        We made website building easier for you.
                      </h3>
                      <p className="lead text-white mt-3">
                        I will be the leader of a company that ends up being
                        worth billions of dollars, because I got the answers. I
                        understand culture.
                      </p>
                    </Col>
                    <Col className="ml-lg-auto" lg="3">
                      <Button
                        block
                        className="btn-white"
                        color="default"
                        href="https://www.creative-tim.com/product/argon-design-system-react?ref=adsr-landing-page"
                        size="lg"
                      >
                        Download React
                      </Button>
                    </Col>
                  </Row>
                </div>
              </Card>
            </Container>
          </section>
          <section className="section section-lg bg-gradient-default">
            <Container className="pt-lg pb-300">
              <Row className="text-center justify-content-center">
                <Col lg="10">
                  <h2 className="display-3 text-white">Build something</h2>
                  <p className="lead text-white">
                    According to the National Oceanic and Atmospheric
                    Administration, Ted, Scambos, NSIDClead scentist, puts the
                    potentially record low maximum sea ice extent tihs year down
                    to low ice.
                  </p>
                </Col>
              </Row>
              <Row className="row-grid mt-5">
                <Col lg="4">
                  <div className="icon icon-lg icon-shape bg-gradient-white shadow rounded-circle text-primary">
                    <i className="ni ni-settings text-primary" />
                  </div>
                  <h5 className="text-white mt-3">Building tools</h5>
                  <p className="text-white mt-3">
                    Some quick example text to build on the card title and make
                    up the bulk of the card's content.
                  </p>
                </Col>
                <Col lg="4">
                  <div className="icon icon-lg icon-shape bg-gradient-white shadow rounded-circle text-primary">
                    <i className="ni ni-ruler-pencil text-primary" />
                  </div>
                  <h5 className="text-white mt-3">Grow your market</h5>
                  <p className="text-white mt-3">
                    Some quick example text to build on the card title and make
                    up the bulk of the card's content.
                  </p>
                </Col>
                <Col lg="4">
                  <div className="icon icon-lg icon-shape bg-gradient-white shadow rounded-circle text-primary">
                    <i className="ni ni-atom text-primary" />
                  </div>
                  <h5 className="text-white mt-3">Launch time</h5>
                  <p className="text-white mt-3">
                    Some quick example text to build on the card title and make
                    up the bulk of the card's content.
                  </p>
                </Col>
              </Row>
            </Container>
            {/* SVG separator */}
            <div className="separator separator-bottom separator-skew zindex-100">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                preserveAspectRatio="none"
                version="1.1"
                viewBox="0 0 2560 100"
                x="0"
                y="0"
              >
                <polygon
                  className="fill-white"
                  points="2560 0 2560 100 0 100"
                />
              </svg>
            </div>
          </section>
          <section className="section section-lg pt-lg-0 section-contact-us">
            <Container>
              <Row className="justify-content-center mt--300">
                <Col lg="8">
                  <Card className="bg-gradient-secondary shadow">
                    <CardBody className="p-lg-5">
                      <h4 className="mb-1">Want to work with us?</h4>
                      <p className="mt-0">
                        Your project is very important to us.
                      </p>
                      <FormGroup
                        className={classnames("mt-5", {
                          focused: this.state.nameFocused
                        })}
                      >
                        <InputGroup className="input-group-alternative">
                          <InputGroupAddon addonType="prepend">
                            <InputGroupText>
                              <i className="ni ni-user-run" />
                            </InputGroupText>
                          </InputGroupAddon>
                          <Input
                            placeholder="Your name"
                            type="text"
                            onFocus={e => this.setState({ nameFocused: true })}
                            onBlur={e => this.setState({ nameFocused: false })}
                          />
                        </InputGroup>
                      </FormGroup>
                      <FormGroup
                        className={classnames({
                          focused: this.state.emailFocused
                        })}
                      >
                        <InputGroup className="input-group-alternative">
                          <InputGroupAddon addonType="prepend">
                            <InputGroupText>
                              <i className="ni ni-email-83" />
                            </InputGroupText>
                          </InputGroupAddon>
                          <Input
                            placeholder="Email address"
                            type="email"
                            onFocus={e => this.setState({ emailFocused: true })}
                            onBlur={e => this.setState({ emailFocused: false })}
                          />
                        </InputGroup>
                      </FormGroup>
                      <FormGroup className="mb-4">
                        <Input
                          className="form-control-alternative"
                          cols="80"
                          name="name"
                          placeholder="Type a message..."
                          rows="4"
                          type="textarea"
                        />
                      </FormGroup>
                      <div>
                        <Button
                          block
                          className="btn-round"
                          color="default"
                          size="lg"
                          type="button"
                        >
                          Send Message
                        </Button>
                      </div>
                    </CardBody>
                  </Card>
                </Col>
              </Row>
            </Container>
          </section>
          <Download />
        </main>
        <CardsFooter />
      </>
    );
  }
Example #20
Source File: Static.js    From light-blue-react-template with MIT License 4 votes vote down vote up
render() {
    return (
      <div className={s.root}>
        <h2 className="page-title">
          Tables - <span className="fw-semi-bold">Static</span>
        </h2>
        <Row>
          <Col lg={6} md={12} sm={12}>
            <Widget
              title={
                <h5>
                  Table <span className="fw-semi-bold">Styles</span>
                </h5>
              }
              settings
              close
              bodyClass={s.mainTableWidget}
            >
            <div className={s.overFlow}>
              <Table lg={12} md={12} sm={12} striped>
                <thead>
                  <tr className="fs-sm">
                    <th className="hidden-sm-down">#</th>
                    <th>Picture</th>
                    <th>Description</th>
                    <th className="hidden-sm-down">Info</th>
                    <th className="hidden-sm-down">Date</th>
                    <th className="hidden-sm-down">Size</th>
                    <th className="hidden-sm-down">Status</th>
                  </tr>
                </thead>
                <tbody>
                  {this.state.tableStyles.map((row) => (
                    <tr key={row.id}>
                      <td>{row.id}</td>
                      <td>
                        <img
                          className="img-rounded"
                          src={row.picture}
                          alt=""
                          height="50"
                        />
                      </td>
                      <td>
                        {row.description}
                        {row.label && (
                          <div>
                            <Badge color={row.label.colorClass}>
                              {row.label.text}
                            </Badge>
                          </div>
                        )}
                      </td>
                      <td>
                        <p className="mb-0">
                          <small>
                            Type:
                            <span className="text-muted fw-semi-bold">
                              &nbsp; {row.info.type}
                            </span>
                          </small>
                        </p>
                        <p>
                          <small>
                            Dimensions:
                            <span className="text-muted fw-semi-bold">
                              &nbsp; {row.info.dimensions}
                            </span>
                          </small>
                        </p>
                      </td>
                      <td className="text-muted">{this.parseDate(row.date)}</td>
                      <td className="text-muted">{row.size}</td>
                      <td className="width-150">
                        <Progress
                          color={row.progress.colorClass}
                          value={row.progress.percent}
                          className="progress-sm mb-xs"
                        />
                      </td>
                    </tr>
                  ))}
                </tbody>
              </Table>
            </div>
              <div className="clearfix">
                <div className="float-right">
                  <Button color="default" className="mr-2" size="sm">
                    Send to...
                  </Button>
                  <UncontrolledButtonDropdown>
                    <DropdownToggle
                      color="inverse"
                      className="mr-xs"
                      size="sm"
                      caret
                    >
                      Clear
                    </DropdownToggle>
                    <DropdownMenu>
                      <DropdownItem>Clear</DropdownItem>
                      <DropdownItem>Move ...</DropdownItem>
                      <DropdownItem>Something else here</DropdownItem>
                      <DropdownItem divider />
                      <DropdownItem>Separated link</DropdownItem>
                    </DropdownMenu>
                  </UncontrolledButtonDropdown>
                </div>
                <p>Basic table with styled content</p>
              </div>
            </Widget>
          </Col>
          <Col lg={6} md={12} sm={12}>
            <Widget
              title={
                <h5>
                  Table <span className="fw-semi-bold">Styles</span>
                </h5>
              }
              settings
              close
            >
              <h3>
                Stripped <span className="fw-semi-bold">Table</span>
              </h3>

              <p>
                Each row is highlighted. You will never lost there. Just{" "}
                <code>.table-striped</code> it.
              </p>
              <div className={`widget-table-overflow ${s.overFlow}`}>
              <Table className="table-striped">
                <thead>
                  <tr>
                    <th>
                      <div className="abc-checkbox">
                        <Input
                          id="checkbox1"
                          type="checkbox"
                          checked={this.state.checkboxes1[0]}
                          onChange={(event) =>
                            this.checkAll(event, "checkboxes1")
                          }
                        />
                        <Label for="checkbox1" />
                      </div>
                    </th>
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th>Info</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td>
                      <div className="abc-checkbox">
                        <Input
                          id="checkbox2"
                          type="checkbox"
                          checked={this.state.checkboxes1[1]}
                          onChange={(event) =>
                            this.changeCheck(event, "checkboxes1", 1)
                          }
                        />
                        <Label for="checkbox2" />
                      </div>
                    </td>
                    <td>Mark</td>
                    <td>Otto</td>
                    <td>
                      <Badge color="danger">Online</Badge>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <div className="abc-checkbox">
                        <Input
                          id="checkbox3"
                          type="checkbox"
                          checked={this.state.checkboxes1[2]}
                          onChange={(event) =>
                            this.changeCheck(event, "checkboxes1", 2)
                          }
                        />
                        <Label for="checkbox3" />
                      </div>
                    </td>
                    <td>
                      Jacob{" "}
                      <Badge color="warning" className="ml-2">
                        ALERT!
                      </Badge>
                    </td>
                    <td>Thornton</td>
                    <td>
                      <span className="text-secondary badge badge-gray">
                        Away
                      </span>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <div className="abc-checkbox">
                        <Input
                          id="checkbox4"
                          type="checkbox"
                          checked={this.state.checkboxes1[3]}
                          onChange={(event) =>
                            this.changeCheck(event, "checkboxes1", 3)
                          }
                        />
                        <Label for="checkbox4" />
                      </div>
                    </td>
                    <td>Larry</td>
                    <td>the Bird</td>
                    <td>
                      <Badge color="danger">Construct</Badge>
                    </td>
                  </tr>
                </tbody>
              </Table>
              </div>
              <br />
              <br />
              <h3>
                Hover <span className="fw-semi-bold">Table</span>
              </h3>
              <p>
                {"Trace only what's really important. "}
                <code>.table-hover</code> is made for it.
              </p>
              <div className={s.overFlow}>
                <Table className="table-hover">
                  <thead>
                    <tr>
                      <th>#</th>
                      <th>First Name</th>
                      <th>Last Name</th>
                      <th>Email</th>
                      <th>Status</th>
                    </tr>
                  </thead>
                  {/* eslint-disable */}
                  <tbody>
                    <tr>
                      <td>1</td>
                      <td>Mark</td>
                      <td>Otto</td>
                      <td>
                        <a href="#">[email protected]</a>
                      </td>
                      <td>
                        <Badge color="gray" className="text-secondary" pill>
                          Pending
                        </Badge>
                      </td>
                    </tr>
                    <tr>
                      <td>2</td>
                      <td>Jacob</td>
                      <td>Thornton</td>
                      <td>
                        <a href="#">[email protected]</a>
                      </td>
                      <td>
                        <Badge color="gray" className="text-secondary" pill>
                          Unconfirmed
                        </Badge>
                      </td>
                    </tr>
                    <tr>
                      <td>3</td>
                      <td>Larry</td>
                      <td>the Bird</td>
                      <td>
                        <a href="#">[email protected]</a>
                      </td>
                      <td>
                        <Badge color="primary" className="text-secondary" pill>
                          New
                        </Badge>
                      </td>
                    </tr>
                    <tr>
                      <td>4</td>
                      <td>Peter</td>
                      <td>Horadnia</td>
                      <td>
                        <a href="#">[email protected]</a>
                      </td>
                      <td>
                        <Badge color="success" className="text-secondary" pill>
                          Active
                        </Badge>
                      </td>
                    </tr>
                  </tbody>
                  {/* eslint-enable */}
                </Table>
                </div>
            </Widget>
          </Col>
        </Row>
        <Row> 
          <Col lg={6} md={6} sm={12}>
            <Widget
              title={
                <h5>
                  Table <span className="fw-semi-bold">Styles</span>
                </h5>
              }
              settings
              close
            >
              <h3>
                Bordered <span className="fw-semi-bold">Table</span>
              </h3>
              <p>
                Each row is highlighted. You will never lost there. That&apos;s
                how all of us learned in school the table should look like. Just
                add
                <code>.table-bordered</code> to it.
              </p>
              <div className={`widget-table-overflow ${s.overFlow}`}>
              <Table className="table-bordered table-lg mt-lg mb-0">
                <thead className="text-uppercase">
                  <tr>
                    <th>
                      <div className="abc-checkbox">
                        <Input
                          id="checkbox10"
                          type="checkbox"
                          checked={this.state.checkboxes2[0]}
                          onChange={(event) =>
                            this.checkAll(event, "checkboxes2")
                          }
                        />
                        <Label for="checkbox10" />
                      </div>
                    </th>
                    <th>Product</th>
                    <th className="text-right">Price</th>
                    <th className="text-center">Sales</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td>
                      <div className="abc-checkbox">
                        <Input
                          id="checkbox11"
                          type="checkbox"
                          checked={this.state.checkboxes2[1]}
                          onChange={(event) =>
                            this.changeCheck(event, "checkboxes2", 1)
                          }
                        />
                        <Label for="checkbox11" />
                      </div>
                    </td>
                    <td>On the Road</td>
                    <td className="text-right">$25 224.2</td>
                    <td className="text-center">
                      <Sparklines
                        data={[13, 14, 16, 15, 4, 14, 20]}
                        style={{ width: "35px", height: "20px" }}
                      >
                        <SparklinesBars style={{ fill: "#1870DC" }} />
                      </Sparklines>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <div className="abc-checkbox">
                        <Input
                          id="checkbox12"
                          type="checkbox"
                          checked={this.state.checkboxes2[2]}
                          onChange={(event) =>
                            this.changeCheck(event, "checkboxes2", 2)
                          }
                        />
                        <Label for="checkbox12" />
                      </div>
                    </td>
                    <td>HP Core i7</td>
                    <td className="text-right">$87 346.1</td>
                    <td className="text-center">
                      <Sparklines
                        data={[14, 12, 16, 11, 17, 19, 16]}
                        style={{ width: "35px", height: "20px" }}
                      >
                        <SparklinesBars style={{ fill: "#58D777" }} />
                      </Sparklines>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <div className="abc-checkbox">
                        <Input
                          id="checkbox13"
                          type="checkbox"
                          checked={this.state.checkboxes2[3]}
                          onChange={(event) =>
                            this.changeCheck(event, "checkboxes2", 3)
                          }
                        />
                        <Label for="checkbox13" />
                      </div>
                    </td>
                    <td>Let&apos;s Dance</td>
                    <td className="text-right">$57 944.6</td>
                    <td className="text-center">
                      <Sparklines
                        data={[11, 17, 19, 16, 14, 12, 16]}
                        style={{ width: "35px", height: "20px" }}
                      >
                        <SparklinesBars style={{ fill: "#f0af03" }} />
                      </Sparklines>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <div className="abc-checkbox">
                        <Input
                          id="checkbox14"
                          type="checkbox"
                          checked={this.state.checkboxes2[4]}
                          onChange={(event) =>
                            this.changeCheck(event, "checkboxes2", 4)
                          }
                        />
                        <Label for="checkbox14" />
                      </div>
                    </td>
                    <td>Air Pro</td>
                    <td className="text-right">$118 533.1</td>
                    <td className="text-center">
                      <Sparklines
                        data={[13, 14, 20, 16, 15, 4, 14]}
                        style={{ width: "35px", height: "20px" }}
                      >
                        <SparklinesBars style={{ fill: "#F45722" }} />
                      </Sparklines>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <div className="abc-checkbox">
                        <Input
                          id="checkbox15"
                          type="checkbox"
                          checked={this.state.checkboxes2[5]}
                          onChange={(event) =>
                            this.changeCheck(event, "checkboxes2", 5)
                          }
                        />
                        <Label for="checkbox15" />
                      </div>
                    </td>
                    <td>Version Control</td>
                    <td className="text-right">$72 854.5</td>
                    <td className="text-center">
                      <Sparklines
                        data={[16, 15, 4, 14, 13, 14, 20]}
                        style={{ width: "35px", height: "20px" }}
                      >
                        <SparklinesBars style={{ fill: "#4ebfbb" }} />
                      </Sparklines>
                    </td>
                  </tr>
                </tbody>
              </Table>
              </div>
            </Widget>
          </Col>
          <Col lg={6} md={6} sm={12}> 
            <Widget
              title={
                <h5>
                  Table <span className="fw-semi-bold">Styles</span>
                </h5>
              }
              settings
              close
            >
              <h3>
                Overflow <span className="fw-semi-bold">Table</span>
              </h3>
              <p>
                Add any non-bordered .table within a widget for a seamless
                design. Awesome look for no cost. Just wrap the table with
                simple css class <code>.widget-table-overflow</code> inside of
                widget
              </p>
              <div className={`widget-table-overflow ${s.overFlow}`}>
                <Table className="table-striped table-lg mt-lg mb-0">
                  <thead>
                    <tr>
                      <th>
                        <div className="abc-checkbox">
                          <Input
                            id="checkbox20"
                            type="checkbox"
                            checked={this.state.checkboxes3[0]}
                            onChange={(event) =>
                              this.checkAll(event, "checkboxes3")
                            }
                          />
                          <Label for="checkbox20" />
                        </div>
                      </th>
                      <th>Product</th>
                      <th className="text-right">Price</th>
                      <th className="text-center">Sales</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td>
                        <div className="abc-checkbox">
                          <Input
                            id="checkbox21"
                            type="checkbox"
                            checked={this.state.checkboxes3[1]}
                            onChange={(event) =>
                              this.changeCheck(event, "checkboxes3", 1)
                            }
                          />
                          <Label for="checkbox21" />
                        </div>
                      </td>
                      <td>On the Road</td>
                      <td className="text-right">$25 224.2</td>
                      <td className="text-center">
                        <Sparklines
                          data={[13, 14, 16, 15, 4, 14, 20]}
                          style={{ width: "35px", height: "20px" }}
                        >
                          <SparklinesBars style={{ fill: "#1870DC" }} />
                        </Sparklines>
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <div className="abc-checkbox">
                          <Input
                            id="checkbox22"
                            type="checkbox"
                            checked={this.state.checkboxes3[2]}
                            onChange={(event) =>
                              this.changeCheck(event, "checkboxes3", 2)
                            }
                          />
                          <Label for="checkbox22" />
                        </div>
                      </td>
                      <td>HP Core i7</td>
                      <td className="text-right">$87 346.1</td>
                      <td className="text-center">
                        <Sparklines
                          data={[14, 12, 16, 11, 17, 19, 16]}
                          style={{ width: "35px", height: "20px" }}
                        >
                          <SparklinesBars style={{ fill: "#F45722" }} />
                        </Sparklines>
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <div className="abc-checkbox">
                          <Input
                            id="checkbox23"
                            type="checkbox"
                            checked={this.state.checkboxes3[3]}
                            onChange={(event) =>
                              this.changeCheck(event, "checkboxes3", 3)
                            }
                          />
                          <Label for="checkbox23" />
                        </div>
                      </td>
                      <td>Let&apos;s Dance</td>
                      <td className="text-right">$57 944.6</td>
                      <td className="text-center">
                        <Sparklines
                          data={[11, 17, 19, 16, 14, 12, 16]}
                          style={{ width: "35px", height: "20px" }}
                        >
                          <SparklinesBars style={{ fill: "#f0af03" }} />
                        </Sparklines>
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <div className="abc-checkbox">
                          <Input
                            id="checkbox24"
                            type="checkbox"
                            checked={this.state.checkboxes3[4]}
                            onChange={(event) =>
                              this.changeCheck(event, "checkboxes3", 4)
                            }
                          />
                          <Label for="checkbox24" />
                        </div>
                      </td>
                      <td>Air Pro</td>
                      <td className="text-right">$118 533.1</td>
                      <td className="text-center">
                        <Sparklines
                          data={[13, 14, 20, 16, 15, 4, 14]}
                          style={{ width: "35px", height: "20px" }}
                        >
                          <SparklinesBars style={{ fill: "#58D777" }} />
                        </Sparklines>
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <div className="abc-checkbox">
                          <Input
                            id="checkbox25"
                            type="checkbox"
                            checked={this.state.checkboxes3[5]}
                            onChange={(event) =>
                              this.changeCheck(event, "checkboxes3", 5)
                            }
                          />
                          <Label for="checkbox25" />
                        </div>
                      </td>
                      <td>Version Control</td>
                      <td className="text-right">$72 854.5</td>
                      <td className="text-center">
                        <Sparklines
                          data={[16, 15, 4, 14, 13, 14, 20]}
                          style={{ width: "35px", height: "20px" }}
                        >
                          <SparklinesBars style={{ fill: "#4ebfbb" }} />
                        </Sparklines>
                      </td>
                    </tr>
                  </tbody>
                </Table>
              </div>
            </Widget>
          </Col>
        </Row>
      </div>
    );
  }
Example #21
Source File: LinksGroup.js    From sofia-react-template with MIT License 4 votes vote down vote up
LinksGroup = (props) => {

  const {
    link = "",
    childrenLinks = null,
    header = "",
    classname = "",
    isHeader = false,
    deep = 0,
    activeItem = "",
    label = "",
    exact = true
  } = props;

  const [headerLinkClicked, setHeaderLinkClicked] = useState(false);

  const togglePanelCollapse = (link, e) => {
    props.onActiveSidebarItemChange(link);
    setHeaderLinkClicked(!headerLinkClicked );
    e.preventDefault();
  }

  const isOpen = props.activeItem && props.activeItem.includes(props.index) && headerLinkClicked;

  // const { exact } = this.props.exact;

  if (!props.childrenLinks) {
    if (props.isHeader) {
      return (
        <li className={[s.headerLink, props.className].join(" ")}>
          <NavLink
            to={props.link}
            activeClassName={s.headerLinkActive}
            exact={exact}
            target={props.target}
          >
            <span className={s.icon}>
              {props.iconName}
            </span>
            {props.header}
            {props.label && <sup className={`text-${props.labelColor || 'warning'}`}>{props.label}</sup> }
            {props.badge && <Badge className={s.badge} color="secondary-red" pill>{props.badge}</Badge>}
          </NavLink>
        </li>
      );
    }
    return (
      <li>
        <NavLink
          to={props.link}
          activeClassName={s.headerLinkActive}
          onClick={(e) => {
            if (props.link.includes('menu')) {
              e.preventDefault();
            }
          }}
          exact={exact}
        >
          {<i className="fa fa-circle text-primary mr-2"/>} {props.header}
        </NavLink>
      </li>
    );
  }
  return (
    <Route
      path={props.link}
      children={(params) => {
        const { match } = params;
        return (
          <li className={classnames({ [s.headerLink]: props.isHeader }, props.className)}>
            <a className={classnames("d-flex", { [s.headerLinkActive]: match }, { [s.collapsed]: isOpen }, )}
               onClick={(e) => togglePanelCollapse(props.link, e)}
               href="#top"
            >
              {props.isHeader
                ? <span className={s.icon}>
                  {props.iconName}
                </span>
                : null
              }
              {props.header} {props.label && <sup className={`text-${props.labelColor || "warning"} ml-1`}>{props.label}</sup>}
              <b className={["fa fa-angle-right", s.caret].join(" ")} />
            </a>
            <Collapse className={s.panel} isOpen={isOpen}>
              <ul>
                {props.childrenLinks && props.childrenLinks.map((child, ind) =>
                  <LinksGroup
                    onActiveSidebarItemChange={props.onActiveSidebarItemChange}
                    activeItem={props.activeItem}
                    header={child.header}
                    link={child.link}
                    index={child.index}
                    childrenLinks={child.childrenLinks}
                    deep={props.deep + 1}
                    key={ind}
                  />,
                )}
              </ul>
            </Collapse>
          </li>
        );
      }}
    />
  );
}
Example #22
Source File: Tables.js    From sofia-react-template with MIT License 4 votes vote down vote up
Tables = function () {

  const [dropdownOpen, setDropdownOpen] = useState(false);
  const [firstTable] = useState(mock.firstTable);
  const [secondTable] = useState(mock.secondTable);
  const [transactions, setTransactions] = useState(mock.transactionsWidget);
  const [tasks, setTasks] = useState(mock.tasksWidget);
  const [firstTableCurrentPage, setFirstTableCurrentPage] = useState(0);
  const [secondTableCurrentPage, setSecondTableCurrentPage] = useState(0);
  const [tableDropdownOpen, setTableMenuOpen] = useState(false);

  const pageSize = 4;
  const firstTablePagesCount = Math.ceil(firstTable.length / pageSize);
  const secondTablePagesCount = Math.ceil(secondTable.length / pageSize);

  const setFirstTablePage = (e, index) => {
    e.preventDefault();
    setFirstTableCurrentPage(index);
  }

  const setSecondTablePage = (e, index) => {
    e.preventDefault();
    setSecondTableCurrentPage(index);
  }

  const toggle = () => {
    setDropdownOpen(!dropdownOpen);
  }

  const transactionMenuOpen = (id) => {
    setTransactions(
      transactions.map( transaction => {
        if (transaction.id === id) {
          transaction.dropdownOpen = !transaction.dropdownOpen;
        }
        return transaction;
      })
    )
  }

  const tableMenuOpen = () => {
    setTableMenuOpen(!tableDropdownOpen);
  }

  const toggleTask = (id) => {
    setTasks(
      tasks.map( task => {
        if (task.id === id) {
          task.completed = !task.completed;
        }
        return task;
      })
    )
  }

  return (
    <div>
      <Row>
        <Col>
          <Row className="mb-4">
            <Col>
              <Widget>
                <div className={s.tableTitle}>
                  <div className="headline-2">States Colors</div>
                  <div className="d-flex">
                    <a href="/#"><img src={searchIcon} alt="Search"/></a>
                    <a href="/#"><img className="d-none d-sm-block" src={cloudIcon} alt="Cloud" /></a>
                    <a href="/#"><img src={printerIcon} alt="Printer" /></a>
                    <a href="/#"><img className="d-none d-sm-block" src={optionsIcon} alt="Options" /></a>
                    <a href="/#"><img src={funnelIcon} alt="Funnel" /></a>
                  </div>
                </div>
                <div className="widget-table-overflow">
                  <Table className={`table-striped table-borderless table-hover ${s.statesTable}`} responsive>
                    <thead>
                    <tr>
                      <th className={s.checkboxCol}>
                        <div className="checkbox checkbox-primary">
                          <input
                            className="styled"
                            id="checkbox100"
                            type="checkbox"
                          />
                          <label for="checkbox100"/>
                        </div>
                      </th>
                      <th className="w-25">NAME</th>
                      <th className="w-25">COMPANY</th>
                      <th className="w-25">CITY</th>
                      <th className="w-25">STATE</th>
                    </tr>
                    </thead>
                    <tbody>
                    {firstTable
                      .slice(
                        firstTableCurrentPage * pageSize,
                        (firstTableCurrentPage + 1) * pageSize
                      )
                      .map(item => (
                        <tr key={uuidv4()}>
                          <td>
                            <div className="checkbox checkbox-primary">
                              <input
                                id={item.id}
                                className="styled"
                                type="checkbox"
                              />
                              <Label for={item.id} />
                            </div>
                          </td>
                          <td className="d-flex align-items-center"><img className={s.image} src={item.img} alt="User"/><span className="ml-3">{item.name}</span></td>
                          <td>{item.company}</td>
                          <td>{item.city}</td>
                          <td>{item.state}</td>
                        </tr>
                      ))}
                    </tbody>
                  </Table>
                  <Pagination className="pagination-borderless" aria-label="Page navigation example">
                    <PaginationItem disabled={firstTableCurrentPage <= 0}>
                      <PaginationLink
                        onClick={e => setFirstTablePage(e, firstTableCurrentPage - 1)}
                        previous
                        href="#top"
                      />
                    </PaginationItem>
                    {[...Array(firstTablePagesCount)].map((page, i) =>
                      <PaginationItem active={i === firstTableCurrentPage} key={i}>
                        <PaginationLink onClick={e => setFirstTablePage(e, i)} href="#top">
                          {i + 1}
                        </PaginationLink>
                      </PaginationItem>
                    )}
                    <PaginationItem disabled={firstTableCurrentPage >= firstTablePagesCount - 1}>
                      <PaginationLink
                        onClick={e => setFirstTablePage(e, firstTableCurrentPage + 1)}
                        next
                        href="#top"
                      />
                    </PaginationItem>
                  </Pagination>
                </div>
              </Widget>
            </Col>
          </Row>
          <Row className="mb-4">
            <Col>
              <Widget>
                <div className={s.tableTitle}>
                  <div className="headline-2">Material UI table</div>
                  <Dropdown
                    className="d-none d-sm-block"
                    nav
                    isOpen={tableDropdownOpen}
                    toggle={() => tableMenuOpen()}
                  >
                    <DropdownToggle nav>
                      <img className="d-none d-sm-block" src={moreIcon} alt="More..."/>
                    </DropdownToggle>
                    <DropdownMenu >
                      <DropdownItem>
                        <div>Copy</div>
                      </DropdownItem>
                      <DropdownItem>
                        <div>Edit</div>
                      </DropdownItem>
                      <DropdownItem>
                        <div>Delete</div>
                      </DropdownItem>
                    </DropdownMenu>
                  </Dropdown>
                </div>
                <div className="widget-table-overflow">
                  <Table className="table-striped table-borderless table-hover" responsive>
                    <thead>
                    <tr>
                      <th>
                        <div className="checkbox checkbox-primary">
                          <input
                            id="checkbox200"
                            className="styled"
                            type="checkbox"
                          />
                          <label for="checkbox200"/>
                        </div>
                      </th>
                      <th className={s.nameCol}>NAME</th>
                      <th>EMAIL</th>
                      <th>PRODUCT</th>
                      <th>PRICE</th>
                      <th>DATE</th>
                      <th>CITY</th>
                      <th>STATUS</th>
                    </tr>
                    </thead>
                    <tbody>
                    {secondTable
                      .slice(
                        secondTableCurrentPage * pageSize,
                        (secondTableCurrentPage + 1) * pageSize
                      )
                      .map(item => (
                      <tr key={uuidv4()}>
                        <td>
                          <div className="checkbox checkbox-primary">
                            <input
                              id={item.id}
                              className="styled"
                              type="checkbox"
                            />
                            <label for={item.id} />
                          </div>
                        </td>
                        <td>{item.name}</td>
                        <td>{item.email}</td>
                        <td>{item.product}</td>
                        <td>{item.price}</td>
                        <td>{item.date}</td>
                        <td>{item.city}</td>
                        <td><Badge color={item.color}>{item.status}</Badge></td>
                      </tr>
                    ))}
                    </tbody>
                  </Table>
                  <Pagination className="pagination-with-border">
                    <PaginationItem disabled={secondTableCurrentPage <= 0}>
                      <PaginationLink
                        onClick={e => setSecondTablePage(e, secondTableCurrentPage - 1)}
                        previous
                        href="#top"
                      />
                    </PaginationItem>
                    {[...Array(secondTablePagesCount)].map((page, i) =>
                      <PaginationItem active={i === secondTableCurrentPage} key={i}>
                        <PaginationLink onClick={e => setSecondTablePage(e, i)} href="#top">
                          {i + 1}
                        </PaginationLink>
                      </PaginationItem>
                    )}
                    <PaginationItem disabled={secondTableCurrentPage >= secondTablePagesCount - 1}>
                      <PaginationLink
                        onClick={e => setSecondTablePage(e, secondTableCurrentPage + 1)}
                        next
                        href="#top"
                      />
                    </PaginationItem>
                  </Pagination>
                </div>
              </Widget>
            </Col>
          </Row>
          <Row>
            <Col xs={12} xl={8} className="pr-grid-col">
              <Widget>
                <div className={s.tableTitle}>
                  <div className="headline-2">Recent transaction</div>
                  <div>
                    <ButtonDropdown
                      isOpen={dropdownOpen}
                      toggle={toggle}
                      className=""
                    >
                      <DropdownToggle caret>
                        &nbsp; Weekly &nbsp;
                      </DropdownToggle>
                      <DropdownMenu>
                        <DropdownItem>Daily</DropdownItem>
                        <DropdownItem>Weekly</DropdownItem>
                        <DropdownItem>Monthly</DropdownItem>
                      </DropdownMenu>
                    </ButtonDropdown>
                    {/*<img src="" alt="Filter option"/>*/}
                  </div>
                </div>
                <div className={s.widgetContentBlock}>
                  {transactions.map(item => (
                    <div key={uuidv4()} className={s.content}>
                      <div><img src={item.icon} alt="Item" /><span className="body-2 ml-3">{item.category}</span></div>
                      <div className="body-3 muted d-none d-md-block">{item.date}</div>
                      <div className="body-2">{item.price}</div>
                      <div className="body-3 muted d-none d-lg-block">{item.description}</div>

                      <Dropdown
                        className="d-none d-sm-block"
                        nav
                        isOpen={item.dropdownOpen}
                        toggle={() => transactionMenuOpen(item.id)}
                      >
                        <DropdownToggle nav>
                          <img className="d-none d-sm-block" src={moreIcon} alt="More ..."/>
                        </DropdownToggle>
                        <DropdownMenu >
                          <DropdownItem>
                            <div>Copy</div>
                          </DropdownItem>
                          <DropdownItem>
                            <div>Edit</div>
                          </DropdownItem>
                          <DropdownItem>
                            <div>Delete</div>
                          </DropdownItem>
                        </DropdownMenu>
                      </Dropdown>
                    </div>
                  ))}
                </div>
              </Widget>
            </Col>
            <Col xs={12} xl={4} className="pl-grid-col mt-4 mt-xl-0">
              <Widget>
                <div className={s.tableTitle}>
                  <div className="headline-2">Tasks</div>
                </div>
                <div className={s.widgetContentBlock}>
                  <TaskContainer tasks={tasks} toggleTask={toggleTask} />
                </div>
              </Widget>
            </Col>
          </Row>
        </Col>
      </Row>
    </div>
  )
}
Example #23
Source File: TaskStatusUpdate.js    From covidsos with MIT License 4 votes vote down vote up
render() {

    const {task, status, feedback, loading, isRejected, submitClicked} = this.state;
    const {what, why, request_address, urgent, name, mob_number, financial_assistance, status: existingStatus} = task;
    let { step } = this.state;

    // For admin task status update step 0 is skipped
    if(step === 0 && isAuthorisedUserLoggedIn ())
      step = 1;
    return (
        <>
          <Header showCards={false}/>
          {/* Page content */}
          <Container className="mt--7" fluid>
            <Row className="justify-content-center">
              <Col lg="8" md="8">
                <Card className="bg-secondary shadow border-0">
                  <CardBody className="px-lg-3 py-lg-3 text-justify">
                    <div className="text-uppercase text-center mt-2 mb-2">
                      Task Details
                    </div>
                  </CardBody>
                </Card>
              </Col>
            </Row>
          </Container>
          {
            step === 0 && (
                <Container className="request-card-container" fluid>
                  <Row>
                    <Col sm="12">
                      <Card
                          className='task-card task-card-status-update task-container content--center'>
                        {
                          !loading && (
                              <CardBody>
                                <h2>{name} - needs your help!</h2>
                                {
                                  urgent === 'yes' && (
                                      <Badge color="warning" className="margin-bottom-10">
                                        This is urgent request
                                      </Badge>
                                  )
                                }

                                <div className='margin-bottom-10'>
                                  <p className='no-margin label'>Address</p>
                                  <p className='no-margin'>{request_address}</p>
                                </div>

                                <div className='margin-bottom-10'>
                                  <p className='no-margin label'>Mobile Number</p>
                                  <p className='no-margin'>{mob_number}</p>
                                </div>

                                <div className='margin-bottom-10'>
                                  <p className='no-margin label'>Reason</p>
                                  <p className='no-margin'>{why}</p>
                                </div>

                                <div className='margin-bottom-10'>
                                  <p className='no-margin label'>Help required on</p>
                                  <p>{what}</p>
                                </div>

                                {
                                  financial_assistance && (
                                      <Badge color="warning" className="margin-bottom-20">
                                        This help seeker cannot afford to pay.
                                      </Badge>
                                  )
                                }

                                {
                                  existingStatus !== 'completed' && (
                                    <div style={{ display: 'flex'}}>
                                      <div style={{ maxWidth: '50%', marginRight: '20px'}}>
                                        <a href={'/faq'} target="_blank" rel="noopener noreferrer">
                                          <Button color="primary" style={{ width: '100%', whiteSpace: 'normal', padding: '8px', lineHeight: '1' }}>
                                            Have further questions?</Button>
                                        </a>
                                      </div>
                                      <div style={{ maxWidth: '50%'}}>
                                        <Button color="primary"
                                                onClick={() => this.setState({step: 1})}>Update
                                          Status</Button>
                                      </div>
                                    </div>
                                  )
                                }

                              </CardBody>
                          )
                        }
                        {
                          loading && (
                              <CardBody>
                                <CardTitle>Loading</CardTitle>
                              </CardBody>
                          )
                        }
                      </Card>
                    </Col>
                  </Row>
                </Container>
            )
          }

          {
            step === 1 && !loading && (
                <Container className="request-card-container" fluid>
                  <Row>
                    <Col sm="12">
                      <Card
                          className='task-card task-card-status-update task-container content--center'>
                        <CardBody>
                          <h2>{name} - needs your help!</h2>
                          {
                            urgent === 'yes' && (
                                <Badge color="warning" className="margin-bottom-10">
                                  This is urgent request
                                </Badge>
                            )
                          }

                          <Form>
                            <FormGroup>
                              <Label>Update Status</Label>
                              {
                                <>
                                  {
                                    (!isRejected || status === 'completed') && (
                                        <Button
                                            outline={status !== 'completed'}
                                            color={status === 'completed' ? "success" : 'secondary'}
                                            block
                                            onClick={() => this.setState({status: 'completed'})}
                                        >Yes, Task completed</Button>
                                    )
                                  }
                                  {
                                    isEmpty(status) && !isRejected && (
                                        <Button
                                            outline={!isRejected}
                                            color={isRejected ? "danger" : 'secondary'}
                                            block
                                            onClick={() => this.setState({isRejected: true})}
                                        >Can not complete</Button>
                                    )
                                  }
                                </>
                              }
                              {
                                isRejected && (
                                    <>
                                      <Button
                                          outline={status !== 'completed externally'}
                                          color={status === 'completed externally' ? "danger"
                                              : 'secondary'}
                                          block
                                          onClick={() => this.setState(
                                              {status: 'completed externally'})}
                                      >Somebody else did it</Button>
                                      <Button
                                          outline={status !== 'cancelled'}
                                          color={status === 'cancelled' ? "danger" : 'secondary'}
                                          block
                                          onClick={() => this.setState({status: 'cancelled'})}
                                      >Please assign new volunter</Button>
                                      <Button
                                          outline={status !== 'reported'}
                                          color={status === 'reported' ? "danger" : 'secondary'}
                                          block
                                          onClick={() => this.setState({status: 'reported'})}
                                      >Report issue</Button>
                                    </>
                                )
                              }
                            </FormGroup>

                            {
                              !isEmpty(status) && status !== 'not_completed' && (
                                  <FormGroup>
                                    <Label>What is your feedback for user?</Label>
                                    <Input
                                        autoComplete="off"
                                        type="textarea"
                                        name="feedback"
                                        placeholder="Add your feedback"
                                        value={feedback}
                                        onChange={(event) => this.setState(
                                            {feedback: event.target.value})}
                                    />
                                  </FormGroup>
                              )
                            }

                          </Form>

                          <div>
                            <Button color="primary"
                                    disabled={submitClicked || isEmpty(status) || isEmpty(feedback)}
                                    onClick={() => this.closeTask()}>Close Task</Button>
                          </div>
                        </CardBody>
                      </Card>
                    </Col>
                  </Row>
                </Container>
            )
          }
        </>
    )
  }
Example #24
Source File: RequestsContainer.js    From covidsos with MIT License 4 votes vote down vote up
getPopup(isAuthorisedUser) {
    const {isPopupOpen, popupRequest, popupRequestDetails, isVolunteerListLoading, assignVolunteer, volunteerList, assignData} = this.state;
    const {name, location, why, requestStr, source, helpText} = popupRequestDetails;
    return (<Popup open={isPopupOpen} closeOnEscape closeOnDocumentClick
                   position="right center"
                   contentStyle={{
                     borderRadius: "0.375rem",
                     minWidth: "50%",
                     width: "unset",
                     padding: "0px"
                   }}
                   overlayStyle={{background: "rgba(0, 0, 0, 0.85)"}}
                   className="col-md-6"
                   onClose={() => this.setState(
                       {isPopupOpen: false, assignVolunteer: false, assignData: {}})}>
          {
            close => (
                <div className="request-details-popup pre-scrollable-full-height-popup">
                  <CardHeader>
                    <Row className="justify-content-end">
                      <Button onClick={close}
                              className="close btn-icon btn-link border-0 text-dark">
                        <i className="fas fa-times" style={{fontSize: '1rem'}}/>
                      </Button>
                    </Row>
                    <div hidden={popupRequestDetails.accept_success}>
                      <Row className="justify-content-start">
                        <Col>
                          <img alt='logo' src={require("assets/img/icons/requestAccept.png")}/>
                        </Col>
                      </Row>
                      <Row className="justify-content-start mt-2">
                        <Col className="h2">{name} nearby needs help!</Col>
                      </Row>
                      <Row className="justify-content-start">
                        <Col>
                          <div className="col-1 d-inline-block"
                               style={{height: "100%", verticalAlign: "top"}}>
                            <span className="h2 text-red">&#9432;&nbsp;</span>
                          </div>
                          <div className="col-10 d-inline-block">
                          <span>
                            {popupRequest.urgent === "yes" ? 'This is an urgent request.'
                                : 'This request needs to be completed in 1-2 days.'}
                          </span>
                            <br/>
                            <span>
                            {popupRequest.financial_assistance === 1
                                ? 'This help seeker cannot afford to pay.'
                                : 'This help seeker can afford to pay.'}
                          </span>
                          </div>
                        </Col>
                      </Row>
                    </div>
                  </CardHeader>
                  <CardBody hidden={popupRequestDetails.accept_success}>
                    {displayRequestCardDetails('Address', location)}
                    {displayRequestCardDetails('Received via', source)}
                    {displayRequestCardDetails('Reason', why)}
                    {displayRequestCardDetails('Help Required', requestStr)}
                    {isAuthorisedUser && popupRequest.requestor_mob_number
                    && displayRequestCardDetails('Requestor Mob', <a
                        href={'tel:'
                        + popupRequest.requestor_mob_number}>{popupRequest.requestor_mob_number}</a>)}
                    {isAuthorisedUser && popupRequest.volunteer_name && displayRequestCardDetails(
                        'Volunteer Name',
                        popupRequest.volunteer_name)}
                    {isAuthorisedUser && popupRequest.volunteer_mob_number
                    && displayRequestCardDetails('Volunteer Mob', <a
                        href={'tel:'
                        + popupRequest.volunteer_mob_number}>{popupRequest.volunteer_mob_number}</a>)}
                    {isAuthorisedUser && popupRequest.assignment_time && displayRequestCardDetails(
                        'Time of request assignment', <Badge
                            color="warning">{popupRequest.assignment_time}</Badge>)}
                    {
                      popupRequest.type === 'pending' && !isAuthorisedUser &&
                      <>
                        <Form role="form" onSubmit={this.acceptRequest}>
                          <div
                              className="custom-control custom-control-alternative custom-radio d-flex mb-3">
                            <div>
                              <input
                                  className="custom-control-input"
                                  id="IWillHelp"
                                  type="radio"
                                  value="yes"
                                  name="i_will_help"
                                  onClick={e => {
                                    this.setState({
                                      popupRequest: {
                                        ...popupRequest,
                                        accept: e.target.value === 'yes'
                                      }
                                    });
                                  }}/>
                              <label className="custom-control-label" htmlFor="IWillHelp">
                                <span>I will try my best to help this person</span>
                              </label>
                            </div>
                          </div>
                          <Col className="text-center">
                            <WhatsappShareButton
                                url={popupRequest.accept_link}
                                title={helpText}
                                style={{
                                  border: "#2dce89 1px solid",
                                  borderRadius: "0.375rem",
                                  padding: "0.625rem 1.25rem",
                                  color: "#2dce89"
                                }}
                                className="btn btn-outline-success"
                            >
                              <i className="fab fa-whatsapp"/> Share
                            </WhatsappShareButton>
                            <Button color="primary" type="submit"
                                    disabled={!popupRequest.accept}>I will help</Button>
                          </Col>
                        </Form>
                      </>
                    }
                    {
                      assignVolunteer && isVolunteerListLoading &&
                      <Col className="text-center h3">
                        Loading
                      </Col>
                    }
                    {
                      assignVolunteer && !isVolunteerListLoading &&
                      <Form role="form" onSubmit={this.assignVolunteerSubmit}>
                        {getVolunteerOptionsFormByDistance(volunteerList, popupRequest.latitude,
                            popupRequest.longitude, assignData.volunteer_id,
                            (e) => this.updateAssignVolunteerId(e.target.value))}
                        <div className="text-center">
                          <Button className="mt-4" color="primary" type="submit"
                                  disabled={this.isAssignSubmitDisabled()}>
                            Assign
                          </Button>
                        </div>
                      </Form>
                    }
                  </CardBody>
                  <CardBody hidden={!popupRequestDetails.accept_success} className="text-center">
                    <img className="accept-confirm-img" alt='confirm'
                         src={require("assets/img/brand/accept_confirm.png")}/>
                    <Button color="outline-primary" className="btn mt-4"
                            onClick={() => this.props.history.push("/taskboard")}>
                      Continue to #CovidHERO Dashboard
                    </Button>
                  </CardBody>
                  <CardFooter hidden={popupRequestDetails.accept_success}>
                    <Row>
                      <Col xs={6} md={3} className="mb-4">
                        {getShareButtons(popupRequest.accept_link, helpText)}
                      </Col>
                      {isAuthorisedUser && this.getAuthorisedUserButtons(popupRequest, assignVolunteer)}
                    </Row>
                  </CardFooter>
                </div>
            )}
        </Popup>
    );
  }
Example #25
Source File: ListGroups.js    From id.co.moonlay-eworkplace-admin-web with MIT License 4 votes vote down vote up
render() {
    return (
      <div className="animated fadeIn">
        <Row>
          <Col sm="12" xl="6">
            <Card>
              <CardHeader>
                <i className="fa fa-align-justify"></i><strong>List Group</strong>
                <div className="card-header-actions">
                  <a href="https://reactstrap.github.io/components/listgroup/" rel="noreferrer noopener" target="_blank" className="card-header-action">
                    <small className="text-muted">docs</small>
                  </a>
                </div>
              </CardHeader>
              <CardBody>
                <ListGroup>
                  <ListGroupItem>Cras justo odio</ListGroupItem>
                  <ListGroupItem>Dapibus ac facilisis in</ListGroupItem>
                  <ListGroupItem>Morbi leo risus</ListGroupItem>
                  <ListGroupItem>Porta ac consectetur ac</ListGroupItem>
                  <ListGroupItem>Vestibulum at eros</ListGroupItem>
                </ListGroup>
              </CardBody>
            </Card>
          </Col>
          <Col sm="12" xl="6">
            <Card>
              <CardHeader>
                <i className="fa fa-align-justify"></i><strong>List Group</strong>
                <small> tags</small>
              </CardHeader>
              <CardBody>
                <ListGroup>
                  <ListGroupItem className="justify-content-between">Cras justo odio <Badge className="float-right" pill>14</Badge></ListGroupItem>
                  <ListGroupItem className="justify-content-between">Dapibus ac facilisis in <Badge className="float-right" pill>2</Badge></ListGroupItem>
                  <ListGroupItem className="justify-content-between">Morbi leo risus <Badge className="float-right" pill
                                                                                            color="warning">1</Badge></ListGroupItem>
                </ListGroup>
              </CardBody>
            </Card>
          </Col>
        </Row>
        <Row>
          <Col sm="12" xl="6">
            <Card>
              <CardHeader>
                <i className="fa fa-align-justify"></i><strong>List Group</strong>
                <small> disabled items</small>
              </CardHeader>
              <CardBody>
                <ListGroup>
                  <ListGroupItem disabled tag="a" href="#">Cras justo odio</ListGroupItem>
                  <ListGroupItem tag="a" href="#">Dapibus ac facilisis in</ListGroupItem>
                  <ListGroupItem disabled tag="a" href="#">Morbi leo risus</ListGroupItem>
                  <ListGroupItem tag="a" href="#">Porta ac consectetur ac</ListGroupItem>
                  <ListGroupItem tag="a" href="#">Vestibulum at eros</ListGroupItem>
                </ListGroup>
              </CardBody>
            </Card>
          </Col>
          <Col sm="12" xl="6">
            <Card>
              <CardHeader>
                <i className="fa fa-align-justify"></i><strong>List Group</strong>
                <small> contextual classes</small>
              </CardHeader>
              <CardBody>
                <ListGroup>
                  <ListGroupItem action color="success">Cras justo odio</ListGroupItem>
                  <ListGroupItem action color="info">Dapibus ac facilisis in</ListGroupItem>
                  <ListGroupItem action color="warning">Morbi leo risus</ListGroupItem>
                  <ListGroupItem action color="danger">Porta ac consectetur ac</ListGroupItem>
                </ListGroup>
              </CardBody>
            </Card>
          </Col>
        </Row>
        <Row>
          <Col sm="12" xl="6">
            <Card>
              <CardHeader>
                <i className="fa fa-align-justify"></i><strong>List Group</strong>
                <small> anchors</small>
              </CardHeader>
              <CardBody>
                <p>Be sure to <strong>not use the standard <code>.btn</code> classes here</strong>.</p>
                <ListGroup>
                  <ListGroupItem active tag="a" href="#" action>Cras justo odio</ListGroupItem>
                  <ListGroupItem tag="a" href="#" action>Dapibus ac facilisis in</ListGroupItem>
                  <ListGroupItem tag="a" href="#" action>Morbi leo risus</ListGroupItem>
                  <ListGroupItem tag="a" href="#" action>Porta ac consectetur ac</ListGroupItem>
                  <ListGroupItem disabled tag="a" href="#" action>Vestibulum at eros</ListGroupItem>
                </ListGroup>
                <p />
              </CardBody>
            </Card>
          </Col>
          <Col sm="12" xl="6">
            <Card>
              <CardHeader>
                <i className="fa fa-align-justify"></i><strong>List Group</strong>
                <small> buttons</small>
              </CardHeader>
              <CardBody>
                <ListGroup>
                  <ListGroupItem active tag="button" action>Cras justo odio</ListGroupItem>
                  <ListGroupItem tag="button" action>Dapibus ac facilisis in</ListGroupItem>
                  <ListGroupItem tag="button" action>Morbi leo risus</ListGroupItem>
                  <ListGroupItem tag="button" action>Porta ac consectetur ac</ListGroupItem>
                  <ListGroupItem disabled tag="button" action>Vestibulum at eros</ListGroupItem>
                </ListGroup>
              </CardBody>
            </Card>
          </Col>
        </Row>
        <Row>
          <Col sm="12" xl="6">
            <Card>
              <CardHeader>
                <i className="fa fa-align-justify"></i><strong>List Group</strong>
                <small> custom content</small>
              </CardHeader>
              <CardBody>
                <ListGroup>
                  <ListGroupItem active action>
                    <ListGroupItemHeading>List group item heading</ListGroupItemHeading>
                    <ListGroupItemText>
                      Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
                    </ListGroupItemText>
                  </ListGroupItem>
                  <ListGroupItem action>
                    <ListGroupItemHeading>List group item heading</ListGroupItemHeading>
                    <ListGroupItemText>
                      Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
                    </ListGroupItemText>
                  </ListGroupItem>
                  <ListGroupItem action>
                    <ListGroupItemHeading>List group item heading</ListGroupItemHeading>
                    <ListGroupItemText>
                      Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
                    </ListGroupItemText>
                  </ListGroupItem>
                </ListGroup>
              </CardBody>
            </Card>
          </Col>
        </Row>
        <Row>
          <Col>
            <Card>
              <CardHeader>
                <i className="fa fa-align-justify"></i><strong>List Group</strong> <small>with TabPanes</small>
                <div className="card-header-actions">
                  <Badge>NEW</Badge>
                </div>
              </CardHeader>
              <CardBody>
                <Row>
                  <Col xs="4">
                    <ListGroup id="list-tab" role="tablist">
                      <ListGroupItem onClick={() => this.toggle(0)} action active={this.state.activeTab === 0} >Home</ListGroupItem>
                      <ListGroupItem onClick={() => this.toggle(1)} action active={this.state.activeTab === 1} >Profile</ListGroupItem>
                      <ListGroupItem onClick={() => this.toggle(2)} action active={this.state.activeTab === 2} >Messages</ListGroupItem>
                      <ListGroupItem onClick={() => this.toggle(3)} action active={this.state.activeTab === 3} >Settings</ListGroupItem>
                    </ListGroup>
                  </Col>
                  <Col xs="8">
                    <TabContent activeTab={this.state.activeTab}>
                      <TabPane tabId={0} >
                        <p>Velit aute mollit ipsum ad dolor consectetur nulla officia culpa adipisicing exercitation fugiat tempor. Voluptate deserunt sit sunt
                          nisi aliqua fugiat proident ea ut. Mollit voluptate reprehenderit occaecat nisi ad non minim
                          tempor sunt voluptate consectetur exercitation id ut nulla. Ea et fugiat aliquip nostrud sunt incididunt consectetur culpa aliquip
                          eiusmod dolor. Anim ad Lorem aliqua in cupidatat nisi enim eu nostrud do aliquip veniam minim.</p>
                      </TabPane>
                      <TabPane tabId={1}>
                        <p>Cupidatat quis ad sint excepteur laborum in esse qui. Et excepteur consectetur ex nisi eu do cillum ad laborum. Mollit et eu officia
                          dolore sunt Lorem culpa qui commodo velit ex amet id ex. Officia anim incididunt laboris deserunt
                          anim aute dolor incididunt veniam aute dolore do exercitation. Dolor nisi culpa ex ad irure in elit eu dolore. Ad laboris ipsum
                          reprehenderit irure non commodo enim culpa commodo veniam incididunt veniam ad.</p>
                      </TabPane>
                      <TabPane tabId={2}>
                        <p>Ut ut do pariatur aliquip aliqua aliquip exercitation do nostrud commodo reprehenderit aute ipsum voluptate. Irure Lorem et laboris
                          nostrud amet cupidatat cupidatat anim do ut velit mollit consequat enim tempor. Consectetur
                          est minim nostrud nostrud consectetur irure labore voluptate irure. Ipsum id Lorem sit sint voluptate est pariatur eu ad cupidatat et
                          deserunt culpa sit eiusmod deserunt. Consectetur et fugiat anim do eiusmod aliquip nulla
                          laborum elit adipisicing pariatur cillum.</p>
                      </TabPane>
                      <TabPane tabId={3}>
                        <p>Irure enim occaecat labore sit qui aliquip reprehenderit amet velit. Deserunt ullamco ex elit nostrud ut dolore nisi officia magna
                          sit occaecat laboris sunt dolor. Nisi eu minim cillum occaecat aute est cupidatat aliqua labore
                          aute occaecat ea aliquip sunt amet. Aute mollit dolor ut exercitation irure commodo non amet consectetur quis amet culpa. Quis ullamco
                          nisi amet qui aute irure eu. Magna labore dolor quis ex labore id nostrud deserunt dolor
                          eiusmod eu pariatur culpa mollit in irure.</p>
                      </TabPane>
                    </TabContent>
                  </Col>
                </Row>
              </CardBody>
            </Card>
          </Col>
        </Row>
      </div>
    );
  }
Example #26
Source File: blog-post.js    From Blogs with MIT License 4 votes vote down vote up
BlogPostTemplate = ({
  content,
  contentComponent,
  description,
  tags,
  title,
  helmet,
  author,
  date,
}) => {
  const PostContent = contentComponent || Content;

  return (
    <section
      className="section"
      style={{
        zIndex: "-1",
        marginTop: "0 !important",
        background:
          "url('data:image/png;base64,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'), rgb(245,245,245)",
      }}
    >
      {helmet || ""}
      <div style={{ backgroundColor: "rgba(205,205,205,0.7)" }}>
        <div className="container pt-3 pb-3">
          <div className="">
            <div
              className="card"
              style={{
                height: "auto",
                margin: "1% 0",
                borderRadius: "20px",
                zIndex: "10",
              }}
            >
              <h1
                className="is-size-2 has-text-weight-bold is-bold-light blog-title"
                style={{
                  fontSize: "3em",
                }}
              >
                {title}
                {date && (
                  <span
                    style={{
                      fontSize: "0.5em",
                      fontWeight: "normal",
                      color: "#24242433",
                    }}
                    className="ml-2"
                  >
                    {date}
                  </span>
                )}
              </h1>
              {author && (
                <div
                  style={{
                    fontSize: "1.8em",
                    fontWeight: "bold",
                    color: "#00bf8f",
                  }}
                  className="mr-3"
                >
                  {author}
                </div>
              )}

              <p className="blog-description">{description}</p>
              {tags && tags.length ? (
                <div>
                  {/* <h4>Tags: </h4> */}
                  <ul className="taglist" style={{ listStyleType: "none" }}>
                    {tags.map((tag) => (
                      <Badge
                        style={{
                          padding: "5px 10px",
                          margin: "5px",
                          background: "#00c18f",
                        }}
                        key={tag + `tag`}
                      >
                        <Link
                          className="links-tags"
                          to={`/categories/${kebabCase(tag)}/`}
                        >
                          {tag}
                        </Link>
                      </Badge>
                    ))}
                  </ul>
                </div>
              ) : null}
              <PostContent content={content} className="blog-post-content" />

              <div
                className="btn btn-secondary mb-2"
                style={{ width: "120px" }}
              >
                {/* eslint-disable-next-line */}
                <div className="links" onClick={() => window.history.back()}>
                  <ChevronDoubleLeft /> Go Back
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}
Example #27
Source File: Cards.js    From id.co.moonlay-eworkplace-admin-web with MIT License 4 votes vote down vote up
render() {
    return (
      <div className="animated fadeIn">
        <Row>
          <Col xs="12" sm="6" md="4">
            <Card>
              <CardHeader>
                Card title
              </CardHeader>
              <CardBody>
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
                laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
                ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
              </CardBody>
            </Card>
          </Col>
          <Col xs="12" sm="6" md="4">
            <Card>
              <CardBody>
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
                laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
                ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
              </CardBody>
              <CardFooter>Card footer</CardFooter>
            </Card>
          </Col>
          <Col xs="12" sm="6" md="4">
            <Card>
              <CardHeader>
                Card with icon
                <div className="card-header-actions">
                  <i className="fa fa-check float-right"></i>
                </div>
              </CardHeader>
              <CardBody>
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
                laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
                ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
              </CardBody>
            </Card>
          </Col>
          <Col xs="12" sm="6" md="4">
            <Card>
              <CardHeader>
                Card with switch
                <div className="card-header-actions">
                  <AppSwitch className={'float-right mb-0'} label color={'info'} defaultChecked size={'sm'}/>
                </div>
              </CardHeader>
              <CardBody>
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
                laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
                ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
              </CardBody>
            </Card>
          </Col>
          <Col xs="12" sm="6" md="4">
            <Card>
              <CardHeader>
                Card with label
                <div className="card-header-actions">
                  <Badge color="success" className="float-right">Success</Badge>
                </div>
              </CardHeader>
              <CardBody>
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
                laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
                ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
              </CardBody>
            </Card>
          </Col>
          <Col xs="12" sm="6" md="4">
            <Card>
              <CardHeader>
                Card with label
                <div className="card-header-actions">
                  <Badge pill color="danger" className="float-right">42</Badge>
                </div>
              </CardHeader>
              <CardBody>
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
                laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
                ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
              </CardBody>
            </Card>
          </Col>
        </Row>
        <Row>
          <Col xs="12" sm="6" md="4">
            <Card className="border-primary">
              <CardHeader>
                Card outline primary
              </CardHeader>
              <CardBody>
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
                laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
                ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
              </CardBody>
            </Card>
          </Col>
          <Col xs="12" sm="6" md="4">
            <Card className="border-secondary">
              <CardHeader>
                Card outline secondary
              </CardHeader>
              <CardBody>
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
                laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
                ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
              </CardBody>
            </Card>
          </Col>
          <Col xs="12" sm="6" md="4">
            <Card className="border-success">
              <CardHeader>
                Card outline success
              </CardHeader>
              <CardBody>
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
                laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
                ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
              </CardBody>
            </Card>
          </Col>
          <Col xs="12" sm="6" md="4">
            <Card className="border-info">
              <CardHeader>
                Card outline info
              </CardHeader>
              <CardBody>
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
                laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
                ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
              </CardBody>
            </Card>
          </Col>
          <Col xs="12" sm="6" md="4">
            <Card className="border-warning">
              <CardHeader>
                Card outline warning
              </CardHeader>
              <CardBody>
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
                laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
                ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
              </CardBody>
            </Card>
          </Col>
          <Col xs="12" sm="6" md="4">
            <Card className="border-danger">
              <CardHeader>
                Card outline danger
              </CardHeader>
              <CardBody>
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
                laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
                ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
              </CardBody>
            </Card>
          </Col>
        </Row>

        <Row>
          <Col xs="12" sm="6" md="4">
            <Card className="card-accent-primary">
              <CardHeader>
                Card with accent
              </CardHeader>
              <CardBody>
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
                laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
                ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
              </CardBody>
            </Card>
          </Col>
          <Col xs="12" sm="6" md="4">
            <Card className="card-accent-secondary">
              <CardHeader>
                Card with accent
              </CardHeader>
              <CardBody>
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
                laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
                ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
              </CardBody>
            </Card>
          </Col>
          <Col xs="12" sm="6" md="4">
            <Card className="card-accent-success">
              <CardHeader>
                Card with accent
              </CardHeader>
              <CardBody>
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
                laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
                ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
              </CardBody>
            </Card>
          </Col>
          <Col xs="12" sm="6" md="4">
            <Card className="card-accent-info">
              <CardHeader>
                Card with accent
              </CardHeader>
              <CardBody>
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
                laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
                ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
              </CardBody>
            </Card>
          </Col>
          <Col xs="12" sm="6" md="4">
            <Card className="card-accent-warning">
              <CardHeader>
                Card with accent
              </CardHeader>
              <CardBody>
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
                laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
                ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
              </CardBody>
            </Card>
          </Col>
          <Col xs="12" sm="6" md="4">
            <Card className="card-accent-danger">
              <CardHeader>
                Card with accent
              </CardHeader>
              <CardBody>
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
                laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
                ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
              </CardBody>
            </Card>
          </Col>
        </Row>
        <Row>
          <Col xs="12" sm="6" md="4">
            <Card className="text-white bg-primary text-center">
              <CardBody>
                <blockquote className="card-bodyquote">
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
                  <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
                </blockquote>
              </CardBody>
            </Card>
          </Col>
          <Col xs="12" sm="6" md="4">
            <Card className="text-white bg-success text-center">
              <CardBody>
                <blockquote className="card-bodyquote">
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
                  <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
                </blockquote>
              </CardBody>
            </Card>
          </Col>
          <Col xs="12" sm="6" md="4">
            <Card className="text-white bg-info text-center">
              <CardBody>
                <blockquote className="card-bodyquote">
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
                  <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
                </blockquote>
              </CardBody>
            </Card>
          </Col>
          <Col xs="12" sm="6" md="4">
            <Card className="text-white bg-warning text-center">
              <CardBody>
                <blockquote className="card-bodyquote">
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
                  <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
                </blockquote>
              </CardBody>
            </Card>
          </Col>
          <Col xs="12" sm="6" md="4">
            <Card className="text-white bg-danger text-center">
              <CardBody>
                <blockquote className="card-bodyquote">
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
                  <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
                </blockquote>
              </CardBody>
            </Card>
          </Col>
          <Col xs="12" sm="6" md="4">
            <Card className="text-white bg-primary text-center">
              <CardBody>
                <blockquote className="card-bodyquote">
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
                  <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
                </blockquote>
              </CardBody>
            </Card>
          </Col>
        </Row>
        <Row>
          <Col xs="12" sm="6" md="4">
            <Card className="text-white bg-primary">
              <CardHeader>
                Card title
              </CardHeader>
              <CardBody>
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
                laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
                ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
              </CardBody>
            </Card>
          </Col>
          <Col xs="12" sm="6" md="4">
            <Card className="text-white bg-success">
              <CardHeader>
                Card title
              </CardHeader>
              <CardBody>
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
                laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
                ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
              </CardBody>
            </Card>
          </Col>
          <Col xs="12" sm="6" md="4">
            <Card className="text-white bg-info">
              <CardHeader>
                Card title
              </CardHeader>
              <CardBody>
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
                laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
                ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
              </CardBody>
            </Card>
          </Col>
          <Col xs="12" sm="6" md="4">
            <Card className="text-white bg-warning">
              <CardHeader>
                Card title
              </CardHeader>
              <CardBody>
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
                laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
                ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
              </CardBody>
            </Card>
          </Col>
          <Col xs="12" sm="6" md="4">
            <Card className="text-white bg-danger">
              <CardHeader>
                Card title
              </CardHeader>
              <CardBody>
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
                laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
                ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
              </CardBody>
            </Card>
          </Col>
          <Col xs="12" sm="6" md="4">
            <Fade timeout={this.state.timeout} in={this.state.fadeIn}>
              <Card>
                <CardHeader>
                  Card actions
                  <div className="card-header-actions">
                    {/*eslint-disable-next-line*/}
                    <a href="#" className="card-header-action btn btn-setting"><i className="icon-settings"></i></a>
                    {/*eslint-disable-next-line*/}
                    <a className="card-header-action btn btn-minimize" data-target="#collapseExample" onClick={this.toggle}><i className="icon-arrow-up"></i></a>
                    {/*eslint-disable-next-line*/}
                    <a className="card-header-action btn btn-close" onClick={this.toggleFade}><i className="icon-close"></i></a>
                  </div>
                </CardHeader>
                <Collapse isOpen={this.state.collapse} id="collapseExample">
                  <CardBody>
                    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
                    laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
                    ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
                  </CardBody>
                </Collapse>
              </Card>
            </Fade>
          </Col>

        </Row>
      </div>
    );
  }
Example #28
Source File: DemoDashboard.jsx    From react-lte with MIT License 4 votes vote down vote up
export default function DemoDashboard() {
  return (
    <>
      <LteContentHeader title='Dashboard' />
      <LteContent>
        <Row>
          <Col xs='12' sm='6' md='3'>
            <LteInfoBox icon={faCog} text='CPU Traffic' number='10%' iconColor='info' />
          </Col>
          <Col xs='12' sm='6' md='3'>
            <LteInfoBox icon={faThumbsUp} text='Likes' number='41,410' iconColor='danger' />
          </Col>
          <div className='clearfix hidden-md-up' />
          <Col xs='12' sm='6' md='3'>
            <LteInfoBox icon={faShoppingCart} text='Sales' number='760' iconColor='success' />
          </Col>
          <Col xs='12' sm='6' md='3'>
            <LteInfoBox icon={faUsers} text='New Members' number='2,000' iconColor='warning' />
          </Col>
        </Row>

        <Row>
          <Col lg='3' xs='6'>
            <LteSmallBox title='150' message='New Orders' href='/info' icon={faShoppingBasket} color='info' />
          </Col>
          <Col lg='3' xs='6'>
            <LteSmallBox title='53%' message='Bounce Rate' href='/info' icon={faChartBar} color='success' />
          </Col>
          <Col lg='3' xs='6'>
            <LteSmallBox title='44' message='User Registrations' href='/info' icon={faUserPlus} color='warning' />
          </Col>
          <Col lg='3' xs='6'>
            <LteSmallBox title='65' message='Unique Visitors' href='/info' icon={faChartPie} color='danger' />
          </Col>
        </Row>

        <Row>
          <Col lg='8'>
            <Card>
              <CardHeader className='border-transparent'>
                <CardTitle>Latest Orders</CardTitle>
                <LteCardTools>
                  <Button color='' className='btn-tool' data-card-widget='collapse'>
                    <FontAwesomeIcon icon={faMinus} />
                  </Button>
                  <Button color='' className='btn-tool' data-card-widget='remove'>
                    <FontAwesomeIcon icon={faTimes} />
                  </Button>
                </LteCardTools>
              </CardHeader>
              <CardBody className='p-0'>
                <Table responsive>
                  <thead>
                    <tr>
                      <th>Order ID</th>
                      <th>Item</th>
                      <th>Status</th>
                      <th>Popularity</th>
                    </tr>
                  </thead>

                  <tbody>
                    <tr>
                      <td>OR9842</td>
                      <td>Call of Duty IV</td>
                      <td>
                        <Badge tag='span' color='success'>
                          Shipped
                        </Badge>
                      </td>
                      <td>
                        <div className='sparkbar' data-color='#00a65a' data-height='20'>
                          90,80,90,-70,61,-83,63
                        </div>
                      </td>
                    </tr>
                    <tr>
                      <td>OR1848</td>
                      <td>Samsung Smart TV</td>
                      <td>
                        <Badge tag='span' color='warning'>
                          Pending
                        </Badge>
                      </td>
                      <td>
                        <div className='sparkbar' data-color='#f39c12' data-height='20'>
                          90,80,-90,70,61,-83,68
                        </div>
                      </td>
                    </tr>
                    <tr>
                      <td>OR7429</td>
                      <td>iPhone 6 Plus</td>
                      <td>
                        <Badge tag='span' color='danger'>
                          Delivered
                        </Badge>
                      </td>
                      <td>
                        <div className='sparkbar' data-color='#f56954' data-height='20'>
                          90,-80,90,70,-61,83,63
                        </div>
                      </td>
                    </tr>
                    <tr>
                      <td>OR7429</td>
                      <td>Samsung Smart TV</td>
                      <td>
                        <Badge tag='span' color='info'>
                          Processing
                        </Badge>
                      </td>
                      <td>
                        <div className='sparkbar' data-color='#00c0ef' data-height='20'>
                          90,80,-90,70,-61,83,63
                        </div>
                      </td>
                    </tr>
                    <tr>
                      <td>OR1848</td>
                      <td>Samsung Smart TV</td>
                      <td>
                        <Badge tag='span' color='warning'>
                          Pending
                        </Badge>
                      </td>
                      <td>
                        <div className='sparkbar' data-color='#f39c12' data-height='20'>
                          90,80,-90,70,61,-83,68
                        </div>
                      </td>
                    </tr>
                    <tr>
                      <td>OR7429</td>
                      <td>iPhone 6 Plus</td>
                      <td>
                        <Badge tag='span' color='danger'>
                          Delivered
                        </Badge>
                      </td>
                      <td>
                        <div className='sparkbar' data-color='#f56954' data-height='20'>
                          90,-80,90,70,-61,83,63
                        </div>
                      </td>
                    </tr>
                    <tr>
                      <td>OR9842</td>
                      <td>Call of Duty IV</td>
                      <td>
                        <Badge tag='span' color='success'>
                          Shipped
                        </Badge>
                      </td>
                      <td>
                        <div className='sparkbar' data-color='#00a65a' data-height='20'>
                          90,80,90,-70,61,-83,63
                        </div>
                      </td>
                    </tr>
                  </tbody>
                </Table>
              </CardBody>
            </Card>

            <Row>
              <Col lg='6'>
                <LteDirectChat color='warning'>
                  <CardHeader>
                    <CardTitle>Direct Chat</CardTitle>
                    <LteCardTools>
                      <Badge color='warning' data-toggle='tooltip' title='3 New Messages'>
                        3
                      </Badge>
                      <Button className='btn-tool' color='' data-card-widget='collapse'>
                        <FontAwesomeIcon icon={faMinus} />
                      </Button>
                      <Button
                        color=''
                        className='btn-tool'
                        data-toggle='tooltip'
                        title='Contacts'
                        data-widget='chat-pane-toggle'
                      >
                        <FontAwesomeIcon icon={faComments} />
                      </Button>
                      <Button color='' className='btn-tool' data-card-widget='remove'>
                        <FontAwesomeIcon icon={faTimes} />
                      </Button>
                    </LteCardTools>
                  </CardHeader>
                  <CardBody>
                    <LteDirectChatMessages>
                      <LteDirectChatMsg
                        name='Alexander Pierce'
                        date='23 Jan 2:00 pm'
                        image={user1}
                        message="Is this template really for free? That's unbelievable!"
                      />
                      <LteDirectChatMsg
                        right
                        name='Sarah Bullock'
                        date='23 Jan 2:05 pm'
                        image={user3}
                        message='You better believe it!'
                      />
                      <LteDirectChatMsg
                        name='Alexander Pierce'
                        date='23 Jan 5:37 pm'
                        image={user1}
                        message='Working with AdminLTE on a great new app! Wanna join?'
                      />
                      <LteDirectChatMsg
                        right
                        name='Sarah Bullock'
                        date='23 Jan 6:10 pm'
                        image={user3}
                        message='I would love to.'
                      />
                    </LteDirectChatMessages>
                    <LteDirectChatContacts>
                      <LteContactsList>
                        <LteContactsListItem
                          href='/contacts'
                          image={user1}
                          name='Count Dracula'
                          date='2/28/2015'
                          message='How have you been? I was...'
                        />
                        <LteContactsListItem
                          href='/contacts'
                          image={user7}
                          name='Sarah Doe'
                          date='2/23/2015'
                          message='I will be waiting for...'
                        />
                        <LteContactsListItem
                          href='/contacts'
                          image={user3}
                          name='Nadia Jolie'
                          date='2/20/2015'
                          message="I'll call you back at..."
                        />
                        <LteContactsListItem
                          href='/contacts'
                          image={user5}
                          name='Nora S. Vans'
                          date='2/10/2015'
                          message='Where is your new...'
                        />
                        <LteContactsListItem
                          href='/contacts'
                          image={user6}
                          name='John K.'
                          date='1/27/2015'
                          message='Can I take a look at...'
                        />
                        <LteContactsListItem
                          href='/contacts'
                          image={user8}
                          name='Kenneth M.'
                          date='1/4/2015'
                          message='Never mind I found...'
                        />
                      </LteContactsList>
                    </LteDirectChatContacts>
                  </CardBody>
                  <CardFooter>
                    <Form>
                      <InputGroup>
                        <Input placeholder='Type Message ...' />
                        <InputGroupAddon addonType='append'>
                          <Button color='warning'>Send</Button>
                        </InputGroupAddon>
                      </InputGroup>
                    </Form>
                  </CardFooter>
                </LteDirectChat>
              </Col>
              <Col lg='6'>
                <Card>
                  <CardHeader>
                    <CardTitle>Latest Members</CardTitle>
                    <LteCardTools>
                      <Badge color='danger'>8 New Members</Badge>
                      <Button className='btn-tool' color='' data-card-widget='collapse'>
                        <FontAwesomeIcon icon={faMinus} />
                      </Button>
                      <Button color='' className='btn-tool' data-card-widget='remove'>
                        <FontAwesomeIcon icon={faTimes} />
                      </Button>
                    </LteCardTools>
                  </CardHeader>
                  <CardBody className='p-0'>
                    <LteUsersList>
                      <LteUsersListItem image={user1} href='/users' name='Alexander Pierce' date='Today' />
                      <LteUsersListItem image={user8} href='/users' name='Norman' date='Yesterday' />
                      <LteUsersListItem image={user7} href='/users' name='Jane' date='12 Jan' />
                      <LteUsersListItem image={user6} href='/users' name='John' date='12 Jan' />
                      <LteUsersListItem image={user2} href='/users' name='Alexander' date='13 Jan' />
                      <LteUsersListItem image={user5} href='/users' name='Sarah' date='14 Jan' />
                      <LteUsersListItem image={user4} href='/users' name='Nora' date='15 Jan' />
                      <LteUsersListItem image={user3} href='/users' name='Nadia' date='15 Jan' />
                    </LteUsersList>
                  </CardBody>
                </Card>
              </Col>
            </Row>
          </Col>
          <Col lg='4'>
            <LteInfoBox icon={faTag} text='Inventory' number='5,200' bgColor='warning' />
            <LteInfoBox icon={faHeart} text='Mentions' number='92,050' bgColor='success' />
            <LteInfoBox icon={faCloudDownloadAlt} text='Downloads' number='114,381' bgColor='danger' />
            <LteInfoBox icon={faComment} text='Direct Messages' number='163,921' bgColor='info' />
            <Card>
              <CardHeader className='border-0'>
                <CardTitle>Online Store Overview</CardTitle>
                <LteCardTools>
                  <Button className='btn-tool' color=''>
                    <FontAwesomeIcon icon={faDownload} />
                  </Button>
                  <Button color='' className='btn-tool'>
                    <FontAwesomeIcon icon={faBars} />
                  </Button>
                </LteCardTools>
              </CardHeader>
              <CardBody>
                <div className='d-flex justify-content-between align-items-center border-bottom mb-3'>
                  <p className='text-success text-xl'>
                    <FontAwesomeIcon icon={faRedo} />
                  </p>
                  <p className='d-flex flex-column text-right'>
                    <span className='font-weight-bold'>
                      <FontAwesomeIcon icon={faArrowUp} className='text-success' />
                      12%
                    </span>
                    <span className='text-muted'>CONVERSION RATE</span>
                  </p>
                </div>
                <div className='d-flex justify-content-between align-items-center border-bottom mb-3'>
                  <p className='text-warning text-xl'>
                    <FontAwesomeIcon icon={faShoppingCart} />
                  </p>
                  <p className='d-flex flex-column text-right'>
                    <span className='font-weight-bold'>
                      <FontAwesomeIcon icon={faArrowUp} className='text-warning' /> 0.8%
                    </span>
                    <span className='text-muted'>SALES RATE</span>
                  </p>
                </div>
                <div className='d-flex justify-content-between align-items-center mb-0'>
                  <p className='text-danger text-xl'>
                    <FontAwesomeIcon icon={faUsers} />
                  </p>
                  <p className='d-flex flex-column text-right'>
                    <span className='font-weight-bold'>
                      <FontAwesomeIcon icon={faArrowUp} className='text-danger' /> 1%
                    </span>
                    <span className='text-muted'>REGISTRATION RATE</span>
                  </p>
                </div>
              </CardBody>
            </Card>
          </Col>
        </Row>
      </LteContent>
    </>
  );
}
Example #29
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>
  );
}