reactstrap#CardHeader JavaScript Examples
The following examples show how to use
reactstrap#CardHeader.
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: utils.js From covidsos with MIT License | 7 votes |
|
renderInfoCard = (title, content, size = 5) => {
return (
<Col lg={size} className="mb-5 mb-xl-0">
<Card className="shadow border-0 full-height-card">
<CardHeader className="bg-transparent pb-3">
<div className="h3 text-muted text-center mt-2 mb-2">
{title}
</div>
</CardHeader>
<CardBody className="px-lg-5 py-lg-5 text-justify">
<div className="text-justify mt-2 mb-2">
{content}
</div>
</CardBody>
</Card>
</Col>
);
}
Example #2
| Source File: Users.js From id.co.moonlay-eworkplace-admin-web with MIT License | 6 votes |
|
render() {
const userList = usersData.filter((user) => user.id < 10)
return (
<div className="animated fadeIn">
<Row>
<Col xl={6}>
<Card>
<CardHeader>
<i className="fa fa-align-justify"></i> Users <small className="text-muted">example</small>
</CardHeader>
<CardBody>
<Table responsive hover>
<thead>
<tr>
<th scope="col">id</th>
<th scope="col">name</th>
<th scope="col">registered</th>
<th scope="col">role</th>
<th scope="col">status</th>
</tr>
</thead>
<tbody>
{userList.map((user, index) =>
<UserRow key={index} user={user}/>
)}
</tbody>
</Table>
</CardBody>
</Card>
</Col>
</Row>
</div>
)
}
Example #3
| Source File: ContactUs.js From covidsos with MIT License | 6 votes |
|
renderNewOrganisationForm() {
return (
<Row className="justify-content-center">
<Col lg="8" md="8">
<Card className="bg-secondary shadow border-0">
<CardHeader className="bg-transparent pb-3">
<div className="text-uppercase text-muted text-center mt-2 mb-2">
Reach out to us
</div>
</CardHeader>
<CardBody className="px-lg-5 py-lg-5 text-justify">
<OrganisationRegistration/>
</CardBody>
</Card>
</Col>
</Row>
);
}
Example #4
| Source File: Navbars.js From id.co.moonlay-eworkplace-admin-web with MIT License | 5 votes |
|
render() {
return (
<div className="animated fadeIn">
<Card>
<CardHeader>
<i className="fa fa-align-justify"></i><strong>Navbar</strong>
<div className="card-header-actions">
<a href="https://reactstrap.github.io/components/navbar/" rel="noreferrer noopener" target="_blank" className="card-header-action">
<small className="text-muted">docs</small>
</a>
</div>
</CardHeader>
<CardBody>
<Navbar color="info" light expand="md">
<NavbarBrand href="/">Bootstrap</NavbarBrand>
<NavbarToggler onClick={this.toggle} />
<Collapse isOpen={this.state.isOpen} navbar>
<Nav className="ml-auto" navbar>
<NavItem>
<NavLink href="#/components/navbars">Components</NavLink>
</NavItem>
<NavItem>
<NavLink href="https://github.com/reactstrap/reactstrap" target="_blank">Github</NavLink>
</NavItem>
<UncontrolledDropdown nav inNavbar>
{/*Warning: React does not recognize the `inNavbar` prop on a DOM element.*/}
{/*waiting for [email protected]*/}
<DropdownToggle nav caret>
Options
</DropdownToggle>
<DropdownMenu>
<DropdownItem>
Option 1
</DropdownItem>
<DropdownItem>
Option 2
</DropdownItem>
<DropdownItem divider />
<DropdownItem>
Reset
</DropdownItem>
</DropdownMenu>
</UncontrolledDropdown>
</Nav>
</Collapse>
</Navbar>
</CardBody>
</Card>
<Card>
<CardHeader>
<i className="fa fa-align-justify"></i><strong>Navbar Toggler</strong>
</CardHeader>
<CardBody>
<Navbar color="success" light>
<NavbarBrand href="/" className="mr-auto">Bootstrap</NavbarBrand>
<NavbarToggler onClick={this.toggleNavbar} className="mr-2" />
<Collapse isOpen={!this.state.collapsed} navbar>
<Nav navbar>
<NavItem>
<NavLink href="#/components/navbars">Components</NavLink>
</NavItem>
<NavItem>
<NavLink href="https://github.com/reactstrap/reactstrap">Github</NavLink>
</NavItem>
</Nav>
</Collapse>
</Navbar>
</CardBody>
</Card>
</div>
);
}
Example #5
| Source File: RequestsSlide.js From covidsos with MIT License | 5 votes |
|
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 #6
| Source File: Tooltips.js From id.co.moonlay-eworkplace-admin-web with MIT License | 5 votes |
|
render() {
return (
<div className="animated fadeIn">
<Card>
<CardHeader>
<i className="fa fa-align-justify"></i><strong>Tooltips</strong>
<div className="card-header-actions">
<a href="https://reactstrap.github.io/components/tooltips/" rel="noreferrer noopener" target="_blank" className="card-header-action">
<small className="text-muted">docs</small>
</a>
</div>
</CardHeader>
<CardBody>
{/*eslint-disable-next-line*/}
<p>Somewhere in here is a <a href="#" id="TooltipExample">tooltip</a>.</p>
<Tooltip placement="right" isOpen={this.state.tooltipOpen[0]} target="TooltipExample" toggle={() => {this.toggle(0);}}>
Hello world!
</Tooltip>
</CardBody>
</Card>
<Card>
<CardHeader>
<i className="fa fa-align-justify"></i><strong>Tooltip</strong>
<small> disable autohide</small>
</CardHeader>
<CardBody>
{/*eslint-disable-next-line*/}
<p>Sometimes you need to allow users to select text within a <a href="#" id="DisabledAutoHideExample">tooltip</a>.</p>
<Tooltip placement="top" isOpen={this.state.tooltipOpen[1]} autohide={false} target="DisabledAutoHideExample" toggle={() => {this.toggle(1);}}>
Try to select this text!
</Tooltip>
</CardBody>
</Card>
<Card>
<CardHeader>
<i className="fa fa-align-justify"></i><strong>Tooltip</strong>
<small> list</small>
</CardHeader>
<CardBody>
{this.state.tooltips.map((tooltip, i) => {
return <TooltipItem key={i} item={tooltip} id={i} />;
})}
</CardBody>
</Card>
<Card>
<CardHeader>
<i className="fa fa-align-justify"></i><strong>Tooltip</strong>
<small> uncontrolled</small>
</CardHeader>
<CardBody>
{/*eslint-disable-next-line*/}
<p>Somewhere in here is a <a href="#" id="UncontrolledTooltipExample">tooltip</a>.</p>
<UncontrolledTooltip placement="right" target="UncontrolledTooltipExample">
Hello world!
</UncontrolledTooltip>
</CardBody>
</Card>
</div>
);
}
Example #7
| Source File: Tables.js From covidsos with MIT License | 5 votes |
|
getTable(tableConfig) {
const currTableState = this.state.currState[tableConfig.key];
const statusList = []
if (currTableState.data.length !== 0) {
currTableState.data.map(row => row.status.toString().toLowerCase()).forEach(status => {
if (status && statusList.indexOf(status) === -1) {
statusList.push(status);
}
});
}
return (
<Col>
<Card className="shadow">
<CardHeader className="border-0">
<h3 className="mb-3 d-inline-block col-sm-4">
{tableConfig.title} ({this.state.currState[tableConfig.key].filteredData.length})
</h3>
<Form inline className="navbar-search d-inline-block ml-auto col-sm-8"
onSubmit={e => e.preventDefault()}>
<FormGroup>
{
statusList.length > 1 ?
<InputGroup className="input-group-alternative mr-0 ml-auto">
<InputGroupAddon addonType="prepend">
<InputGroupText>
<i className="fas fa-filter"/>
</InputGroupText>
</InputGroupAddon>
<Input placeholder="Status" type="select"
value={this.state.currState[tableConfig.key].statusFilter}
onChange={e => this.filter(e, tableConfig)}>
<option value="">Status</option>
{
statusList.sort(
(a, b) => a.toLowerCase().localeCompare(b.toLowerCase())).map(
status => {
return (<option key={status} value={status}>{status}</option>);
})
}
</Input>
</InputGroup> : null
}
<InputGroup className="input-group-alternative mr-0 ml-auto">
<InputGroupAddon addonType="prepend">
<InputGroupText>
<i className="fas fa-search"/>
</InputGroupText>
</InputGroupAddon>
<Input placeholder="Search" type="text"
value={this.state.currState[tableConfig.key].searchString}
onChange={e => this.search(e, tableConfig)}/>
</InputGroup>
</FormGroup>
</Form>
</CardHeader>
<Table className="align-items-center table-flush" responsive>
<thead className="thead-light">
<tr>
<th scope="col">S.No.</th>
{
tableConfig.fieldHeaders.map(fh => {
return (
<th scope="col" key={tableConfig.key + '_' + fh}>{fh}</th>
);
})
}
<th scope="col">Action</th>
</tr>
</thead>
<tbody>{this.getRows(tableConfig)}</tbody>
</Table>
<CardFooter className="py-4">
{this.getNavigation(tableConfig)}
</CardFooter>
</Card>
</Col>
);
}
Example #8
| Source File: Popovers.js From id.co.moonlay-eworkplace-admin-web with MIT License | 5 votes |
|
render() {
return (
<div className="animated fadeIn">
<Card>
<CardHeader>
<i className="fa fa-align-justify"></i><strong>Popovers</strong>
<div className="card-header-actions">
<a href="https://reactstrap.github.io/components/popovers/" rel="noreferrer noopener" target="_blank" className="card-header-action">
<small className="text-muted">docs</small>
</a>
</div>
</CardHeader>
<CardBody>
<Button id="Popover1" onClick={this.toggle}>
Launch Popover
</Button>
<Popover placement="bottom" isOpen={this.state.popoverOpen} target="Popover1" toggle={this.toggle}>
<PopoverHeader>Popover Title</PopoverHeader>
<PopoverBody>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</PopoverBody>
</Popover>
</CardBody>
</Card>
<Card>
<CardHeader>
<i className="fa fa-align-justify"></i><strong>Popovers</strong>
<small> list</small>
</CardHeader>
<CardBody>
{this.state.popovers.map((popover, i) => {
return <PopoverItem key={i} item={popover} id={i} />;
})}
</CardBody>
</Card>
</div>
);
}
Example #9
| Source File: FAQ.js From covidsos with MIT License | 5 votes |
|
render() {
return (
<>
<Header showCards={false}/>
{/* Page content */}
<Container className="mt--7" fluid>
<Card>
<CardHeader className="bg-transparent pb-3">
<div className="text-uppercase text-muted text-center mt-2 mb-2">
Frequently Asked Questions
</div>
</CardHeader>
{/*<div style={{height: '60vh'}}>*/}
{/* <iframe*/}
{/* title="FAQ document"*/}
{/* width="100%"*/}
{/* height="100%"*/}
{/* src="https://docs.google.com/document/d/e/2PACX-1vRlrh9Osh7KikB_T2Mqm0TqbbECR6gpoNHtVXeMi1epFEkrxXJ6Zkp0yX2mRo2zXs1bYYEdWbr82f_C/pub?embedded=true"/>*/}
{/*</div>*/}
<div className="faq-container" dangerouslySetInnerHTML={{__html:this.state.html}}/>
</Card>
<Row className="mt-2">
<Col style={{paddingLeft: '20px'}}>
Still unsatisfied ?</Col>
</Row>
<Row className="mt-2">
<Col style={{textAlign: 'center'}}>
<Button color="primary" style={{width: '100%'}}>
<a href={'https://tinyurl.com/covidsos'} target="_blank" style={{color: 'white'}}
rel="noopener noreferrer">
Whatsapp Us
<WhatsappIcon size={32} round/>
</a>
</Button>
</Col>
</Row>
</Container>
</>
);
}
Example #10
| Source File: Jumbotrons.js From id.co.moonlay-eworkplace-admin-web with MIT License | 5 votes |
|
render() {
return (
<div className="animated fadeIn">
<Row>
<Col>
<Card>
<CardHeader>
<i className="fa fa-align-justify"></i><strong>Jumbotron</strong>
<div className="card-header-actions">
<a href="https://reactstrap.github.io/components/jumbotron/" rel="noreferrer noopener" target="_blank" className="card-header-action">
<small className="text-muted">docs</small>
</a>
</div>
</CardHeader>
<CardBody>
<Jumbotron>
<h1 className="display-3">Hello, world!</h1>
<p className="lead">This is a simple hero unit, a simple Jumbotron-style component for calling extra
attention to featured content or information.</p>
<hr className="my-2" />
<p>It uses utility classes for typgraphy and spacing to space content out within the larger container.</p>
<p className="lead">
<Button color="primary">Learn More</Button>
</p>
</Jumbotron>
</CardBody>
</Card>
</Col>
<Col>
<Card>
<CardHeader>
<i className="fa fa-align-justify"></i><strong>Jumbotron</strong>
<small> fluid</small>
</CardHeader>
<CardBody>
<Jumbotron fluid>
<Container fluid>
<h1 className="display-3">Fluid jumbotron</h1>
<p className="lead">This is a modified jumbotron that occupies the entire horizontal space of its parent.</p>
</Container>
</Jumbotron>
</CardBody>
</Card>
</Col>
</Row>
</div>
);
}
Example #11
| Source File: accordian.js From gedge-platform with Apache License 2.0 | 5 votes |
|
render() {
return (
<React.Fragment>
<Card>
<Link to="#" className="text-dark" onClick={this.t_col1} style={{ cursor: "pointer" }}>
<CardHeader id="gen-question-headingOne">
<h5 className="font-size-14 m-0">
<i className={this.state.col1 ? "mdi mdi-chevron-up accor-arrow-icon" : "mdi mdi-chevron-right accor-arrow-icon"}></i> {this.props.question1}
</h5>
</CardHeader>
</Link>
<Collapse isOpen={this.state.col1}>
<CardBody>
{this.props.answer1}
</CardBody>
</Collapse>
</Card>
<Card>
<Link to="#" onClick={this.t_col2} style={{ cursor: "pointer" }}>
<CardHeader id="gen-question-headingTwo">
<h5 className="font-size-14 m-0">
<i className={this.state.col2 ? "mdi mdi-chevron-up accor-arrow-icon" : "mdi mdi-chevron-right accor-arrow-icon"}></i> {this.props.question2}
</h5>
</CardHeader>
</Link>
<Collapse isOpen={this.state.col2} >
<CardBody>
{this.props.answer2}
</CardBody>
</Collapse>
</Card>
<Card>
<Link to="#" onClick={this.t_col3} style={{ cursor: "pointer" }}>
<CardHeader id="gen-question-headingThree">
<h5 className="font-size-14 m-0">
<i className={this.state.col3 ? "mdi mdi-chevron-up accor-arrow-icon" : "mdi mdi-chevron-right accor-arrow-icon"}></i> {this.props.question3}
</h5>
</CardHeader>
</Link>
<Collapse isOpen={this.state.col3}>
<CardBody>
{this.props.answer3}
</CardBody>
</Collapse>
</Card>
<Card>
<Link to="#" onClick={this.t_col4} style={{ cursor: "pointer" }}>
<CardHeader id="gen-question-headingFour">
<h5 className="font-size-14 m-0">
<i className={this.state.col4 ? "mdi mdi-chevron-up accor-arrow-icon" : "mdi mdi-chevron-right accor-arrow-icon"}></i>{this.props.question4}
</h5>
</CardHeader>
</Link>
<Collapse isOpen={this.state.col4}>
<CardBody>
{this.props.answer4}
</CardBody>
</Collapse>
</Card>
<Card>
<Link to="#" onClick={this.t_col5} style={{ cursor: "pointer" }}>
<CardHeader id="gen-question-headingFive">
<h5 className="font-size-14 m-0">
<i className={this.state.col5 ? "mdi mdi-chevron-up accor-arrow-icon" : "mdi mdi-chevron-right accor-arrow-icon"}></i> {this.props.question5}
</h5>
</CardHeader>
</Link>
<Collapse isOpen={this.state.col5}>
<CardBody>
{this.props.answer5}
</CardBody>
</Collapse>
</Card>
</React.Fragment>
);
}
Example #12
| Source File: Cart.js From ReactJS-Projects with MIT License | 5 votes |
|
Cart = ({ cartItem, removeItem, buy }) => {
let amount = 0;
cartItem.forEach(item => {
amount = parseFloat(amount) + parseFloat(item.productPrice)
})
return (
<Container fluid>
<h1 className='text text-center'>Your Cart</h1>
<ListGroup>
{cartItem.map(item => (
<ListGroupItem key={item.id}>
<Row>
<Col>
<img height={80} src={item.tinyImage} />
</Col>
<Col className='text-center'>
<div className='text-primary'>
{item.productName}
</div>
<span>Price: {item.productPrice}</span>
<Button color="danger" onClick={() => removeItem(item)}>Remove</Button>
</Col>
</Row>
</ListGroupItem>
))}
</ListGroup>
{
cartItem.length >= 1 ?
(
<Card className='text-center mt-3'>
<CardHeader>
Grand Total
</CardHeader>
<CardBody>
Total amount for {cartItem.length} products is: $ {amount}
</CardBody>
<CardFooter>
<Button color="success" onClick={buy}>Proceed to Payment</Button>
</CardFooter>
</Card>
)
:
(
<h1 className='text-warning text-center'>Your cart is empty.</h1>
)
}
</Container>
)
}
Example #13
| Source File: Tables.js From id.co.moonlay-eworkplace-admin-web with MIT License | 4 votes |
|
render() {
let stateHeadDivision = this.state.stateHeadDivision.map(function (division) {
return { value: division.username, label: division.profile.firstname + " " + division.profile.lastname };
})
const { results, currentPage, resultsPerPage } = this.state;
const indexOfLastTodo = currentPage * resultsPerPage;
const indexOfFirstTodo = indexOfLastTodo - resultsPerPage;
const currentresults = results.slice(indexOfFirstTodo, indexOfLastTodo);
const renderresults = currentresults.map((results, index) => {
//return <li key={index}>{todo.username}</li>;
return (
<tr key={results.Id} data-category={results.Id}>
<td>{results.Username}</td>
<td>{results.Name}</td>
<td>{results.CheckIn.substr(0,10)}</td>
<td>{ (moment(results.CheckIn).add(7, 'hours').format('hh:mm:ss a'))}</td>
<td>
{results.CheckOut === '0001-01-01T00:00:00'
? 'Haven\'t Checked Out Yet'
: (moment(results.CheckOut).add(7, 'hours').format('hh:mm:ss a'))}
</td>
{/* <td>
{results.CheckIn.substr(11, 23) <= '09:00:00.000'
? 'aman'
: 'telat'}
</td> */}
{/* <td>{Math.abs(new Date(post.checkIn) - new Date(post.checkOut))/3600000}</td> */}
<td>{results.Location}</td>
<td>{results.Approval}</td>
<td>{results.ApprovalByAdmin}</td>
<td><Button onClick={() => this.handleShowImage(results.Photo)} >Link</Button></td>
<td>{results.CompanyName}</td>
<td>{results.ClientName}</td>
<td>{results.ProjectName}</td>
<td>{results.HeadDivision}</td>
{/* <td>{(Math.abs(new Date(post.checkIn) - new Date(post.checkOut))/3600000) === 9 ? 'tepat' : ((Math.abs(new Date(post.checkIn) - new Date(post.checkOut))/3600000) < 9 ? 'kurang dari 9 jam' : 'lembur')}</td> */}
{/* <td>
{(Math.abs(new Date(results.checkIn) - new Date(results.checkOut)) /
3600000).toString().substr(0,3) === '176' ? 'Haven\'t Checked Out Yet' :
(Math.abs(new Date(results.checkIn) - new Date(results.checkOut)) /
3600000).toString().substr(0,3) }
</td> */}
<td>
<Button
className="btn btn-info"
onClick={() => this.UpdateAbsensi(results.Id)}>
Edit
</Button>
{/* <Link
to={'/account/editaccount/' + results.idWFH}
className="btn btn-primary">
Approve
</Link> */}
<Button
className="btn btn-danger"
onClick={() => this.deleteAbsensi(results.Id)}>
Delete
</Button>
</td>
</tr>
);
});
const pageNumbers = [];
for (let i = 1; i <= Math.ceil(results.length / resultsPerPage); i++) {
pageNumbers.push(i);
}
const renderPageNumbers = pageNumbers.map(number => {
return (
<li
key={number}
id={number}
onClick={this.handleClick}
className="page-link">
{number}
</li>
);
});
if (this.state.loading === false) {
return <h2>Loading...</h2>;
}
return (
<div>
{/*Modal Image */}
<Modal show={this.state.showImage} onHide={this.handleClose}>
<Modal.Header>
<Modal.Title>Image</Modal.Title>
</Modal.Header>
<Modal.Body>
<center>
<img src={this.state.urlPhoto} height="250px" />
</center>
</Modal.Body>
<Modal.Footer>
<Button className="btn btn-danger" onClick={this.handleClose}>
Close
</Button>
</Modal.Footer>
</Modal>
{/*Modal Edit */}
<Modal show={this.state.show} onHide={this.handleClose}>
<Modal.Header closeButton>
<Modal.Title>Edit Status</Modal.Title>
</Modal.Header>
<Modal.Body>
<Form>
CheckIn
<InputGroup className="mb-3">
<Input type="datetime-local" onChange={this.handleCheckIn} />
</InputGroup>
Location
<InputGroup className="mb-3">
<Input type="text" value={this.state.Location} onChange={this.handleLocation} placeholder="Location" />
</InputGroup>
CheckOut
<InputGroup className="mb-3">
<Input type="datetime-local" onChange={this.handleCheckOut} />
</InputGroup>
Approval HeadDivision
<Select
name="form-field-name"
value={//this.state.Approval
this.state.selectedOptionApprovalHeadDivision
}
onChange={this.handleApprovalHeadDivision}
options={appovedList} /><br />
Approval Admin
<Select style={{width:70}}
name="form-field-name"
value={this.state.selectedOptionAdmin}
onChange={this.handleApproveAdmin}
options={appovedList} />
Foto
<InputGroup className="mb-3">
<Input type="text" onChange={this.handlePhoto} value={this.state.Photo} placeholder="url photo"/>
</InputGroup>
Company Name
<InputGroup className="mb-3">
<Input type="text" onChange={this.handleCompanyName} value={this.state.CompanyName} placeholder="Catatan"/>
</InputGroup>
Client Name
<InputGroup className="mb-3">
<Input type="text" onChange={this.handleClientName} value={this.state.ClientName} placeholder="Catatan"/>
</InputGroup>
Project Name
<InputGroup className="mb-3">
<Input type="text" onChange={this.handleProjectName} value={this.state.ProjectName} placeholder="Project"/>
</InputGroup>
Head Division
<Select style={{width:70}}
name="form-field-name"
value={this.state.selectedOptionHeadDivision}
onChange={this.handleHeadDivision}
options={stateHeadDivision} />
</Form>
</Modal.Body>
<Modal.Footer>
<Button className="btn btn-secondary" onClick={this.handleClose}>
Close
</Button>
<Button className="btn btn-info" onClick={this.handelsubmitform}>
Save Changes
</Button>
</Modal.Footer>
</Modal>
<div className="animated fadeIn">
{this.state.loading && (
<Row>
<Col xs="12" lg="12">
<Card>
<CardHeader>
<Row>
<Col>
<i className="fa fa-user" /> <b> Work At Client</b>
{/* <Button
style={{ marginLeft: 10 }}
color="success"
className="px-4"
onClick={() => {
window.location.href = '/#/account/addaccount';
}}>
Add Employee
</Button> */}
</Col>
<Col>
<input
type="text"
id="myInput"
className="form-control form-control-md"
style={{ width: '100%' }}
placeholder="Search By Username"
onChange={this.filterList}
/>
</Col>
</Row>
</CardHeader>
<CardBody>
<Table id="myTable" responsive striped>
<thead>
<tr>
<th>Username</th>
<th>Name</th>
<th>DateAttendece</th>
<th>CheckIn</th>
<th>CheckOut</th>
<th>Location</th>
<th>Approve HD</th>
<th>Approve Admin</th>
<th>Foto</th>
<th>Company Name</th>
<th>Client Name</th>
<th>Project Name</th>
<th>Head Division</th>
<th>Action</th>
</tr>
</thead>
<tbody>{renderresults}</tbody>
</Table>
</CardBody>
</Card>
</Col>
</Row>
)}
</div>
{/* <Pagination>
<PaginationItem>
{renderPageNumbers}
</PaginationItem>
</Pagination>
*/}
<ul className="pagination">{renderPageNumbers}</ul>
</div>
);
}
Example #14
| Source File: DemoDashboard.jsx From react-lte with MIT License | 4 votes |
|
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 #15
| Source File: Map.js From covidsos with MIT License | 4 votes |
|
render() {
const {mapOnly} = this.props;
if (mapOnly && !localStorage.getItem(config.sourceKey)) {
return 'Unknown source';
}
if (mapOnly) {
return (<div id="mapDiv" style={{height: "100vh"}}/>);
}
return (
<Card className="bg-gradient-default shadow full-height-card">
<CardHeader className="bg-transparent">
<Row className="align-items-center">
<div className="col-7">
<AutoCompleteAddress
iconClass="fas fa-map-marker"
placeholder="Search by address"
domID='map-search-address'
onSelect={({latitude, longitude}) => {
const {map, marker} = this.state;
if (marker) {
marker.remove();
}
const lngLat = [longitude, latitude];
const newMarker = new mapBoxGl.Marker().setLngLat(lngLat).addTo(map);
map.flyTo({center: lngLat});
map.setCenter(lngLat);
map.zoomTo(13.5);
this.setState({marker: newMarker});
}}
showError={false}
/>
</div>
<div className="col-5">
<Nav className="justify-content-end" pills>
<NavItem>
<NavLink
className={classnames("py-2 px-3", {
active: this.state.activeNav === 0
})}
href="#"
onClick={e => this.toggleNavs(e, 0)}
>
<span className="d-md-block">All</span>
{/*<span className="d-md-none">A</span>*/}
</NavLink>
</NavItem>
<NavItem>
<NavLink
className={classnames("py-md-2 px-md-3 py-1 px-2", {
active: this.state.activeNav === 1
})}
href="#"
onClick={e => this.toggleNavs(e, 1)}
>
<span className="d-none d-md-block">Volunteer</span>
<span className="d-md-none">
<img alt="V" src={require("assets/img/icons/volunteer-hands.svg")}
style={{height: '1.8rem'}}/>
</span>
</NavLink>
</NavItem>
<NavItem>
<NavLink
className={classnames("py-md-2 px-md-3 py-1 px-2", {
active: this.state.activeNav === 2
})}
data-toggle="tab"
href="#"
onClick={e => this.toggleNavs(e, 2)}
>
<span className="d-none d-md-block">Requests</span>
<span className="d-md-none">
<img alt="R" src={require("assets/img/icons/old.svg")}
style={{height: '1.8rem'}}/>
</span>
</NavLink>
</NavItem>
</Nav>
</div>
</Row>
</CardHeader>
<CardBody className="pre-scrollable">
<div id="mapDiv"/>
{/*<iframe src="http://www.thebangaloreguy.com/covid19/COVID_SOS_v0.html" title="map" height="300px"/>*/}
</CardBody>
</Card>
);
}
Example #16
| Source File: Login.js From nodejs-rest-api-boilerplate with MIT License | 4 votes |
|
render() {
const { errors } = this.state;
return (
<>
<DemoNavbar />
<main ref="main">
<section className="section section-shaped section-lg">
<div className="shape shape-style-1 bg-gradient-default">
<span />
<span />
<span />
<span />
<span />
<span />
<span />
<span />
</div>
<Container className="pt-lg-md">
<Row className="justify-content-center">
<Col lg="5">
<Card className="bg-secondary shadow border-0">
<CardHeader className="bg-white pb-5">
<div className="text-muted text-center mb-3">
<small>Sign in with</small>
</div>
<div className="btn-wrapper text-center">
<Button
className="btn-neutral btn-icon"
color="default"
href="http://localhost:5000/api/auth/facebook"
>
<span className="btn-inner--icon mr-1">
<img
alt="..."
src={require("../../assets/img/icons/common/facebook.svg")}
/>
</span>
<span className="btn-inner--text">Facebook</span>
</Button>
<Button
className="btn-neutral btn-icon ml-1"
color="default"
href="http://localhost:5000/api/auth/google"
>
<span className="btn-inner--icon mr-1">
<img
alt="..."
src={require("../../assets/img/icons/common/google.svg")}
/>
</span>
<span className="btn-inner--text">Google</span>
</Button>
</div>
</CardHeader>
<CardBody className="px-lg-5 py-lg-5">
{errors && errors.auth ? (
<Alert color="warning">{errors.auth}</Alert>
) : (
<div className="text-center text-muted mb-4">
<small>Or sign in with credentials</small>
</div>
)}
<Form role="form" noValidate onSubmit={this.onSubmit}>
<FormGroup className="mb-3">
<InputGroup className="input-group-alternative">
<InputGroupAddon addonType="prepend">
<InputGroupText>
<i className="ni ni-email-83" />
</InputGroupText>
</InputGroupAddon>
<Input
placeholder="Email"
type="email"
onChange={this.onChange}
value={this.state.email}
id="email"
/>
</InputGroup>
</FormGroup>
<FormGroup>
<InputGroup className="input-group-alternative">
<InputGroupAddon addonType="prepend">
<InputGroupText>
<i className="ni ni-lock-circle-open" />
</InputGroupText>
</InputGroupAddon>
<Input
placeholder="Password"
type="password"
autoComplete="off"
onChange={this.onChange}
value={this.state.password}
id="password"
/>
</InputGroup>
</FormGroup>
<div className="custom-control custom-control-alternative custom-checkbox">
<input
className="custom-control-input"
id=" customCheckLogin"
type="checkbox"
/>
<label
className="custom-control-label"
htmlFor=" customCheckLogin"
>
<span>Remember me</span>
</label>
</div>
<div className="text-center">
<Button
className="my-4"
color="primary"
type="submit"
>
Sign in
</Button>
</div>
</Form>
</CardBody>
</Card>
<Row className="mt-3">
<Col xs="6">
<a
className="text-light"
href="#pablo"
onClick={e => e.preventDefault()}
>
<small>Forgot password?</small>
</a>
</Col>
<Col className="text-right" xs="6">
<Link to="/register">
<small>Create new account</small>
</Link>
</Col>
</Row>
</Col>
</Row>
</Container>
</section>
</main>
<SimpleFooter />
</>
);
}
Example #17
| Source File: BrandButtons.js From id.co.moonlay-eworkplace-admin-web with MIT License | 4 votes |
|
render() {
return (
<div className="animated fadeIn">
<Row>
<Col xs="12">
<Card>
<CardHeader>
<i className="fa fa-align-justify"></i>
<strong>Brand Button</strong>
<small> Usage ex. </small>
<code>
<Button className="btn-facebook btn-brand"><i className="fa fa-facebook"></i><span>Facebook</span></Button>
</code>
</CardHeader>
<CardBody>
<h6>Size Small
<small> Add this class <code>.btn-sm</code></small>
</h6>
<p>
<Button size="sm" className="btn-facebook btn-brand mr-1 mb-1"><i className="fa fa-facebook"></i><span>Facebook</span></Button>
<Button size="sm" className="btn-twitter btn-brand mr-1 mb-1"><i className="fa fa-twitter"></i><span>Twitter</span></Button>
<Button size="sm" className="btn-linkedin btn-brand mr-1 mb-1"><i className="fa fa-linkedin"></i><span>LinkedIn</span></Button>
<Button size="sm" className="btn-flickr btn-brand mr-1 mb-1"><i className="fa fa-flickr"></i><span>Flickr</span></Button>
<Button size="sm" className="btn-tumblr btn-brand mr-1 mb-1"><i className="fa fa-tumblr"></i><span>Tumblr</span></Button>
<Button size="sm" className="btn-xing btn-brand mr-1 mb-1"><i className="fa fa-xing"></i><span>Xing</span></Button>
<Button size="sm" className="btn-github btn-brand mr-1 mb-1"><i className="fa fa-github"></i><span>Github</span></Button>
<Button size="sm" className="btn-html5 btn-brand mr-1 mb-1"><i className="fa fa-html5"></i><span>HTML5</span></Button>
<Button size="sm" className="btn-openid btn-brand mr-1 mb-1"><i className="fa fa-openid"></i><span>OpenID</span></Button>
<Button size="sm" className="btn-stack-overflow btn-brand mr-1 mb-1"><i className="fa fa-stack-overflow"></i><span>StackOverflow</span></Button>
<Button size="sm" className="btn-css3 btn-brand mr-1 mb-1"><i className="fa fa-css3"></i><span>CSS3</span></Button>
<Button size="sm" className="btn-youtube btn-brand mr-1 mb-1"><i className="fa fa-youtube"></i><span>YouTube</span></Button>
<Button size="sm" className="btn-dribbble btn-brand mr-1 mb-1"><i className="fa fa-dribbble"></i><span>Dribbble</span></Button>
<Button size="sm" className="btn-google-plus btn-brand mr-1 mb-1"><i className="fa fa-google-plus"></i><span>Google+</span></Button>
<Button size="sm" className="btn-instagram btn-brand mr-1 mb-1"><i className="fa fa-instagram"></i><span>Instagram</span></Button>
<Button size="sm" className="btn-pinterest btn-brand mr-1 mb-1"><i className="fa fa-pinterest"></i><span>Pinterest</span></Button>
<Button size="sm" className="btn-vk btn-brand mr-1 mb-1"><i className="fa fa-vk"></i><span>VK</span></Button>
<Button size="sm" className="btn-yahoo btn-brand mr-1 mb-1"><i className="fa fa-yahoo"></i><span>Yahoo</span></Button>
<Button size="sm" className="btn-behance btn-brand mr-1 mb-1"><i className="fa fa-behance"></i><span>Behance</span></Button>
<Button size="sm" className="btn-dropbox btn-brand mr-1 mb-1"><i className="fa fa-dropbox"></i><span>Dropbox</span></Button>
<Button size="sm" className="btn-reddit btn-brand mr-1 mb-1"><i className="fa fa-reddit"></i><span>Reddit</span></Button>
<Button size="sm" className="btn-spotify btn-brand mr-1 mb-1"><i className="fa fa-spotify"></i><span>Spotify</span></Button>
<Button size="sm" className="btn-vine btn-brand mr-1 mb-1"><i className="fa fa-vine"></i><span>Vine</span></Button>
<Button size="sm" className="btn-foursquare btn-brand mr-1 mb-1"><i className="fa fa-foursquare"></i><span>Forsquare</span></Button>
<Button size="sm" className="btn-vimeo btn-brand mr-1 mb-1"><i className="fa fa-vimeo"></i><span>Vimeo</span></Button>
</p>
<h6>Size Normal</h6>
<p>
<Button className="btn-facebook btn-brand mr-1 mb-1"><i className="fa fa-facebook"></i><span>Facebook</span></Button>
<Button className="btn-twitter btn-brand mr-1 mb-1"><i className="fa fa-twitter"></i><span>Twitter</span></Button>
<Button className="btn-linkedin btn-brand mr-1 mb-1"><i className="fa fa-linkedin"></i><span>LinkedIn</span></Button>
<Button className="btn-flickr btn-brand mr-1 mb-1"><i className="fa fa-flickr"></i><span>Flickr</span></Button>
<Button className="btn-tumblr btn-brand mr-1 mb-1"><i className="fa fa-tumblr"></i><span>Tumblr</span></Button>
<Button className="btn-xing btn-brand mr-1 mb-1"><i className="fa fa-xing"></i><span>Xing</span></Button>
<Button className="btn-github btn-brand mr-1 mb-1"><i className="fa fa-github"></i><span>Github</span></Button>
<Button className="btn-html5 btn-brand mr-1 mb-1"><i className="fa fa-html5"></i><span>HTML5</span></Button>
<Button className="btn-openid btn-brand mr-1 mb-1"><i className="fa fa-openid"></i><span>OpenID</span></Button>
<Button className="btn-stack-overflow btn-brand mr-1 mb-1"><i className="fa fa-stack-overflow"></i><span>StackOverflow</span></Button>
<Button className="btn-css3 btn-brand mr-1 mb-1"><i className="fa fa-css3"></i><span>CSS3</span></Button>
<Button className="btn-youtube btn-brand mr-1 mb-1"><i className="fa fa-youtube"></i><span>YouTube</span></Button>
<Button className="btn-dribbble btn-brand mr-1 mb-1"><i className="fa fa-dribbble"></i><span>Dribbble</span></Button>
<Button className="btn-google-plus btn-brand mr-1 mb-1"><i className="fa fa-google-plus"></i><span>Google+</span></Button>
<Button className="btn-instagram btn-brand mr-1 mb-1"><i className="fa fa-instagram"></i><span>Instagram</span></Button>
<Button className="btn-pinterest btn-brand mr-1 mb-1"><i className="fa fa-pinterest"></i><span>Pinterest</span></Button>
<Button className="btn-vk btn-brand mr-1 mb-1"><i className="fa fa-vk"></i><span>VK</span></Button>
<Button className="btn-yahoo btn-brand mr-1 mb-1"><i className="fa fa-yahoo"></i><span>Yahoo</span></Button>
<Button className="btn-behance btn-brand mr-1 mb-1"><i className="fa fa-behance"></i><span>Behance</span></Button>
<Button className="btn-dropbox btn-brand mr-1 mb-1"><i className="fa fa-dropbox"></i><span>Dropbox</span></Button>
<Button className="btn-reddit btn-brand mr-1 mb-1"><i className="fa fa-reddit"></i><span>Reddit</span></Button>
<Button className="btn-spotify btn-brand mr-1 mb-1"><i className="fa fa-spotify"></i><span>Spotify</span></Button>
<Button className="btn-vine btn-brand mr-1 mb-1"><i className="fa fa-vine"></i><span>Vine</span></Button>
<Button className="btn-foursquare btn-brand mr-1 mb-1"><i className="fa fa-foursquare"></i><span>Forsquare</span></Button>
<Button className="btn-vimeo btn-brand mr-1 mb-1"><i className="fa fa-vimeo"></i><span>Vimeo</span></Button>
</p>
<h6>Size Large
<small> Add this class <code>.btn-lg</code></small>
</h6>
<p>
<Button size="lg" className="btn-facebook btn-brand mr-1 mb-1"><i className="fa fa-facebook"></i><span>Facebook</span></Button>
<Button size="lg" className="btn-twitter btn-brand mr-1 mb-1"><i className="fa fa-twitter"></i><span>Twitter</span></Button>
<Button size="lg" className="btn-linkedin btn-brand mr-1 mb-1"><i className="fa fa-linkedin"></i><span>LinkedIn</span></Button>
<Button size="lg" className="btn-flickr btn-brand mr-1 mb-1"><i className="fa fa-flickr"></i><span>Flickr</span></Button>
<Button size="lg" className="btn-tumblr btn-brand mr-1 mb-1"><i className="fa fa-tumblr"></i><span>Tumblr</span></Button>
<Button size="lg" className="btn-xing btn-brand mr-1 mb-1"><i className="fa fa-xing"></i><span>Xing</span></Button>
<Button size="lg" className="btn-github btn-brand mr-1 mb-1"><i className="fa fa-github"></i><span>Github</span></Button>
<Button size="lg" className="btn-html5 btn-brand mr-1 mb-1"><i className="fa fa-html5"></i><span>HTML5</span></Button>
<Button size="lg" className="btn-openid btn-brand mr-1 mb-1"><i className="fa fa-openid"></i><span>OpenID</span></Button>
<Button size="lg" className="btn-stack-overflow btn-brand mr-1 mb-1"><i className="fa fa-stack-overflow"></i><span>StackOverflow</span></Button>
<Button size="lg" className="btn-css3 btn-brand mr-1 mb-1"><i className="fa fa-css3"></i><span>CSS3</span></Button>
<Button size="lg" className="btn-youtube btn-brand mr-1 mb-1"><i className="fa fa-youtube"></i><span>YouTube</span></Button>
<Button size="lg" className="btn-dribbble btn-brand mr-1 mb-1"><i className="fa fa-dribbble"></i><span>Dribbble</span></Button>
<Button size="lg" className="btn-google-plus btn-brand mr-1 mb-1"><i className="fa fa-google-plus"></i><span>Google+</span></Button>
<Button size="lg" className="btn-instagram btn-brand mr-1 mb-1"><i className="fa fa-instagram"></i><span>Instagram</span></Button>
<Button size="lg" className="btn-pinterest btn-brand mr-1 mb-1"><i className="fa fa-pinterest"></i><span>Pinterest</span></Button>
<Button size="lg" className="btn-vk btn-brand mr-1 mb-1"><i className="fa fa-vk"></i><span>VK</span></Button>
<Button size="lg" className="btn-yahoo btn-brand mr-1 mb-1"><i className="fa fa-yahoo"></i><span>Yahoo</span></Button>
<Button size="lg" className="btn-behance btn-brand mr-1 mb-1"><i className="fa fa-behance"></i><span>Behance</span></Button>
<Button size="lg" className="btn-dropbox btn-brand mr-1 mb-1"><i className="fa fa-dropbox"></i><span>Dropbox</span></Button>
<Button size="lg" className="btn-reddit btn-brand mr-1 mb-1"><i className="fa fa-reddit"></i><span>Reddit</span></Button>
<Button size="lg" className="btn-spotify btn-brand mr-1 mb-1"><i className="fa fa-spotify"></i><span>Spotify</span></Button>
<Button size="lg" className="btn-vine btn-brand mr-1 mb-1"><i className="fa fa-vine"></i><span>Vine</span></Button>
<Button size="lg" className="btn-foursquare btn-brand mr-1 mb-1"><i className="fa fa-foursquare"></i><span>Forsquare</span></Button>
<Button size="lg" className="btn-vimeo btn-brand mr-1 mb-1"><i className="fa fa-vimeo"></i><span>Vimeo</span></Button>
</p>
</CardBody>
</Card>
</Col>
<Col xs="12">
<Card>
<CardHeader>
<i className="fa fa-align-justify"></i>
<strong>Brand Button</strong>
<small> Icons only. Usage ex. </small>
<code>
<Button className="btn-facebook btn-brand icon"><i className="fa fa-facebook"></i></Button>
</code>
</CardHeader>
<CardBody>
<h6>Size Small
<small> Add this class <code>.btn-sm</code></small>
</h6>
<p>
<Button size="sm" className="btn-facebook btn-brand icon mr-1 mb-1"><i className="fa fa-facebook"></i></Button>
<Button size="sm" className="btn-twitter btn-brand icon mr-1 mb-1"><i className="fa fa-twitter"></i></Button>
<Button size="sm" className="btn-linkedin btn-brand icon mr-1 mb-1"><i className="fa fa-linkedin"></i></Button>
<Button size="sm" className="btn-flickr btn-brand icon mr-1 mb-1"><i className="fa fa-flickr"></i></Button>
<Button size="sm" className="btn-tumblr btn-brand icon mr-1 mb-1"><i className="fa fa-tumblr"></i></Button>
<Button size="sm" className="btn-xing btn-brand icon mr-1 mb-1"><i className="fa fa-xing"></i></Button>
<Button size="sm" className="btn-github btn-brand icon mr-1 mb-1"><i className="fa fa-github"></i></Button>
<Button size="sm" className="btn-html5 btn-brand icon mr-1 mb-1"><i className="fa fa-html5"></i></Button>
<Button size="sm" className="btn-openid btn-brand icon mr-1 mb-1"><i className="fa fa-openid"></i></Button>
<Button size="sm" className="btn-stack-overflow btn-brand icon mr-1 mb-1"><i className="fa fa-stack-overflow"></i></Button>
<Button size="sm" className="btn-css3 btn-brand icon mr-1 mb-1"><i className="fa fa-css3"></i></Button>
<Button size="sm" className="btn-youtube btn-brand icon mr-1 mb-1"><i className="fa fa-youtube"></i></Button>
<Button size="sm" className="btn-dribbble btn-brand icon mr-1 mb-1"><i className="fa fa-dribbble"></i></Button>
<Button size="sm" className="btn-google-plus btn-brand icon mr-1 mb-1"><i className="fa fa-google-plus"></i></Button>
<Button size="sm" className="btn-instagram btn-brand icon mr-1 mb-1"><i className="fa fa-instagram"></i></Button>
<Button size="sm" className="btn-pinterest btn-brand icon mr-1 mb-1"><i className="fa fa-pinterest"></i></Button>
<Button size="sm" className="btn-vk btn-brand icon mr-1 mb-1"><i className="fa fa-vk"></i></Button>
<Button size="sm" className="btn-yahoo btn-brand icon mr-1 mb-1"><i className="fa fa-yahoo"></i></Button>
<Button size="sm" className="btn-behance btn-brand icon mr-1 mb-1"><i className="fa fa-behance"></i></Button>
<Button size="sm" className="btn-dropbox btn-brand icon mr-1 mb-1"><i className="fa fa-dropbox"></i></Button>
<Button size="sm" className="btn-reddit btn-brand icon mr-1 mb-1"><i className="fa fa-reddit"></i></Button>
<Button size="sm" className="btn-spotify btn-brand icon mr-1 mb-1"><i className="fa fa-spotify"></i></Button>
<Button size="sm" className="btn-vine btn-brand icon mr-1 mb-1"><i className="fa fa-vine"></i></Button>
<Button size="sm" className="btn-foursquare btn-brand icon mr-1 mb-1"><i className="fa fa-foursquare"></i></Button>
<Button size="sm" className="btn-vimeo btn-brand icon mr-1 mb-1"><i className="fa fa-vimeo"></i></Button>
</p>
<h6>Size Normal</h6>
<p>
<Button className="btn-facebook btn-brand icon mr-1 mb-1"><i className="fa fa-facebook"></i></Button>
<Button className="btn-twitter btn-brand icon mr-1 mb-1"><i className="fa fa-twitter"></i></Button>
<Button className="btn-linkedin btn-brand icon mr-1 mb-1"><i className="fa fa-linkedin"></i></Button>
<Button className="btn-flickr btn-brand icon mr-1 mb-1"><i className="fa fa-flickr"></i></Button>
<Button className="btn-tumblr btn-brand icon mr-1 mb-1"><i className="fa fa-tumblr"></i></Button>
<Button className="btn-xing btn-brand icon mr-1 mb-1"><i className="fa fa-xing"></i></Button>
<Button className="btn-github btn-brand icon mr-1 mb-1"><i className="fa fa-github"></i></Button>
<Button className="btn-html5 btn-brand icon mr-1 mb-1"><i className="fa fa-html5"></i></Button>
<Button className="btn-openid btn-brand icon mr-1 mb-1"><i className="fa fa-openid"></i></Button>
<Button className="btn-stack-overflow btn-brand icon mr-1 mb-1"><i className="fa fa-stack-overflow"></i></Button>
<Button className="btn-css3 btn-brand icon mr-1 mb-1"><i className="fa fa-css3"></i></Button>
<Button className="btn-youtube btn-brand icon mr-1 mb-1"><i className="fa fa-youtube"></i></Button>
<Button className="btn-dribbble btn-brand icon mr-1 mb-1"><i className="fa fa-dribbble"></i></Button>
<Button className="btn-google-plus btn-brand icon mr-1 mb-1"><i className="fa fa-google-plus"></i></Button>
<Button className="btn-instagram btn-brand icon mr-1 mb-1"><i className="fa fa-instagram"></i></Button>
<Button className="btn-pinterest btn-brand icon mr-1 mb-1"><i className="fa fa-pinterest"></i></Button>
<Button className="btn-vk btn-brand icon mr-1 mb-1"><i className="fa fa-vk"></i></Button>
<Button className="btn-yahoo btn-brand icon mr-1 mb-1"><i className="fa fa-yahoo"></i></Button>
<Button className="btn-behance btn-brand icon mr-1 mb-1"><i className="fa fa-behance"></i></Button>
<Button className="btn-dropbox btn-brand icon mr-1 mb-1"><i className="fa fa-dropbox"></i></Button>
<Button className="btn-reddit btn-brand icon mr-1 mb-1"><i className="fa fa-reddit"></i></Button>
<Button className="btn-spotify btn-brand icon mr-1 mb-1"><i className="fa fa-spotify"></i></Button>
<Button className="btn-vine btn-brand icon mr-1 mb-1"><i className="fa fa-vine"></i></Button>
<Button className="btn-foursquare btn-brand icon mr-1 mb-1"><i className="fa fa-foursquare"></i></Button>
<Button className="btn-vimeo btn-brand icon mr-1 mb-1"><i className="fa fa-vimeo"></i></Button>
</p>
<h6>Size Large
<small> Add this class <code>.btn-lg</code></small>
</h6>
<p>
<Button size="lg" className="btn-facebook btn-brand icon mr-1 mb-1"><i className="fa fa-facebook"></i></Button>
<Button size="lg" className="btn-twitter btn-brand icon mr-1 mb-1"><i className="fa fa-twitter"></i></Button>
<Button size="lg" className="btn-linkedin btn-brand icon mr-1 mb-1"><i className="fa fa-linkedin"></i></Button>
<Button size="lg" className="btn-flickr btn-brand icon mr-1 mb-1"><i className="fa fa-flickr"></i></Button>
<Button size="lg" className="btn-tumblr btn-brand icon mr-1 mb-1"><i className="fa fa-tumblr"></i></Button>
<Button size="lg" className="btn-xing btn-brand icon mr-1 mb-1"><i className="fa fa-xing"></i></Button>
<Button size="lg" className="btn-github btn-brand icon mr-1 mb-1"><i className="fa fa-github"></i></Button>
<Button size="lg" className="btn-html5 btn-brand icon mr-1 mb-1"><i className="fa fa-html5"></i></Button>
<Button size="lg" className="btn-openid btn-brand icon mr-1 mb-1"><i className="fa fa-openid"></i></Button>
<Button size="lg" className="btn-stack-overflow btn-brand icon mr-1 mb-1"><i className="fa fa-stack-overflow"></i></Button>
<Button size="lg" className="btn-css3 btn-brand icon mr-1 mb-1"><i className="fa fa-css3"></i></Button>
<Button size="lg" className="btn-youtube btn-brand icon mr-1 mb-1"><i className="fa fa-youtube"></i></Button>
<Button size="lg" className="btn-dribbble btn-brand icon mr-1 mb-1"><i className="fa fa-dribbble"></i></Button>
<Button size="lg" className="btn-google-plus btn-brand icon mr-1 mb-1"><i className="fa fa-google-plus"></i></Button>
<Button size="lg" className="btn-instagram btn-brand icon mr-1 mb-1"><i className="fa fa-instagram"></i></Button>
<Button size="lg" className="btn-pinterest btn-brand icon mr-1 mb-1"><i className="fa fa-pinterest"></i></Button>
<Button size="lg" className="btn-vk btn-brand icon mr-1 mb-1"><i className="fa fa-vk"></i></Button>
<Button size="lg" className="btn-yahoo btn-brand icon mr-1 mb-1"><i className="fa fa-yahoo"></i></Button>
<Button size="lg" className="btn-behance btn-brand icon mr-1 mb-1"><i className="fa fa-behance"></i></Button>
<Button size="lg" className="btn-dropbox btn-brand icon mr-1 mb-1"><i className="fa fa-dropbox"></i></Button>
<Button size="lg" className="btn-reddit btn-brand icon mr-1 mb-1"><i className="fa fa-reddit"></i></Button>
<Button size="lg" className="btn-spotify btn-brand icon mr-1 mb-1"><i className="fa fa-spotify"></i></Button>
<Button size="lg" className="btn-vine btn-brand icon mr-1 mb-1"><i className="fa fa-vine"></i></Button>
<Button size="lg" className="btn-foursquare btn-brand icon mr-1 mb-1"><i className="fa fa-foursquare"></i></Button>
<Button size="lg" className="btn-vimeo btn-brand icon mr-1 mb-1"><i className="fa fa-vimeo"></i></Button>
</p>
</CardBody>
</Card>
</Col>
<Col xs="12">
<Card>
<CardHeader>
<i className="fa fa-align-justify"></i>
<strong>Brand Button</strong>
<small> Text only. Usage ex. </small>
<code>
<Button className="btn-facebook btn-brand text"><span>Facebook</span></Button>
</code>
</CardHeader>
<CardBody>
<h6>Size Small
<small> Add this class <code>.btn-sm</code></small>
</h6>
<p>
<Button size="sm" className="btn-facebook btn-brand text mr-1 mb-1"><span>Facebook</span></Button>
<Button size="sm" className="btn-twitter btn-brand text mr-1 mb-1"><span>Twitter</span></Button>
<Button size="sm" className="btn-linkedin btn-brand text mr-1 mb-1"><span>LinkedIn</span></Button>
<Button size="sm" className="btn-flickr btn-brand text mr-1 mb-1"><span>Flickr</span></Button>
<Button size="sm" className="btn-tumblr btn-brand text mr-1 mb-1"><span>Tumblr</span></Button>
<Button size="sm" className="btn-xing btn-brand text mr-1 mb-1"><span>Xing</span></Button>
<Button size="sm" className="btn-github btn-brand text mr-1 mb-1"><span>Github</span></Button>
<Button size="sm" className="btn-html5 btn-brand text mr-1 mb-1"><span>HTML5</span></Button>
<Button size="sm" className="btn-openid btn-brand text mr-1 mb-1"><span>OpenID</span></Button>
<Button size="sm" className="btn-stack-overflow btn-brand text mr-1 mb-1"><span>StackOverflow</span></Button>
<Button size="sm" className="btn-css3 btn-brand text mr-1 mb-1"><span>CSS3</span></Button>
<Button size="sm" className="btn-youtube btn-brand text mr-1 mb-1"><span>YouTube</span></Button>
<Button size="sm" className="btn-dribbble btn-brand text mr-1 mb-1"><span>Dribbble</span></Button>
<Button size="sm" className="btn-google-plus btn-brand text mr-1 mb-1"><span>Google+</span></Button>
<Button size="sm" className="btn-instagram btn-brand text mr-1 mb-1"><span>Instagram</span></Button>
<Button size="sm" className="btn-pinterest btn-brand text mr-1 mb-1"><span>Pinterest</span></Button>
<Button size="sm" className="btn-vk btn-brand text mr-1 mb-1"><span>VK</span></Button>
<Button size="sm" className="btn-yahoo btn-brand text mr-1 mb-1"><span>Yahoo</span></Button>
<Button size="sm" className="btn-behance btn-brand text mr-1 mb-1"><span>Behance</span></Button>
<Button size="sm" className="btn-dropbox btn-brand text mr-1 mb-1"><span>Dropbox</span></Button>
<Button size="sm" className="btn-reddit btn-brand text mr-1 mb-1"><span>Reddit</span></Button>
<Button size="sm" className="btn-spotify btn-brand text mr-1 mb-1"><span>Spotify</span></Button>
<Button size="sm" className="btn-vine btn-brand text mr-1 mb-1"><span>Vine</span></Button>
<Button size="sm" className="btn-foursquare btn-brand text mr-1 mb-1"><span>Forsquare</span></Button>
<Button size="sm" className="btn-vimeo btn-brand text mr-1 mb-1"><span>Vimeo</span></Button>
</p>
<h6>Size Normal</h6>
<p>
<Button className="btn-facebook btn-brand text mr-1 mb-1"><span>Facebook</span></Button>
<Button className="btn-twitter btn-brand text mr-1 mb-1"><span>Twitter</span></Button>
<Button className="btn-linkedin btn-brand text mr-1 mb-1"><span>LinkedIn</span></Button>
<Button className="btn-flickr btn-brand text mr-1 mb-1"><span>Flickr</span></Button>
<Button className="btn-tumblr btn-brand text mr-1 mb-1"><span>Tumblr</span></Button>
<Button className="btn-xing btn-brand text mr-1 mb-1"><span>Xing</span></Button>
<Button className="btn-github btn-brand text mr-1 mb-1"><span>Github</span></Button>
<Button className="btn-html5 btn-brand text mr-1 mb-1"><span>HTML5</span></Button>
<Button className="btn-openid btn-brand text mr-1 mb-1"><span>OpenID</span></Button>
<Button className="btn-stack-overflow btn-brand text mr-1 mb-1"><span>StackOverflow</span></Button>
<Button className="btn-css3 btn-brand text mr-1 mb-1"><span>CSS3</span></Button>
<Button className="btn-youtube btn-brand text mr-1 mb-1"><span>YouTube</span></Button>
<Button className="btn-dribbble btn-brand text mr-1 mb-1"><span>Dribbble</span></Button>
<Button className="btn-google-plus btn-brand text mr-1 mb-1"><span>Google+</span></Button>
<Button className="btn-instagram btn-brand text mr-1 mb-1"><span>Instagram</span></Button>
<Button className="btn-pinterest btn-brand text mr-1 mb-1"><span>Pinterest</span></Button>
<Button className="btn-vk btn-brand text mr-1 mb-1"><span>VK</span></Button>
<Button className="btn-yahoo btn-brand text mr-1 mb-1"><span>Yahoo</span></Button>
<Button className="btn-behance btn-brand text mr-1 mb-1"><span>Behance</span></Button>
<Button className="btn-dropbox btn-brand text mr-1 mb-1"><span>Dropbox</span></Button>
<Button className="btn-reddit btn-brand text mr-1 mb-1"><span>Reddit</span></Button>
<Button className="btn-spotify btn-brand text mr-1 mb-1"><span>Spotify</span></Button>
<Button className="btn-vine btn-brand text mr-1 mb-1"><span>Vine</span></Button>
<Button className="btn-foursquare btn-brand text mr-1 mb-1"><span>Forsquare</span></Button>
<Button className="btn-vimeo btn-brand text mr-1 mb-1"><span>Vimeo</span></Button>
</p>
<h6>Size Large
<small> Add this class <code>.btn-lg</code></small>
</h6>
<p>
<Button size="lg" className="btn-facebook btn-brand text mr-1 mb-1"><span>Facebook</span></Button>
<Button size="lg" className="btn-twitter btn-brand text mr-1 mb-1"><span>Twitter</span></Button>
<Button size="lg" className="btn-linkedin btn-brand text mr-1 mb-1"><span>LinkedIn</span></Button>
<Button size="lg" className="btn-flickr btn-brand text mr-1 mb-1"><span>Flickr</span></Button>
<Button size="lg" className="btn-tumblr btn-brand text mr-1 mb-1"><span>Tumblr</span></Button>
<Button size="lg" className="btn-xing btn-brand text mr-1 mb-1"><span>Xing</span></Button>
<Button size="lg" className="btn-github btn-brand text mr-1 mb-1"><span>Github</span></Button>
<Button size="lg" className="btn-html5 btn-brand text mr-1 mb-1"><span>HTML5</span></Button>
<Button size="lg" className="btn-openid btn-brand text mr-1 mb-1"><span>OpenID</span></Button>
<Button size="lg" className="btn-stack-overflow btn-brand text mr-1 mb-1"><span>StackOverflow</span></Button>
<Button size="lg" className="btn-css3 btn-brand text mr-1 mb-1"><span>CSS3</span></Button>
<Button size="lg" className="btn-youtube btn-brand text mr-1 mb-1"><span>YouTube</span></Button>
<Button size="lg" className="btn-dribbble btn-brand text mr-1 mb-1"><span>Dribbble</span></Button>
<Button size="lg" className="btn-google-plus btn-brand text mr-1 mb-1"><span>Google+</span></Button>
<Button size="lg" className="btn-instagram btn-brand text mr-1 mb-1"><span>Instagram</span></Button>
<Button size="lg" className="btn-pinterest btn-brand text mr-1 mb-1"><span>Pinterest</span></Button>
<Button size="lg" className="btn-vk btn-brand text mr-1 mb-1"><span>VK</span></Button>
<Button size="lg" className="btn-yahoo btn-brand text mr-1 mb-1"><span>Yahoo</span></Button>
<Button size="lg" className="btn-behance btn-brand text mr-1 mb-1"><span>Behance</span></Button>
<Button size="lg" className="btn-dropbox btn-brand text mr-1 mb-1"><span>Dropbox</span></Button>
<Button size="lg" className="btn-reddit btn-brand text mr-1 mb-1"><span>Reddit</span></Button>
<Button size="lg" className="btn-spotify btn-brand text mr-1 mb-1"><span>Spotify</span></Button>
<Button size="lg" className="btn-vine btn-brand text mr-1 mb-1"><span>Vine</span></Button>
<Button size="lg" className="btn-foursquare btn-brand text mr-1 mb-1"><span>Forsquare</span></Button>
<Button size="lg" className="btn-vimeo btn-brand text mr-1 mb-1"><span>Vimeo</span></Button>
</p>
</CardBody>
</Card>
</Col>
</Row>
</div>
);
}
Example #18
| Source File: Signup.js From ReactJS-Projects with MIT License | 4 votes |
|
Signup = () => {
const context = useContext(UserContext)
const [email, setEmail] = useState("")
const [password, setPassword] = useState("")
const handleSignup = () => {
firebase
.auth()
.createUserWithEmailAndPassword(email, password)
.then(res => {
console.log(res)
context.setUser({
email: res.user.email,
uid: res.user.uid
})
})
.catch(err => {
console.log(err);
toast(err.message, {
type: 'error'
})
})
}
const handleFormSubmit = e => {
e.preventDefault()
handleSignup()
}
if (context.user?.uid) {
return (
<Navigate to="/" replace />
)
}
return (
<Container className='text-center'>
<Row>
<Col lg={6} className='offset-lg-3 mt-5'>
<Card>
<Form onSubmit={handleFormSubmit}>
<CardHeader className=''>SignUp here</CardHeader>
<CardBody>
<FormGroup row>
<Label for='email' sm={3}>
Email
</Label>
<Col sm={9}>
<Input
type='email'
name='email'
id='email'
placeholder='Your Email'
value={email}
onChange={e => setEmail(e.target.value)}
/>
</Col>
</FormGroup>
<FormGroup row>
<Label for='password' sm={3}>
Password
</Label>
<Col sm={9}>
<Input
type='password'
name='password'
id='password'
placeholder='Your Password'
value={password}
onChange={e => setPassword(e.target.value)}
/>
</Col>
</FormGroup>
</CardBody>
<CardFooter>
<Button type='submit' block color='primary'>
Sign Up
</Button>
</CardFooter>
</Form>
</Card>
</Col>
</Row>
</Container>
);
}
Example #19
| Source File: Products.js From gedge-platform with Apache License 2.0 | 4 votes |
|
render() {
return (
<React.Fragment>
<div className="page-content">
<Container fluid>
<Breadcrumbs title="Products" breadcrumbItems={this.state.breadcrumbItems} />
<Detail />
<Row>
<Col xl={3} lg={4}>
<Card>
<CardHeader className="bg-transparent border-bottom">
<h5 className="mb-0">Filters</h5>
</CardHeader>
<CardBody>
<h5 className="font-size-14 mb-3">Categories</h5>
<div id="accordion" className="custom-accordion categories-accordion mb-3">
<div className="categories-group-card">
<Link to="#" onClick={() => this.setState({ electronic: !this.state.electronic, fashion: false, baby: false, fitness: false })} className={this.state.electronic ? "categories-group-list accordian-bg-products" : "categories-group-list"}>
<i className="mdi mdi-desktop-classic font-size-16 align-middle mr-2"></i> Electronic
<i className={this.state.electronic === true ? "mdi mdi-minus float-right accor-minus-icon" : "mdi mdi-plus float-right accor-plus-icon"}></i>
</Link>
<Collapse isOpen={this.state.electronic} id="collapseOne">
<div>
<ul className="list-unstyled categories-list mb-0">
<li><Link to="#"><i className="mdi mdi-circle-medium mr-1"></i> Mobile</Link></li>
<li><Link to="#"><i className="mdi mdi-circle-medium mr-1"></i> Mobile accessories</Link></li>
<li><Link to="#"><i className="mdi mdi-circle-medium mr-1"></i> Computers</Link></li>
<li><Link to="#"><i className="mdi mdi-circle-medium mr-1"></i> Laptops</Link></li>
<li><Link to="#"><i className="mdi mdi-circle-medium mr-1"></i> Speakers</Link></li>
</ul>
</div>
</Collapse>
</div>
<div className="categories-group-card">
<Link to="#" className={this.state.fashion ? "categories-group-list accordian-bg-products" : "categories-group-list"} onClick={() => this.setState({ fashion: !this.state.fashion, electronic: false, baby: false, fitness: false })}>
<i className="mdi mdi-hanger font-size-16 align-middle mr-2"></i> Fashion
<i className={this.state.fashion === true ? "mdi mdi-minus float-right accor-minus-icon" : "mdi mdi-plus float-right accor-plus-icon"}></i>
</Link>
<Collapse isOpen={this.state.fashion} id="collapseTwo">
<div>
<ul className="list-unstyled categories-list mb-0">
<li className="active"><Link to="#"><i className="mdi mdi-circle-medium mr-1"></i> Clothing</Link></li>
<li><Link to="#"><i className="mdi mdi-circle-medium mr-1"></i> Footwear</Link></li>
<li><Link to="#"><i className="mdi mdi-circle-medium mr-1"></i> Watches</Link></li>
<li><Link to="#"><i className="mdi mdi-circle-medium mr-1"></i> Sportswear</Link></li>
</ul>
</div>
</Collapse>
</div>
<div className="categories-group-card">
<Link to="#" onClick={() => this.setState({ baby: !this.state.baby, fashion: false, electronic: false, fitness: false })} className={this.state.baby ? "categories-group-list accordian-bg-products" : "categories-group-list"} >
<i className="mdi mdi-pinwheel-outline font-size-16 align-middle mr-2"></i> Baby & Kids
<i className={this.state.baby === true ? "mdi mdi-minus float-right accor-minus-icon" : "mdi mdi-plus float-right accor-plus-icon"}></i>
</Link>
<Collapse isOpen={this.state.baby} id="collapseThree">
<div>
<ul className="list-unstyled categories-list mb-0">
<li><Link to="#"><i className="mdi mdi-circle-medium mr-1"></i> Clothing</Link></li>
<li><Link to="#"><i className="mdi mdi-circle-medium mr-1"></i> Footwear</Link></li>
<li><Link to="#"><i className="mdi mdi-circle-medium mr-1"></i> Toys</Link></li>
<li><Link to="#"><i className="mdi mdi-circle-medium mr-1"></i> Baby care</Link></li>
</ul>
</div>
</Collapse>
</div>
<div className="categories-group-card">
<Link to="#" onClick={() => this.setState({ fitness: !this.state.fitness, fashion: false, baby: false, electronic: false })} className={this.state.fitness ? "categories-group-list accordian-bg-products" : "categories-group-list"}>
<i className="mdi mdi-dumbbell font-size-16 align-middle mr-2"></i> Fitness
<i className={this.state.fitness === true ? "mdi mdi-minus float-right accor-minus-icon" : "mdi mdi-plus float-right accor-plus-icon"}></i>
</Link>
<Collapse isOpen={this.state.fitness} id="collapseFour">
<div>
<ul className="list-unstyled categories-list mb-0">
<li><Link to="#"><i className="mdi mdi-circle-medium mr-1"></i> Gym equipment</Link></li>
<li><Link to="#"><i className="mdi mdi-circle-medium mr-1"></i> Yoga mat</Link></li>
<li><Link to="#"><i className="mdi mdi-circle-medium mr-1"></i> Dumbbells</Link></li>
<li><Link to="#"><i className="mdi mdi-circle-medium mr-1"></i> Protein supplements</Link></li>
</ul>
</div>
</Collapse>
</div>
</div>
</CardBody>
<CardBody className="border-top">
<div>
<h5 className="font-size-14 mb-4">Price</h5>
<br />
<Nouislider range={{ min: 0, max: 600 }} tooltips={true} start={[100, 500]} connect />
</div>
</CardBody>
<div className="custom-accordion">
<CardBody className="border-top">
<div>
<h5 className="font-size-14 mb-0"><Link to="#" className="text-dark d-block" onClick={() => this.setState({ discount: !this.state.discount })} >Discount <i className={this.state.discount === true ? "mdi mdi-minus float-right accor-minus-icon" : "mdi mdi-plus float-right accor-plus-icon"}></i></Link></h5>
<Collapse isOpen={this.state.discount} id="collapseExample1">
<div className="mt-4">
<div className="custom-control custom-radio mt-2">
<Input type="radio" id="productdiscountRadio6" name="productdiscountRadio1" className="custom-control-input" />
<Label className="custom-control-label" htmlFor="productdiscountRadio6">50% or more</Label>
</div>
<div className="custom-control custom-radio mt-2">
<Input type="radio" id="productdiscountRadio5" name="productdiscountRadio1" className="custom-control-input" />
<Label className="custom-control-label" htmlFor="productdiscountRadio5">40% or more</Label>
</div>
<div className="custom-control custom-radio mt-2">
<Input type="radio" id="productdiscountRadio4" name="productdiscountRadio1" className="custom-control-input" />
<Label className="custom-control-label" htmlFor="productdiscountRadio4">30% or more</Label>
</div>
<div className="custom-control custom-radio mt-2">
<Input type="radio" id="productdiscountRadio3" name="productdiscountRadio1" className="custom-control-input" />
<Label className="custom-control-label" htmlFor="productdiscountRadio3">20% or more</Label>
</div>
<div className="custom-control custom-radio mt-2">
<Input type="radio" id="productdiscountRadio2" name="productdiscountRadio1" className="custom-control-input" />
<Label className="custom-control-label" htmlFor="productdiscountRadio2">10% or more</Label>
</div>
<div className="custom-control custom-radio mt-2">
<Input type="radio" id="productdiscountRadio1" name="productdiscountRadio1" className="custom-control-input" />
<Label className="custom-control-label" htmlFor="productdiscountRadio1">Less than 10%</Label>
</div>
</div>
</Collapse>
</div>
</CardBody>
<CardBody className="border-top">
<div>
<h5 className="font-size-14 mb-0"><Link to="#" className="text-dark d-block" onClick={() => this.setState({ size: !this.state.size })}>Size <i className={this.state.size === true ? "mdi mdi-minus float-right accor-minus-icon" : "mdi mdi-plus float-right accor-plus-icon"}></i></Link></h5>
<Collapse isOpen={this.state.size} id="collapseExample2">
<div className="mt-4">
<div className="custom-control custom-radio mt-2">
<Input type="radio" id="productsizeRadio1" name="productsizeRadio" className="custom-control-input" />
<Label className="custom-control-label" htmlFor="productsizeRadio1">X-Large</Label>
</div>
<div className="custom-control custom-radio mt-2">
<Input type="radio" id="productsizeRadio2" name="productsizeRadio" className="custom-control-input" />
<Label className="custom-control-label" htmlFor="productsizeRadio2">Large</Label>
</div>
<div className="custom-control custom-radio mt-2">
<Input type="radio" id="productsizeRadio3" name="productsizeRadio" className="custom-control-input" />
<Label className="custom-control-label" htmlFor="productsizeRadio3">Medium</Label>
</div>
<div className="custom-control custom-radio mt-2">
<Input type="radio" id="productsizeRadio4" name="productsizeRadio" className="custom-control-input" />
<Label className="custom-control-label" htmlFor="productsizeRadio4">Small</Label>
</div>
</div>
</Collapse>
</div>
</CardBody>
<CardBody className="border-top">
<div>
<h5 className="font-size-14 mb-0"><Link to="#" className="collapsed text-dark d-block" onClick={() => this.setState({ rating: !this.state.rating })}>Customer Rating <i className={this.state.rating === true ? "mdi mdi-minus float-right accor-minus-icon" : "mdi mdi-plus float-right accor-plus-icon"}></i></Link></h5>
<Collapse isOpen={this.state.rating} id="collapseExample3">
<div className="mt-4">
<div className="custom-control custom-radio mt-2">
<Input type="radio" id="productratingRadio1" name="productratingRadio1" className="custom-control-input" />
<Label className="custom-control-label" htmlFor="productratingRadio1">4 <i className="mdi mdi-star text-warning"></i> & Above</Label>
</div>
<div className="custom-control custom-radio mt-2">
<Input type="radio" id="productratingRadio2" name="productratingRadio1" className="custom-control-input" />
<Label className="custom-control-label" htmlFor="productratingRadio2">3 <i className="mdi mdi-star text-warning"></i> & Above</Label>
</div>
<div className="custom-control custom-radio mt-2">
<Input type="radio" id="productratingRadio3" name="productratingRadio1" className="custom-control-input" />
<Label className="custom-control-label" htmlFor="productratingRadio3">2 <i className="mdi mdi-star text-warning"></i> & Above</Label>
</div>
<div className="custom-control custom-radio mt-2">
<Input type="radio" id="productratingRadio4" name="productratingRadio1" className="custom-control-input" />
<Label className="custom-control-label" htmlFor="productratingRadio4">1 <i className="mdi mdi-star text-warning"></i></Label>
</div>
</div>
</Collapse>
</div>
</CardBody>
</div>
</Card>
</Col>
<Col lg={9}>
<Card>
<CardBody>
<div>
<Row>
<Col md={6}>
<div>
<h5>Clothes & Accessories</h5>
<Breadcrumb listClassName="p-0 bg-transparent mb-2">
<BreadcrumbItem ><Link to="#">Fashion</Link></BreadcrumbItem>
<BreadcrumbItem ><Link to="#">Clothing</Link></BreadcrumbItem >
<BreadcrumbItem active>T-shirts</BreadcrumbItem >
</Breadcrumb>
</div>
</Col>
<Col md={6}>
<div className="form-inline float-md-right">
<div className="search-box ml-2">
<div className="position-relative">
<Input type="text" className="form-control rounded" placeholder="Search..." />
<i className="mdi mdi-magnify search-icon"></i>
</div>
</div>
</div>
</Col>
</Row>
<ul className="list-inline my-3 ecommerce-sortby-list">
<li className="list-inline-item"><span className="font-weight-medium font-family-secondary">Sort by:</span></li>
<li className="list-inline-item active ml-1"><Link to="#">Popularity</Link></li>
<li className="list-inline-item ml-1"><Link to="#">Newest</Link></li>
<li className="list-inline-item ml-1"><Link to="#">Discount</Link></li>
</ul>
<Row className="no-gutters">
<Col xl={4} sm={6}>
<div className="product-box">
<div className="product-img">
<div className="product-ribbon badge badge-warning">
Trending
</div>
<div className="product-like">
<Link to="#">
<i className="mdi mdi-heart-outline"></i>
</Link>
</div>
<img src={product1} alt="" className="img-fluid mx-auto d-block" />
</div>
<div className="text-center">
<p className="font-size-12 mb-1">Blue color, T-shirt</p>
<h5 className="font-size-15"><Link to="#" className="text-dark">Full sleeve T-shirt</Link></h5>
<h5 className="mt-3 mb-0">$240</h5>
</div>
</div>
</Col>
<Col xl={4} sm={6}>
<div className="product-box">
<div className="product-img">
<div className="product-ribbon badge badge-primary">
- 25 %
</div>
<div className="product-like">
<Link to="#">
<i className="mdi mdi-heart-outline"></i>
</Link>
</div>
<img src={product2} alt="" className="img-fluid mx-auto d-block" />
</div>
<div className="text-center">
<p className="font-size-12 mb-1">Half sleeve, T-shirt</p>
<h5 className="font-size-15"><Link to="#" className="text-dark">Half sleeve T-shirt </Link></h5>
<h5 className="mt-3 mb-0"><span className="text-muted mr-2"><del>$240</del></span>$225</h5>
</div>
</div>
</Col>
<Col xl={4} sm={6}>
<div className="product-box">
<div className="product-img">
<div className="product-like">
<Link to="#">
<i className="mdi mdi-heart text-danger"></i>
</Link>
</div>
<img src={product3} alt="" className="img-fluid mx-auto d-block" />
</div>
<div className="text-center">
<p className="font-size-12 mb-1">Green color, Hoodie</p>
<h5 className="font-size-15"><Link to="#" className="text-dark">Hoodie (Green)</Link></h5>
<h5 className="mt-3 mb-0"><span className="text-muted mr-2"><del>$290</del></span>$275</h5>
</div>
</div>
</Col>
<Col xl={4} sm={6}>
<div className="product-box">
<div className="product-img">
<div className="product-like">
<Link to="#">
<i className="mdi mdi-heart-outline"></i>
</Link>
</div>
<img src={product4} alt="" className="img-fluid mx-auto d-block" />
</div>
<div className="text-center">
<p className="font-size-12 mb-1">Gray color, Hoodie</p>
<h5 className="font-size-15"><Link to="#" className="text-dark">Hoodie (Green)</Link></h5>
<h5 className="mt-3 mb-0"><span className="text-muted mr-2"><del>$290</del></span>$275</h5>
</div>
</div>
</Col>
<Col xl={4} sm={6}>
<div className="product-box">
<div className="product-img">
<div className="product-like">
<Link to="#">
<i className="mdi mdi-heart text-danger"></i>
</Link>
</div>
<img src={product5} alt="" className="img-fluid mx-auto d-block" />
</div>
<div className="text-center">
<p className="font-size-12 mb-1">Blue color, T-shirt</p>
<h5 className="font-size-15"><Link to="#" className="text-dark">Full sleeve T-shirt</Link></h5>
<h5 className="mt-3 mb-0">$242</h5>
</div>
</div>
</Col>
<Col xl={4} sm={6}>
<div className="product-box">
<div className="product-img">
<div className="product-ribbon badge badge-primary">
- 22 %
</div>
<div className="product-like">
<Link to="#">
<i className="mdi mdi-heart-outline"></i>
</Link>
</div>
<img src={product6} alt="" className="img-fluid mx-auto d-block" />
</div>
<div className="text-center">
<p className="font-size-12 mb-1">Black color, T-shirt</p>
<h5 className="font-size-15"><Link to="#" className="text-dark">Half sleeve T-shirt </Link></h5>
<h5 className="mt-3 mb-0"><span className="text-muted mr-2"><del>$240</del></span>$225</h5>
</div>
</div>
</Col>
</Row>
<Row className="mt-4">
<Col sm={6}>
<div>
<p className="mb-sm-0 mt-2">Page <span className="font-weight-bold">2</span> Of <span className="font-weight-bold">113</span></p>
</div>
</Col>
<Col sm={6}>
<div className="float-sm-right">
<Pagination className="pagination-rounded mb-sm-0">
<PaginationItem disabled>
<PaginationLink href="#" ><i className="mdi mdi-chevron-left"></i></PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationLink href="#" >1</PaginationLink>
</PaginationItem>
<PaginationItem active>
<PaginationLink href="#" >2</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationLink href="#" >3</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationLink hrefo="#" >4</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationLink href="#" >5</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationLink href="#" ><i className="mdi mdi-chevron-right"></i></PaginationLink>
</PaginationItem>
</Pagination>
</div>
</Col>
</Row>
</div>
</CardBody>
</Card>
</Col>
</Row>
</Container>
</div>
</React.Fragment>
);
}
Example #20
| Source File: Cards.js From id.co.moonlay-eworkplace-admin-web with MIT License | 4 votes |
|
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 #21
| Source File: Signin.js From ReactJS-Projects with MIT License | 4 votes |
|
Signin = () => {
const context = useContext(UserContext)
const [email, setEmail] = useState("")
const [password, setPassword] = useState("")
const handleSignup = () => {
firebase
.auth()
.signInWithEmailAndPassword(email, password)
.then(res => {
console.log(res)
context.setUser({
email: res.user.email,
uid: res.user.uid
})
})
.catch(err => {
console.log(err);
toast(err.message, {
type: 'error'
})
})
}
const handleFormSubmit = e => {
e.preventDefault()
handleSignup()
}
if (context.user?.uid) {
return (
<Navigate to="/" replace />
)
}
return (
<Container className='text-center'>
<Row>
<Col lg={6} className='offset-lg-3 mt-5'>
<Card>
<Form onSubmit={handleFormSubmit}>
<CardHeader className=''>SignIn here</CardHeader>
<CardBody>
<FormGroup row>
<Label for='email' sm={3}>
Email
</Label>
<Col sm={9}>
<Input
type='email'
name='email'
id='email'
placeholder='Your Email'
value={email}
onChange={e => setEmail(e.target.value)}
/>
</Col>
</FormGroup>
<FormGroup row>
<Label for='password' sm={3}>
Password
</Label>
<Col sm={9}>
<Input
type='password'
name='password'
id='password'
placeholder='Your Password'
value={password}
onChange={e => setPassword(e.target.value)}
/>
</Col>
</FormGroup>
</CardBody>
<CardFooter>
<Button type='submit' block color='primary'>
Sign In
</Button>
</CardFooter>
</Form>
</Card>
</Col>
</Row>
</Container>
);
}
Example #22
| Source File: Tables.js From id.co.moonlay-eworkplace-admin-web with MIT License | 4 votes |
|
render() {
const { results, currentPage, resultsPerPage } = this.state;
const indexOfLastTodo = currentPage * resultsPerPage;
const indexOfFirstTodo = indexOfLastTodo - resultsPerPage;
const currentresults = results.slice(indexOfFirstTodo, indexOfLastTodo);
const renderresults = currentresults.map((results, index) => {
//return <li key={index}>{todo.username}</li>;
return (
<tr key={results.Id} data-category={results.Id}>
<td>{results.Username}</td>
<td>{results.Name}</td>
<td>{results.CheckIn.substr(0,10)}</td>
<td>{ (moment(results.CheckIn).add(7, 'hours').format('hh:mm:ss a'))
//.substr(11, 23)
}</td>
{/* <td>
{results.checkIn.substr(11, 23) <= '09:00:00.000'
? 'aman'
: 'telat'}
</td> */}
{/* <td>{Math.abs(new Date(post.checkIn) - new Date(post.checkOut))/3600000}</td> */}
<td>{results.Location}</td>
<td>
{results.CheckOut === '0001-01-01T00:00:00'
? 'Haven\'t Checked Out Yet'
: (moment(results.CheckOut).add(7, 'hours').format('hh:mm:ss a'))}
</td>
{/* <td>{(Math.abs(new Date(post.checkIn) - new Date(post.checkOut))/3600000) == 9 ? 'tepat' : ((Math.abs(new Date(post.checkIn) - new Date(post.checkOut))/3600000) < 9 ? 'kurang dari 9 jam' : 'lembur')}</td> */}
{/* <td>
{(
Math.abs(new Date(results.checkIn) - new Date(results.checkOut)) /
3600000
)
.toString()
.substr(0, 3) === '176'
? 'Haven\'t Checked Out Yet'
: (
Math.abs(
new Date(results.checkIn) - new Date(results.checkOut)
) / 3600000
)
.toString()
.substr(0, 3)}
</td> */}
<td>
{/* <Button className="brn btn-success" onClick={() => this.approveAbsensi(results.Id)}>Approve</Button>
*/}
<Button
className="btn btn-info"
onClick={() => this.UpdateAbsensi(results.Id)}>
Edit
</Button>
{/* <Link
to={'/account/editaccount/' + results.id}
className="btn btn-primary">
Edit
</Link> */}
<Button
className="btn btn-danger"
onClick={() => this.deleteAbsensi(results.Id)}>
Delete
</Button>
</td>
</tr>
);
});
const pageNumbers = [];
for (let i = 1; i <= Math.ceil(results.length / resultsPerPage); i++) {
pageNumbers.push(i);
}
const renderPageNumbers = pageNumbers.map(number => {
return (
<li
key={number}
id={number}
onClick={this.handleClick}
className="page-link">
{number}
</li>
);
});
if (this.state.loading === false) {
return <h2>Loading...</h2>;
}
return (
<div>
<Modal show={this.state.show} onHide={this.handleClose}>
<Modal.Header closeButton>
<Modal.Title>Edit Status</Modal.Title>
</Modal.Header>
<Modal.Body>
<Form>
CheckIn
<InputGroup className="mb-3">
<Input type="datetime-local" onChange={this.handleCheckIn} />
</InputGroup>
Location
<InputGroup className="mb-3">
<Input type="text" value={this.state.Location} onChange={this.handleLocation} placeholder="Location" />
</InputGroup>
CheckOut
<InputGroup className="mb-3">
<Input type="datetime-local" onChange={this.handleCheckOut} />
</InputGroup>
</Form>
</Modal.Body>
<Modal.Footer>
<Button className="btn btn-secondary" onClick={this.handleClose}>
Close
</Button>
<Button className="btn btn-info" onClick={this.handelsubmitform}>
Save Changes
</Button>
</Modal.Footer>
</Modal>
<div className="row">
{/* <div class="col-md-3">
<h4>Date from</h4>
<input
type="date"
class="form-control"
id="datefilterfrom"
data-date-split-input="true"
onChange={this.handleDateChange}
/>
</div> */}
{/* <div class="col-md-3">
<h4>Date to</h4>
<input
type="date"
class="form-control"
id="datefilterto"
data-date-split-input="true"
/>
</div> */}
{/* <div>
<h4>Date to</h4>
<button onClick={this.handleJS}>filter date</button>
</div> */}
</div>
<div className="animated fadeIn">
{this.state.loading && (
<Row>
<Col xs="12" lg="12">
<Card>
<CardHeader>
<Row>
<Col>
<i className="fa fa-user" /> <b> AtOffice</b>
{/* <Button
style={{ marginLeft: 10 }}
className="btn btn-info"
onClick={this.handleAddAbsensi} >
Add Absensi
</Button> */}
</Col>
<Col>
<input
type="text"
id="myInput"
className="form-control form-control-md"
style={{ width: '100%' }}
placeholder="Search By Username"
onChange={this.filterList}
/>
</Col>
</Row>
</CardHeader>
<CardBody>
<Table id="myTable" responsive striped>
<thead>
<tr>
<th>Username</th>
<th>Name</th>
<th>Date</th>
<th>CheckIn</th>
<th>Location</th>
<th>CheckOut</th>
<th>Action</th>
</tr>
</thead>
<tbody>{renderresults}</tbody>
</Table>
</CardBody>
</Card>
</Col>
</Row>
)}
</div>
<ul className="pagination">{renderPageNumbers}</ul>
</div>
);
}
