reactstrap#CardFooter JavaScript Examples
The following examples show how to use
reactstrap#CardFooter.
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: OurPartners.js From covidsos with MIT License | 6 votes |
|
renderOrganisationCard(imgSrc, description, link) {
return (
<Col lg="10" md="10">
<Card className="shadow border-0">
<CardHeader className="pb-3">
<div className="text-uppercase text-muted text-center mt-2 mb-2">
<img alt='logo' src={imgSrc} style={{height: '10rem', maxWidth: '100%'}}/>
</div>
</CardHeader>
<CardBody className="px-lg-5 py-lg-5 text-justify">
<div className="text-justify mt-2 mb-2">{description}</div>
</CardBody>
<CardFooter className="py-4 text-right">
<a href={link} className="btn btn-primary" target="_blank"
rel="noopener noreferrer">Know More</a>
</CardFooter>
</Card>
</Col>
);
}
Example #2
| Source File: SeniorCitizenPopupRegistration.js From covidsos with MIT License | 6 votes |
|
render() {
const {activeTab, totalTabs} = this.state;
return (
<>
<CardBody>
<Row className="justify-content-center">
{this.getTab1()}
{this.getTab2()}
{this.getTab3()}
</Row>
{this.getTab0()}
</CardBody>
<CardFooter hidden={activeTab === 0} className="text-center">
{activeTab} of {totalTabs}
</CardFooter>
</>
)
;
}
Example #3
| Source File: VolunteerPopupRegistration.js From covidsos with MIT License | 6 votes |
|
render() {
const {activeTab, totalTabs} = this.state;
return (
<>
<CardBody>
<Row className="justify-content-center">
{this.getTab1()}
{this.getTab2()}
</Row>
{this.getTab0()}
</CardBody>
<CardFooter hidden={activeTab === 0} className="text-center">
{activeTab} of {totalTabs}
</CardFooter>
</>
);
}
Example #4
| Source File: AdminLogin.js From covidsos with MIT License | 6 votes |
|
render() {
return (
<>
<Header showCards={false}/>
{/* Page content */}
<Container className="mt--7" fluid>
<Row className="justify-content-center">
<Col lg="5" md="7">
<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">
Login
</div>
</CardHeader>
<CardBody className="px-lg-5 py-lg-5">
{isLoggedIn() ? 'You are already logged in!' : <AdminLoginForm/>}
</CardBody>
<CardFooter className="bg-transparent">
If you are an NGO, request for your organizational login by <a href="/contact-us">clicking here</a>.
</CardFooter>
</Card>
</Col>
</Row>
</Container>
</>
);
}
Example #5
| 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 #6
| 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 #7
| 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 #8
| Source File: Cards.jsx From aglomerou with GNU General Public License v3.0 | 5 votes |
|
Cards = ({ data: { confirmed, recovered, deaths, lastUpdate } }) => {
if (!confirmed) {
return 'Carregando...';
}
return (
<div className={styles.container}>
<Row className={styles.row} container spacing={3} justify="center">
<Col sm="4">
<Card xs={12} md={3} className={cx(styles.card, styles.infected)}>
<CardTitle>CASOS ATIVOS</CardTitle>
<CardText variant="h5">
<CountUp start={0} end={confirmed.value} duration={2.5} separator="," />
</CardText>
<CardText color="textSecondary">{new Date(lastUpdate).toDateString()}</CardText>
<CardFooter variant="body2">Número de casos ativos de COVID-19</CardFooter>
</Card>
</Col>
<Col sm="4">
<Card xs={12} md={3} className={cx(styles.card, styles.recovered)}>
<CardTitle color="textSecondary">RECUPERADOS</CardTitle>
<CardText variant="h5">
<CountUp start={0} end={recovered.value} duration={2.5} separator="," />
</CardText>
<CardText color="textSecondary">{new Date(lastUpdate).toDateString()}</CardText>
<CardFooter variant="body2">Números de recuperados do COVID-19</CardFooter>
</Card>
</Col>
<Col sm="4">
<Card xs={12} md={3} className={cx(styles.card, styles.deaths)}>
<CardTitle color="textSecondary">MORTES</CardTitle>
<CardText variant="h5">
<CountUp start={0} end={deaths.value} duration={2.5} separator="," />
</CardText>
<CardText color="textSecondary">{new Date(lastUpdate).toDateString()}</CardText>
<CardFooter variant="body2">Número de mortes causadas pelo COVID-19</CardFooter>
</Card>
</Col>
</Row>
</div>
);
}
Example #9
| Source File: Widget02.js From id.co.moonlay-eworkplace-admin-web with MIT License | 5 votes |
|
render() {
const { className, cssModule, header, mainText, icon, color, footer, link, children, variant, ...attributes } = this.props;
// demo purposes only
const padding = (variant === '0' ? { card: 'p-3', icon: 'p-3', lead: 'mt-2' } : (variant === '1' ? {
card: 'p-0', icon: 'p-4', lead: 'pt-3',
} : { card: 'p-0', icon: 'p-4 px-5', lead: 'pt-3' }));
const card = { style: 'clearfix', color: color, icon: icon, classes: '' };
card.classes = mapToCssModules(classNames(className, card.style, padding.card), cssModule);
const lead = { style: 'h5 mb-0', color: color, classes: '' };
lead.classes = classNames(lead.style, 'text-' + card.color, padding.lead);
const blockIcon = function (icon) {
const classes = classNames(icon, 'bg-' + card.color, padding.icon, 'font-2xl mr-3 float-left');
return (<i className={classes}></i>);
};
const cardFooter = function () {
if (footer) {
return (
<CardFooter className="px-3 py-2">
<a className="font-weight-bold font-xs btn-block text-muted" href={link}>View More
<i className="fa fa-angle-right float-right font-lg"></i></a>
</CardFooter>
);
}
};
return (
<Card>
<CardBody className={card.classes} {...attributes}>
{blockIcon(card.icon)}
<div className={lead.classes}>{header}</div>
<div className="text-muted text-uppercase font-weight-bold font-xs">{mainText}</div>
</CardBody>
{cardFooter()}
</Card>
);
}
Example #10
| Source File: Register.js From id.co.moonlay-eworkplace-admin-web with MIT License | 5 votes |
|
render() {
var token = localStorage.getItem('token');
var RoleId = localStorage.getItem('RoleId')
if (token === null || token === undefined ||RoleId === null || RoleId === undefined) {
this.props.history.push('/login');
}
return (
<div className="app flex-row align-items-center">
<Container>
<Row className="justify-content-center">
<Col md="9" lg="7" xl="6">
<Card className="mx-4">
<CardBody className="p-4">
<Form>
<h1>Register</h1>
<p className="text-muted">Create your account</p>
<InputGroup className="mb-3">
<InputGroupAddon addonType="prepend">
<InputGroupText>
<i className="icon-user"></i>
</InputGroupText>
</InputGroupAddon>
<Input type="text" placeholder="Username" autoComplete="username" />
</InputGroup>
<InputGroup className="mb-3">
<InputGroupAddon addonType="prepend">
<InputGroupText>@</InputGroupText>
</InputGroupAddon>
<Input type="text" placeholder="Email" autoComplete="email" />
</InputGroup>
<InputGroup className="mb-3">
<InputGroupAddon addonType="prepend">
<InputGroupText>
<i className="icon-lock"></i>
</InputGroupText>
</InputGroupAddon>
<Input type="password" placeholder="Password" autoComplete="new-password" />
</InputGroup>
<InputGroup className="mb-4">
<InputGroupAddon addonType="prepend">
<InputGroupText>
<i className="icon-lock"></i>
</InputGroupText>
</InputGroupAddon>
<Input type="password" placeholder="Repeat password" autoComplete="new-password" />
</InputGroup>
<Button color="success" block>Create Account</Button>
</Form>
</CardBody>
<CardFooter className="p-4">
<Row>
<Col xs="12" sm="6">
<Button className="btn-facebook mb-1" block><span>facebook</span></Button>
</Col>
<Col xs="12" sm="6">
<Button className="btn-twitter mb-1" block><span>twitter</span></Button>
</Col>
</Row>
</CardFooter>
</Card>
</Col>
</Row>
</Container>
</div>
);
}
Example #11
| Source File: SubsystemHeads.js From Website2020 with MIT License | 5 votes |
|
function TalkAbout() {
console.log(String(team.teamData[0].items[0].image));
return (
<>
<div className="section text-center">
<Container>
{
team.teamData.map((section) => {
console.log(section);
return(
<div>
<h1 className="title heading-main">{section.heading}</h1>
<div>
<Row>
{section.items.map((teamMember)=>{
console.log(teamMember);
return(
<Col lg="3 ml-auto mr-auto" sm="6">
<Card className="card-profile card-plain card-auv">
<CardBody>
<a href="#pablo" onClick={(e) => e.preventDefault()}>
<div className="author">
<img
alt="..."
src={require("assets/img/"+ teamMember.image)}
className="image-prof"
/>
<></>
<CardTitle tag="h4" className="auv-description-primary pt-3">
{teamMember.name}
</CardTitle>
<h6 className="auv-description-primary"> {teamMember.subheading}</h6>
</div>
</a>
</CardBody>
<CardFooter className="text-center margin-neg">
<Button
className="btn-just-icon btn-neutral"
color="link"
href="#pablo"
onClick={(e) => e.preventDefault()}
>
<i className="fa fa-facebook flip"/>
</Button>
<Button
className="btn-just-icon btn-neutral ml-1"
color="link"
href="#pablo"
onClick={(e) => e.preventDefault()}
>
<i className="fa fa-linkedin flip"/>
</Button>
</CardFooter>
</Card>
</Col>
)
})}
</Row>
</div>
</div>
)
})
}
</Container>
</div>
</>
);
}
Example #12
| Source File: Badges.js From id.co.moonlay-eworkplace-admin-web with MIT License | 5 votes |
|
render() {
return (
<div className="animated fadeIn">
<Row>
<Col xs="12" md="6">
<Card>
<CardHeader>
<i className="fa fa-align-justify"></i><strong>Badges</strong>
<div className="card-header-actions">
<a href="https://reactstrap.github.io/components/badge/" rel="noreferrer noopener" target="_blank" className="card-header-action">
<small className="text-muted">docs</small>
</a>
</div>
</CardHeader>
<CardBody>
<h1>Heading <Badge color="secondary">New</Badge></h1>
<h2>Heading <Badge color="secondary">New</Badge></h2>
<h3>Heading <Badge color="secondary">New</Badge></h3>
<h4>Heading <Badge color="secondary">New</Badge></h4>
<h5>Heading <Badge color="secondary">New</Badge></h5>
<h6>Heading <Badge color="secondary">New</Badge></h6>
</CardBody>
<CardFooter>
<Button color="primary" outline>
Notifications <Badge color="secondary" pill style={{ position: 'static' }}>9</Badge>
</Button>
</CardFooter>
</Card>
</Col>
<Col xs="12" md="6">
<Card>
<CardHeader>
<i className="fa fa-align-justify"></i><strong>Badges</strong> <small>contextual variations</small>
</CardHeader>
<CardBody>
<Badge className="mr-1" color="primary">Primary</Badge>
<Badge className="mr-1" color="secondary">Secondary</Badge>
<Badge className="mr-1" color="success">Success</Badge>
<Badge className="mr-1" color="danger">Danger</Badge>
<Badge className="mr-1" color="warning">Warning</Badge>
<Badge className="mr-1" color="info">Info</Badge>
<Badge className="mr-1" color="light">Light</Badge>
<Badge className="mr-1" color="dark">Dark</Badge>
</CardBody>
</Card>
<Card>
<CardHeader>
<i className="fa fa-align-justify"></i><strong>Badges</strong> <small>pill badges</small>
</CardHeader>
<CardBody>
<Badge className="mr-1" color="primary" pill>Primary</Badge>
<Badge className="mr-1" color="secondary" pill>Secondary</Badge>
<Badge className="mr-1" color="success" pill>Success</Badge>
<Badge className="mr-1" color="danger" pill>Danger</Badge>
<Badge className="mr-1" color="warning" pill>Warning</Badge>
<Badge className="mr-1" color="info" pill>Info</Badge>
<Badge className="mr-1" color="light" pill>Light</Badge>
<Badge className="mr-1" color="dark" pill>Dark</Badge>
</CardBody>
</Card>
<Card>
<CardHeader>
<i className="fa fa-align-justify"></i><strong>Badges</strong> <small>links</small>
</CardHeader>
<CardBody>
<Badge className="mr-1" href="#" color="primary">Primary</Badge>
<Badge className="mr-1" href="#" color="secondary">Secondary</Badge>
<Badge className="mr-1" href="#" color="success">Success</Badge>
<Badge className="mr-1" href="#" color="danger">Danger</Badge>
<Badge className="mr-1" href="#" color="warning">Warning</Badge>
<Badge className="mr-1" href="#" color="info">Info</Badge>
<Badge className="mr-1" href="#" color="light">Light</Badge>
<Badge className="mr-1" href="#" color="dark" pill>Dark</Badge>
</CardBody>
</Card>
</Col>
</Row>
</div>
);
}
Example #13
| Source File: RequestsContainer.js From covidsos with MIT License | 4 votes |
|
getPopup(isAuthorisedUser) {
const {isPopupOpen, popupRequest, popupRequestDetails, isVolunteerListLoading, assignVolunteer, volunteerList, assignData} = this.state;
const {name, location, why, requestStr, source, helpText} = popupRequestDetails;
return (<Popup open={isPopupOpen} closeOnEscape closeOnDocumentClick
position="right center"
contentStyle={{
borderRadius: "0.375rem",
minWidth: "50%",
width: "unset",
padding: "0px"
}}
overlayStyle={{background: "rgba(0, 0, 0, 0.85)"}}
className="col-md-6"
onClose={() => this.setState(
{isPopupOpen: false, assignVolunteer: false, assignData: {}})}>
{
close => (
<div className="request-details-popup pre-scrollable-full-height-popup">
<CardHeader>
<Row className="justify-content-end">
<Button onClick={close}
className="close btn-icon btn-link border-0 text-dark">
<i className="fas fa-times" style={{fontSize: '1rem'}}/>
</Button>
</Row>
<div hidden={popupRequestDetails.accept_success}>
<Row className="justify-content-start">
<Col>
<img alt='logo' src={require("assets/img/icons/requestAccept.png")}/>
</Col>
</Row>
<Row className="justify-content-start mt-2">
<Col className="h2">{name} nearby needs help!</Col>
</Row>
<Row className="justify-content-start">
<Col>
<div className="col-1 d-inline-block"
style={{height: "100%", verticalAlign: "top"}}>
<span className="h2 text-red">ⓘ </span>
</div>
<div className="col-10 d-inline-block">
<span>
{popupRequest.urgent === "yes" ? 'This is an urgent request.'
: 'This request needs to be completed in 1-2 days.'}
</span>
<br/>
<span>
{popupRequest.financial_assistance === 1
? 'This help seeker cannot afford to pay.'
: 'This help seeker can afford to pay.'}
</span>
</div>
</Col>
</Row>
</div>
</CardHeader>
<CardBody hidden={popupRequestDetails.accept_success}>
{displayRequestCardDetails('Address', location)}
{displayRequestCardDetails('Received via', source)}
{displayRequestCardDetails('Reason', why)}
{displayRequestCardDetails('Help Required', requestStr)}
{isAuthorisedUser && popupRequest.requestor_mob_number
&& displayRequestCardDetails('Requestor Mob', <a
href={'tel:'
+ popupRequest.requestor_mob_number}>{popupRequest.requestor_mob_number}</a>)}
{isAuthorisedUser && popupRequest.volunteer_name && displayRequestCardDetails(
'Volunteer Name',
popupRequest.volunteer_name)}
{isAuthorisedUser && popupRequest.volunteer_mob_number
&& displayRequestCardDetails('Volunteer Mob', <a
href={'tel:'
+ popupRequest.volunteer_mob_number}>{popupRequest.volunteer_mob_number}</a>)}
{isAuthorisedUser && popupRequest.assignment_time && displayRequestCardDetails(
'Time of request assignment', <Badge
color="warning">{popupRequest.assignment_time}</Badge>)}
{
popupRequest.type === 'pending' && !isAuthorisedUser &&
<>
<Form role="form" onSubmit={this.acceptRequest}>
<div
className="custom-control custom-control-alternative custom-radio d-flex mb-3">
<div>
<input
className="custom-control-input"
id="IWillHelp"
type="radio"
value="yes"
name="i_will_help"
onClick={e => {
this.setState({
popupRequest: {
...popupRequest,
accept: e.target.value === 'yes'
}
});
}}/>
<label className="custom-control-label" htmlFor="IWillHelp">
<span>I will try my best to help this person</span>
</label>
</div>
</div>
<Col className="text-center">
<WhatsappShareButton
url={popupRequest.accept_link}
title={helpText}
style={{
border: "#2dce89 1px solid",
borderRadius: "0.375rem",
padding: "0.625rem 1.25rem",
color: "#2dce89"
}}
className="btn btn-outline-success"
>
<i className="fab fa-whatsapp"/> Share
</WhatsappShareButton>
<Button color="primary" type="submit"
disabled={!popupRequest.accept}>I will help</Button>
</Col>
</Form>
</>
}
{
assignVolunteer && isVolunteerListLoading &&
<Col className="text-center h3">
Loading
</Col>
}
{
assignVolunteer && !isVolunteerListLoading &&
<Form role="form" onSubmit={this.assignVolunteerSubmit}>
{getVolunteerOptionsFormByDistance(volunteerList, popupRequest.latitude,
popupRequest.longitude, assignData.volunteer_id,
(e) => this.updateAssignVolunteerId(e.target.value))}
<div className="text-center">
<Button className="mt-4" color="primary" type="submit"
disabled={this.isAssignSubmitDisabled()}>
Assign
</Button>
</div>
</Form>
}
</CardBody>
<CardBody hidden={!popupRequestDetails.accept_success} className="text-center">
<img className="accept-confirm-img" alt='confirm'
src={require("assets/img/brand/accept_confirm.png")}/>
<Button color="outline-primary" className="btn mt-4"
onClick={() => this.props.history.push("/taskboard")}>
Continue to #CovidHERO Dashboard
</Button>
</CardBody>
<CardFooter hidden={popupRequestDetails.accept_success}>
<Row>
<Col xs={6} md={3} className="mb-4">
{getShareButtons(popupRequest.accept_link, helpText)}
</Col>
{isAuthorisedUser && this.getAuthorisedUserButtons(popupRequest, assignVolunteer)}
</Row>
</CardFooter>
</div>
)}
</Popup>
);
}
Example #14
| Source File: About.js From covidsos with MIT License | 4 votes |
|
renderProfileCard(id, profile) {
const {aboutHidden, aboutExpanded} = this.state;
let thisAboutHidden = aboutHidden[id] === undefined ? true : aboutHidden[id];
let thisAboutExpanded = aboutExpanded[id] === undefined ? false : aboutExpanded[id];
return (
// <Col lg={4} md={4} className="mb-5 mb-xl-0">
<Col className="order-xl-2 mb-5 mb-xl-0" xl="4">
<Card className="card-profile shadow full-height-card">
<CardHeader className="text-center mb-7">
<Row className="justify-content-end">
<Button hidden={!profile.bio}
onClick={e => {
e.preventDefault();
aboutHidden[id] = !thisAboutHidden;
aboutExpanded[id] = false;
this.setState({aboutHidden, aboutExpanded});
}}
className="btn-link border-0 card-profile-info"
>
<>ⓘ</>
</Button>
</Row>
<Row className="justify-content-center">
<Col className="m-auto">
<div className="card-profile-image">
<img alt={profile.name} className="rounded-circle" src={profile.imageSrc || require("assets/img/team/default.jpg")}/>
</div>
</Col>
</Row>
</CardHeader>
<CardBody>
<div className="text-center">
<h3 className="text-capitalize">{profile.name}</h3>
<div className="h5 mt-4 text-purple">{profile.position}</div>
<div className="h5 mt-4" style={{height: '1rem', maxHeight: '1rem'}}>{profile.about}</div>
</div>
</CardBody>
<CardFooter className="border-0">
<Nav pills className="justify-content-center">
{
profile.linkedin ?
<NavItem className="pl-2 pr-2">
<a
className="team-profile-link"
href={profile.linkedin}
target="_blank" rel="noopener noreferrer">
<img alt={profile.name} src={require("assets/img/icons/linkedin.svg")}/>
</a>
</NavItem>
: null
}
{
profile.twitter ?
<NavItem className="pl-2 pr-2">
<a
className="team-profile-link"
href={profile.twitter}
target="_blank" rel="noopener noreferrer">
<img alt={profile.name} src={require("assets/img/icons/twitter.svg")}/>
</a>
</NavItem>
: null
}
</Nav>
</CardFooter>
<CardBody style={{height: 'inherit'}} className="p-0">
<p hidden={thisAboutHidden} className="text-justify m-4">
{thisAboutExpanded || (profile.bio.length && profile.bio.length < 120) ? profile.bio :
(<>
{profile.bio.props ? this.sanitizeString(profile.bio.props.children[0].toString().substring(0, 120))
: this.sanitizeString(profile.bio.substring(0, 120))}
<Button onClick={e => {
e.preventDefault();
aboutExpanded[id] = true;
this.setState({aboutExpanded});
}} className="btn-link border-0 px-2">...</Button>
</>)}
</p>
</CardBody>
</Card>
</Col>
);
}
Example #15
| Source File: Dashboard.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" lg="3">
<Card className="text-white bg-info">
<CardBody className="pb-0">
<ButtonGroup className="float-right">
<ButtonDropdown id='card1' isOpen={this.state.card1} toggle={() => { this.setState({ card1: !this.state.card1 }); }}>
<DropdownToggle caret className="p-0" color="transparent">
<i className="icon-settings"></i>
</DropdownToggle>
<DropdownMenu right>
<DropdownItem>Action</DropdownItem>
<DropdownItem>Another action</DropdownItem>
<DropdownItem disabled>Disabled action</DropdownItem>
<DropdownItem>Something else here</DropdownItem>
</DropdownMenu>
</ButtonDropdown>
</ButtonGroup>
<div className="text-value">9.823</div>
<div>Members online</div>
</CardBody>
<div className="chart-wrapper mx-3" style={{ height: '70px' }}>
<Line data={cardChartData2} options={cardChartOpts2} height={70} />
</div>
</Card>
</Col>
<Col xs="12" sm="6" lg="3">
<Card className="text-white bg-primary">
<CardBody className="pb-0">
<ButtonGroup className="float-right">
<Dropdown id='card2' isOpen={this.state.card2} toggle={() => { this.setState({ card2: !this.state.card2 }); }}>
<DropdownToggle className="p-0" color="transparent">
<i className="icon-location-pin"></i>
</DropdownToggle>
<DropdownMenu right>
<DropdownItem>Action</DropdownItem>
<DropdownItem>Another action</DropdownItem>
<DropdownItem>Something else here</DropdownItem>
</DropdownMenu>
</Dropdown>
</ButtonGroup>
<div className="text-value">9.823</div>
<div>Members online</div>
</CardBody>
<div className="chart-wrapper mx-3" style={{ height: '70px' }}>
<Line data={cardChartData1} options={cardChartOpts1} height={70} />
</div>
</Card>
</Col>
<Col xs="12" sm="6" lg="3">
<Card className="text-white bg-warning">
<CardBody className="pb-0">
<ButtonGroup className="float-right">
<Dropdown id='card3' isOpen={this.state.card3} toggle={() => { this.setState({ card3: !this.state.card3 }); }}>
<DropdownToggle caret className="p-0" color="transparent">
<i className="icon-settings"></i>
</DropdownToggle>
<DropdownMenu right>
<DropdownItem>Action</DropdownItem>
<DropdownItem>Another action</DropdownItem>
<DropdownItem>Something else here</DropdownItem>
</DropdownMenu>
</Dropdown>
</ButtonGroup>
<div className="text-value">9.823</div>
<div>Members online</div>
</CardBody>
<div className="chart-wrapper" style={{ height: '70px' }}>
<Line data={cardChartData3} options={cardChartOpts3} height={70} />
</div>
</Card>
</Col>
<Col xs="12" sm="6" lg="3">
<Card className="text-white bg-danger">
<CardBody className="pb-0">
<ButtonGroup className="float-right">
<ButtonDropdown id='card4' isOpen={this.state.card4} toggle={() => { this.setState({ card4: !this.state.card4 }); }}>
<DropdownToggle caret className="p-0" color="transparent">
<i className="icon-settings"></i>
</DropdownToggle>
<DropdownMenu right>
<DropdownItem>Action</DropdownItem>
<DropdownItem>Another action</DropdownItem>
<DropdownItem>Something else here</DropdownItem>
</DropdownMenu>
</ButtonDropdown>
</ButtonGroup>
<div className="text-value">9.823</div>
<div>Members online</div>
</CardBody>
<div className="chart-wrapper mx-3" style={{ height: '70px' }}>
<Bar data={cardChartData4} options={cardChartOpts4} height={70} />
</div>
</Card>
</Col>
</Row>
<Row>
<Col>
<Card>
<CardBody>
<Row>
<Col sm="5">
<CardTitle className="mb-0">Traffic</CardTitle>
<div className="small text-muted">November 2015</div>
</Col>
<Col sm="7" className="d-none d-sm-inline-block">
<Button color="primary" className="float-right"><i className="icon-cloud-download"></i></Button>
<ButtonToolbar className="float-right" aria-label="Toolbar with button groups">
<ButtonGroup className="mr-3" aria-label="First group">
<Button color="outline-secondary" onClick={() => this.onRadioBtnClick(1)} active={this.state.radioSelected === 1}>Day</Button>
<Button color="outline-secondary" onClick={() => this.onRadioBtnClick(2)} active={this.state.radioSelected === 2}>Month</Button>
<Button color="outline-secondary" onClick={() => this.onRadioBtnClick(3)} active={this.state.radioSelected === 3}>Year</Button>
</ButtonGroup>
</ButtonToolbar>
</Col>
</Row>
<div className="chart-wrapper" style={{ height: 300 + 'px', marginTop: 40 + 'px' }}>
<Line data={mainChart} options={mainChartOpts} height={300} />
</div>
</CardBody>
<CardFooter>
<Row className="text-center">
<Col sm={12} md className="mb-sm-2 mb-0">
<div className="text-muted">Visits</div>
<strong>29.703 Users (40%)</strong>
<Progress className="progress-xs mt-2" color="success" value="40" />
</Col>
<Col sm={12} md className="mb-sm-2 mb-0 d-md-down-none">
<div className="text-muted">Unique</div>
<strong>24.093 Users (20%)</strong>
<Progress className="progress-xs mt-2" color="info" value="20" />
</Col>
<Col sm={12} md className="mb-sm-2 mb-0">
<div className="text-muted">Pageviews</div>
<strong>78.706 Views (60%)</strong>
<Progress className="progress-xs mt-2" color="warning" value="60" />
</Col>
<Col sm={12} md className="mb-sm-2 mb-0">
<div className="text-muted">New Users</div>
<strong>22.123 Users (80%)</strong>
<Progress className="progress-xs mt-2" color="danger" value="80" />
</Col>
<Col sm={12} md className="mb-sm-2 mb-0 d-md-down-none">
<div className="text-muted">Bounce Rate</div>
<strong>Average Rate (40.15%)</strong>
<Progress className="progress-xs mt-2" color="primary" value="40" />
</Col>
</Row>
</CardFooter>
</Card>
</Col>
</Row>
<Row>
<Col xs="6" sm="6" lg="3">
<Suspense fallback={this.loading()}>
<Widget03 dataBox={() => ({ variant: 'facebook', friends: '89k', feeds: '459' })} >
<div className="chart-wrapper">
<Line data={makeSocialBoxData(0)} options={socialChartOpts} height={90} />
</div>
</Widget03>
</Suspense>
</Col>
<Col xs="6" sm="6" lg="3">
<Suspense fallback={this.loading()}>
<Widget03 dataBox={() => ({ variant: 'twitter', followers: '973k', tweets: '1.792' })} >
<div className="chart-wrapper">
<Line data={makeSocialBoxData(1)} options={socialChartOpts} height={90} />
</div>
</Widget03>
</Suspense>
</Col>
<Col xs="6" sm="6" lg="3">
<Suspense fallback={this.loading()}>
<Widget03 dataBox={() => ({ variant: 'linkedin', contacts: '500+', feeds: '292' })} >
<div className="chart-wrapper">
<Line data={makeSocialBoxData(2)} options={socialChartOpts} height={90} />
</div>
</Widget03>
</Suspense>
</Col>
<Col xs="6" sm="6" lg="3">
<Suspense fallback={this.loading()}>
<Widget03 dataBox={() => ({ variant: 'google-plus', followers: '894', circles: '92' })} >
<div className="chart-wrapper">
<Line data={makeSocialBoxData(3)} options={socialChartOpts} height={90} />
</div>
</Widget03>
</Suspense>
</Col>
</Row>
<Row>
<Col>
<Card>
<CardHeader>
Traffic {' & '} Sales
</CardHeader>
<CardBody>
<Row>
<Col xs="12" md="6" xl="6">
<Row>
<Col sm="6">
<div className="callout callout-info">
<small className="text-muted">New Clients</small>
<br />
<strong className="h4">9,123</strong>
<div className="chart-wrapper">
<Line data={makeSparkLineData(0, brandPrimary)} options={sparklineChartOpts} width={100} height={30} />
</div>
</div>
</Col>
<Col sm="6">
<div className="callout callout-danger">
<small className="text-muted">Recurring Clients</small>
<br />
<strong className="h4">22,643</strong>
<div className="chart-wrapper">
<Line data={makeSparkLineData(1, brandDanger)} options={sparklineChartOpts} width={100} height={30} />
</div>
</div>
</Col>
</Row>
<hr className="mt-0" />
<div className="progress-group mb-4">
<div className="progress-group-prepend">
<span className="progress-group-text">
Monday
</span>
</div>
<div className="progress-group-bars">
<Progress className="progress-xs" color="info" value="34" />
<Progress className="progress-xs" color="danger" value="78" />
</div>
</div>
<div className="progress-group mb-4">
<div className="progress-group-prepend">
<span className="progress-group-text">
Tuesday
</span>
</div>
<div className="progress-group-bars">
<Progress className="progress-xs" color="info" value="56" />
<Progress className="progress-xs" color="danger" value="94" />
</div>
</div>
<div className="progress-group mb-4">
<div className="progress-group-prepend">
<span className="progress-group-text">
Wednesday
</span>
</div>
<div className="progress-group-bars">
<Progress className="progress-xs" color="info" value="12" />
<Progress className="progress-xs" color="danger" value="67" />
</div>
</div>
<div className="progress-group mb-4">
<div className="progress-group-prepend">
<span className="progress-group-text">
Thursday
</span>
</div>
<div className="progress-group-bars">
<Progress className="progress-xs" color="info" value="43" />
<Progress className="progress-xs" color="danger" value="91" />
</div>
</div>
<div className="progress-group mb-4">
<div className="progress-group-prepend">
<span className="progress-group-text">
Friday
</span>
</div>
<div className="progress-group-bars">
<Progress className="progress-xs" color="info" value="22" />
<Progress className="progress-xs" color="danger" value="73" />
</div>
</div>
<div className="progress-group mb-4">
<div className="progress-group-prepend">
<span className="progress-group-text">
Saturday
</span>
</div>
<div className="progress-group-bars">
<Progress className="progress-xs" color="info" value="53" />
<Progress className="progress-xs" color="danger" value="82" />
</div>
</div>
<div className="progress-group mb-4">
<div className="progress-group-prepend">
<span className="progress-group-text">
Sunday
</span>
</div>
<div className="progress-group-bars">
<Progress className="progress-xs" color="info" value="9" />
<Progress className="progress-xs" color="danger" value="69" />
</div>
</div>
<div className="legend text-center">
<small>
<sup className="px-1"><Badge pill color="info"> </Badge></sup>
New clients
<sup className="px-1"><Badge pill color="danger"> </Badge></sup>
Recurring clients
</small>
</div>
</Col>
<Col xs="12" md="6" xl="6">
<Row>
<Col sm="6">
<div className="callout callout-warning">
<small className="text-muted">Pageviews</small>
<br />
<strong className="h4">78,623</strong>
<div className="chart-wrapper">
<Line data={makeSparkLineData(2, brandWarning)} options={sparklineChartOpts} width={100} height={30} />
</div>
</div>
</Col>
<Col sm="6">
<div className="callout callout-success">
<small className="text-muted">Organic</small>
<br />
<strong className="h4">49,123</strong>
<div className="chart-wrapper">
<Line data={makeSparkLineData(3, brandSuccess)} options={sparklineChartOpts} width={100} height={30} />
</div>
</div>
</Col>
</Row>
<hr className="mt-0" />
<ul>
<div className="progress-group">
<div className="progress-group-header">
<i className="icon-user progress-group-icon"></i>
<span className="title">Male</span>
<span className="ml-auto font-weight-bold">43%</span>
</div>
<div className="progress-group-bars">
<Progress className="progress-xs" color="warning" value="43" />
</div>
</div>
<div className="progress-group mb-5">
<div className="progress-group-header">
<i className="icon-user-female progress-group-icon"></i>
<span className="title">Female</span>
<span className="ml-auto font-weight-bold">37%</span>
</div>
<div className="progress-group-bars">
<Progress className="progress-xs" color="warning" value="37" />
</div>
</div>
<div className="progress-group">
<div className="progress-group-header">
<i className="icon-globe progress-group-icon"></i>
<span className="title">Organic Search</span>
<span className="ml-auto font-weight-bold">191,235 <span className="text-muted small">(56%)</span></span>
</div>
<div className="progress-group-bars">
<Progress className="progress-xs" color="success" value="56" />
</div>
</div>
<div className="progress-group">
<div className="progress-group-header">
<i className="icon-social-facebook progress-group-icon"></i>
<span className="title">Facebook</span>
<span className="ml-auto font-weight-bold">51,223 <span className="text-muted small">(15%)</span></span>
</div>
<div className="progress-group-bars">
<Progress className="progress-xs" color="success" value="15" />
</div>
</div>
<div className="progress-group">
<div className="progress-group-header">
<i className="icon-social-twitter progress-group-icon"></i>
<span className="title">Twitter</span>
<span className="ml-auto font-weight-bold">37,564 <span className="text-muted small">(11%)</span></span>
</div>
<div className="progress-group-bars">
<Progress className="progress-xs" color="success" value="11" />
</div>
</div>
<div className="progress-group">
<div className="progress-group-header">
<i className="icon-social-linkedin progress-group-icon"></i>
<span className="title">LinkedIn</span>
<span className="ml-auto font-weight-bold">27,319 <span className="text-muted small">(8%)</span></span>
</div>
<div className="progress-group-bars">
<Progress className="progress-xs" color="success" value="8" />
</div>
</div>
<div className="divider text-center">
<Button color="link" size="sm" className="text-muted" data-toggle="tooltip" data-placement="top"
title="" data-original-title="show more"><i className="icon-options"></i></Button>
</div>
</ul>
</Col>
</Row>
<br />
<Table hover responsive className="table-outline mb-0 d-none d-sm-table">
<thead className="thead-light">
<tr>
<th className="text-center"><i className="icon-people"></i></th>
<th>User</th>
<th className="text-center">Country</th>
<th>Usage</th>
<th className="text-center">Payment Method</th>
<th>Activity</th>
</tr>
</thead>
<tbody>
<tr>
<td className="text-center">
<div className="avatar">
<img src={'assets/img/avatars/1.jpg'} className="img-avatar" alt="[email protected]" />
<span className="avatar-status badge-success"></span>
</div>
</td>
<td>
<div>Yiorgos Avraamu</div>
<div className="small text-muted">
<span>New</span> | Registered: Jan 1, 2015
</div>
</td>
<td className="text-center">
<i className="flag-icon flag-icon-us h4 mb-0" title="us" id="us"></i>
</td>
<td>
<div className="clearfix">
<div className="float-left">
<strong>50%</strong>
</div>
<div className="float-right">
<small className="text-muted">Jun 11, 2015 - Jul 10, 2015</small>
</div>
</div>
<Progress className="progress-xs" color="success" value="50" />
</td>
<td className="text-center">
<i className="fa fa-cc-mastercard" style={{ fontSize: 24 + 'px' }}></i>
</td>
<td>
<div className="small text-muted">Last login</div>
<strong>10 sec ago</strong>
</td>
</tr>
<tr>
<td className="text-center">
<div className="avatar">
<img src={'assets/img/avatars/2.jpg'} className="img-avatar" alt="[email protected]" />
<span className="avatar-status badge-danger"></span>
</div>
</td>
<td>
<div>Avram Tarasios</div>
<div className="small text-muted">
<span>Recurring</span> | Registered: Jan 1, 2015
</div>
</td>
<td className="text-center">
<i className="flag-icon flag-icon-br h4 mb-0" title="br" id="br"></i>
</td>
<td>
<div className="clearfix">
<div className="float-left">
<strong>10%</strong>
</div>
<div className="float-right">
<small className="text-muted">Jun 11, 2015 - Jul 10, 2015</small>
</div>
</div>
<Progress className="progress-xs" color="info" value="10" />
</td>
<td className="text-center">
<i className="fa fa-cc-visa" style={{ fontSize: 24 + 'px' }}></i>
</td>
<td>
<div className="small text-muted">Last login</div>
<strong>5 minutes ago</strong>
</td>
</tr>
<tr>
<td className="text-center">
<div className="avatar">
<img src={'assets/img/avatars/3.jpg'} className="img-avatar" alt="[email protected]" />
<span className="avatar-status badge-warning"></span>
</div>
</td>
<td>
<div>Quintin Ed</div>
<div className="small text-muted">
<span>New</span> | Registered: Jan 1, 2015
</div>
</td>
<td className="text-center">
<i className="flag-icon flag-icon-in h4 mb-0" title="in" id="in"></i>
</td>
<td>
<div className="clearfix">
<div className="float-left">
<strong>74%</strong>
</div>
<div className="float-right">
<small className="text-muted">Jun 11, 2015 - Jul 10, 2015</small>
</div>
</div>
<Progress className="progress-xs" color="warning" value="74" />
</td>
<td className="text-center">
<i className="fa fa-cc-stripe" style={{ fontSize: 24 + 'px' }}></i>
</td>
<td>
<div className="small text-muted">Last login</div>
<strong>1 hour ago</strong>
</td>
</tr>
<tr>
<td className="text-center">
<div className="avatar">
<img src={'assets/img/avatars/4.jpg'} className="img-avatar" alt="[email protected]" />
<span className="avatar-status badge-secondary"></span>
</div>
</td>
<td>
<div>Enéas Kwadwo</div>
<div className="small text-muted">
<span>New</span> | Registered: Jan 1, 2015
</div>
</td>
<td className="text-center">
<i className="flag-icon flag-icon-fr h4 mb-0" title="fr" id="fr"></i>
</td>
<td>
<div className="clearfix">
<div className="float-left">
<strong>98%</strong>
</div>
<div className="float-right">
<small className="text-muted">Jun 11, 2015 - Jul 10, 2015</small>
</div>
</div>
<Progress className="progress-xs" color="danger" value="98" />
</td>
<td className="text-center">
<i className="fa fa-paypal" style={{ fontSize: 24 + 'px' }}></i>
</td>
<td>
<div className="small text-muted">Last login</div>
<strong>Last month</strong>
</td>
</tr>
<tr>
<td className="text-center">
<div className="avatar">
<img src={'assets/img/avatars/5.jpg'} className="img-avatar" alt="[email protected]" />
<span className="avatar-status badge-success"></span>
</div>
</td>
<td>
<div>Agapetus Tadeáš</div>
<div className="small text-muted">
<span>New</span> | Registered: Jan 1, 2015
</div>
</td>
<td className="text-center">
<i className="flag-icon flag-icon-es h4 mb-0" title="es" id="es"></i>
</td>
<td>
<div className="clearfix">
<div className="float-left">
<strong>22%</strong>
</div>
<div className="float-right">
<small className="text-muted">Jun 11, 2015 - Jul 10, 2015</small>
</div>
</div>
<Progress className="progress-xs" color="info" value="22" />
</td>
<td className="text-center">
<i className="fa fa-google-wallet" style={{ fontSize: 24 + 'px' }}></i>
</td>
<td>
<div className="small text-muted">Last login</div>
<strong>Last week</strong>
</td>
</tr>
<tr>
<td className="text-center">
<div className="avatar">
<img src={'assets/img/avatars/6.jpg'} className="img-avatar" alt="[email protected]" />
<span className="avatar-status badge-danger"></span>
</div>
</td>
<td>
<div>Friderik Dávid</div>
<div className="small text-muted">
<span>New</span> | Registered: Jan 1, 2015
</div>
</td>
<td className="text-center">
<i className="flag-icon flag-icon-pl h4 mb-0" title="pl" id="pl"></i>
</td>
<td>
<div className="clearfix">
<div className="float-left">
<strong>43%</strong>
</div>
<div className="float-right">
<small className="text-muted">Jun 11, 2015 - Jul 10, 2015</small>
</div>
</div>
<Progress className="progress-xs" color="success" value="43" />
</td>
<td className="text-center">
<i className="fa fa-cc-amex" style={{ fontSize: 24 + 'px' }}></i>
</td>
<td>
<div className="small text-muted">Last login</div>
<strong>Yesterday</strong>
</td>
</tr>
</tbody>
</Table>
</CardBody>
</Card>
</Col>
</Row>
</div>
);
}
Example #16
| 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 #17
| Source File: EditAccount.js From id.co.moonlay-eworkplace-admin-web with MIT License | 4 votes |
|
render(){
var token = localStorage.getItem('token');
var RoleId = localStorage.getItem('RoleId')
if (token === null || token === undefined ||RoleId === null || RoleId === undefined) {
this.props.history.push('/login');
}
return (
<div className="app flex-row align-items-center">
<Container>
<Row className="justify-content-center">
<Col md="9" lg="7" xl="6">
<Card className="mx-4">
<CardBody className="p-4">
<Form>
<h1>Register</h1>
<p className="text-muted">Create an employee account</p>
<p>Step {this.state.step} of 2</p>
<div style={{display: this.state.step === 1 ? 'block' : 'none'}}>
<InputGroup className="mb-3">
<InputGroupAddon addonType="prepend">
<InputGroupText>
<i className="icon-user"></i>
</InputGroupText>
</InputGroupAddon>
<Input type="text" value={this.state.firstname} onChange={this.onChangeFirtsname} placeholder="First Name" autoComplete="firstname" />
</InputGroup>
<InputGroup className="mb-3">
<InputGroupAddon addonType="prepend">
<InputGroupText>
<i className="icon-user"></i>
</InputGroupText>
</InputGroupAddon>
<Input type="text" value={this.state.lastname} onChange={this.onChangeLastname} placeholder="Last Name" autoComplete="lastname" />
</InputGroup>
<InputGroup className="mb-3">
<InputGroupAddon addonType="prepend">
<InputGroupText>
<i className="icon-user"></i>
</InputGroupText>
</InputGroupAddon>
<Input type="text" onChange={this.onChangeUsername} value={this.state.username} placeholder="Username" autoComplete="username" />
</InputGroup>
<InputGroup className="mb-3">
<InputGroupAddon addonType="prepend">
<InputGroupText>@</InputGroupText>
</InputGroupAddon>
<Input type="text" value={this.state.email} onChange={this.onChangeEmail} placeholder="Email" autoComplete="email" />
</InputGroup>
<InputGroup className="mb-3">
<InputGroupAddon addonType="prepend">
<InputGroupText>
<i className="icon-lock"></i>
</InputGroupText>
</InputGroupAddon>
<Input type="password" value={this.state.password} onChange={this.onchagePassword} placeholder="Password" autoComplete="new-password" />
</InputGroup>
{/* <InputGroup className="mb-4">
<InputGroupAddon addonType="prepend">
<InputGroupText>
<i className="icon-lock"></i>
</InputGroupText>
</InputGroupAddon>
<Input type="password" placeholder="Repeat password" autoComplete="new-password" />
</InputGroup> */}
<Button onClick={this.onhandleNext} color="primary">Next</Button>
</div>
<div style={{display: this.state.step === 2 ? 'block' : 'none'}}>
<InputGroup className="mb-3">
<InputGroupAddon addonType="prepend">
<InputGroupText>
Role
</InputGroupText>
</InputGroupAddon>
<Input type="select" value={this.state.role} onChange={this.onChangeRole}>
<option>Select Role..</option>
<option value="Developer">Developer</option>
<option value="Scrum Master">Scrum Master</option>
<option value="Product Owner">Product Owner</option>
<option value="Human Resource">Human Resource</option>
<option value="MOKKI Design Team" >MOKKI Design Team</option>
</Input>
</InputGroup>
<InputGroup className="mb-3">
<InputGroupAddon addonType="prepend">
<InputGroupText>
Status
</InputGroupText>
</InputGroupAddon>
<Input type="select" value={this.state.status} onChange={this.onChangeStatus}>
<option>{this.state.status}</option>
<option value="Internship">Internship</option>
<option value="Full-Time Worker">Full-Time Worker</option>
</Input>
</InputGroup>
<InputGroup className="mb-3">
<InputGroupAddon addonType="prepend">
<InputGroupText>
Birthday
</InputGroupText>
</InputGroupAddon>
<Input type="date" value={this.state.dob} onChange={this.onChangeDob} />
</InputGroup>
<InputGroup className="mb-3">
<InputGroupAddon addonType="prepend">
<InputGroupText>
Gender
</InputGroupText>
</InputGroupAddon>
<Input type="select" value={this.state.gender} onChange={this.onChangeGender}>
<option value>{this.state.gender}</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</Input>
</InputGroup>
<Button onClick={this.onhandlePrevius} color="primary">Previus</Button>
<Button onClick={this.onhandleSubmit} color="success">Create Account</Button>
</div>
</Form>
</CardBody>
<CardFooter className="p-4">
<Button color='danger' block onClick={this.onhandleBack} >Back to Dashboard</Button>
</CardFooter>
</Card>
</Col>
</Row>
</Container>
</div>
);
}
Example #18
| Source File: AddAccount.js From id.co.moonlay-eworkplace-admin-web with MIT License | 4 votes |
|
render(){
var token = localStorage.getItem('token');
var RoleId = localStorage.getItem('RoleId')
if (token === null || token === undefined ||RoleId === null || RoleId === undefined) {
this.props.history.push('/login');
}
let roleList = this.state.listRole.map(function (role) {
return { value: role._id, label: role .name };
})
$(".toggle-password").click(function() {
$(this).toggleClass("fa-eye fa-eye-slash");
var input = $($(this).attr("toggle"));
if (input.attr("type") == "password") {
input.attr("type", "text");
} else {
input.attr("type", "password");
}
});
return (
<div className="app flex-row align-items-center">
<Container>
<Row className="justify-content-center">
<Col md="9" lg="7" xl="6">
<Card className="mx-4">
<CardBody className="p-4">
<Form>
<h1>Add Account</h1>
<p className="text-muted">Create an employee account</p>
<p>Step {this.state.step} of 2</p>
<div style={{display: this.state.step === 1 ? 'block' : 'none'}}>
<InputGroup className="mb-3">
<InputGroupAddon addonType="prepend">
<InputGroupText>
<i className="icon-user"></i>
</InputGroupText>
</InputGroupAddon>
<Input type="text" onChange={this.onChangeFirtsname} placeholder="First Name" autoComplete="firstname" />
</InputGroup>
<InputGroup className="mb-3">
<InputGroupAddon addonType="prepend">
<InputGroupText>
<i className="icon-user"></i>
</InputGroupText>
</InputGroupAddon>
<Input type="text" onChange={this.onChangeLastname} placeholder="Last Name" autoComplete="lastname" />
</InputGroup>
<InputGroup className="mb-3">
<InputGroupAddon addonType="prepend">
<InputGroupText>
<i className="icon-user"></i>
</InputGroupText>
</InputGroupAddon>
<Input type="text" onChange={this.onChangeUsername} placeholder="Username" autoComplete="username" />
</InputGroup>
<InputGroup className="mb-3">
<InputGroupAddon addonType="prepend">
<InputGroupText>@</InputGroupText>
</InputGroupAddon>
<Input type="text" onChange={this.onChangeEmail} placeholder="Email" autoComplete="email" />
</InputGroup>
<InputGroup className="mb-3">
<InputGroupAddon addonType="prepend">
<InputGroupText>
<i className="icon-lock"></i>
</InputGroupText>
</InputGroupAddon>
<Input type={this.state.hidden ? "password" : "text"} onChange={this.onchagePassword} name="password" placeholder="Password" autoComplete="new-password" id="password-field" />
<i className={this.state.hidden ? "fa fa-eye" : "fa fa-eye-slash"} style={{fontSize : 30}} onClick={this.toggleShow}></i>
</InputGroup>
{/* <InputGroup className="mb-4">
<InputGroupAddon addonType="prepend">
<InputGroupText>
<i className="icon-lock"></i>
</InputGroupText>
</InputGroupAddon>
<Input type="password" placeholder="Repeat password" autoComplete="new-password" />
</InputGroup> */}
<Button onClick={this.onhandleNext} color="primary">Next</Button>
</div>
<div style={{display: this.state.step === 2 ? 'block' : 'none'}}>
<Row>
<Col style={{marginRight:'-30px'}} md={3} ><InputGroupText>
Role
</InputGroupText>
</Col>
<Col> <Select
name="form-field-name"
value={this.state.selectedRole}
onChange={this.onChangeRole}
options={roleList} /> <br /></Col>
</Row>
<InputGroup className="mb-3">
<InputGroupAddon addonType="prepend">
<InputGroupText>
Birthday
</InputGroupText>
</InputGroupAddon>
<Input type="date" onChange={this.onChangeDob} />
</InputGroup>
<InputGroup className="mb-3">
<InputGroupAddon addonType="prepend">
<InputGroupText>
Gender
</InputGroupText>
</InputGroupAddon>
<Input type="select" value={this.state.value} onChange={this.onChangeGender}>
<option>Select Gender..</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</Input>
</InputGroup>
<Button onClick={this.onhandlePrevius} color="primary">Previous</Button>
<Button onClick={this.onhandleSubmit} color="success">Create Account</Button>
</div>
</Form>
</CardBody>
<CardFooter className="p-4">
<Button color='danger' block onClick={this.onhandleBack} >Back to Dashboard</Button>
</CardFooter>
</Card>
</Col>
</Row>
</Container>
</div>
);
}
Example #19
| Source File: Forms.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">
<Card>
<CardHeader>
<strong>Credit Card</strong>
<small> Form</small>
</CardHeader>
<CardBody>
<Row>
<Col xs="12">
<FormGroup>
<Label htmlFor="name">Name</Label>
<Input type="text" id="name" placeholder="Enter your name" required />
</FormGroup>
</Col>
</Row>
<Row>
<Col xs="12">
<FormGroup>
<Label htmlFor="ccnumber">Credit Card Number</Label>
<Input type="text" id="ccnumber" placeholder="0000 0000 0000 0000" required />
</FormGroup>
</Col>
</Row>
<Row>
<Col xs="4">
<FormGroup>
<Label htmlFor="ccmonth">Month</Label>
<Input type="select" name="ccmonth" id="ccmonth">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</Input>
</FormGroup>
</Col>
<Col xs="4">
<FormGroup>
<Label htmlFor="ccyear">Year</Label>
<Input type="select" name="ccyear" id="ccyear">
<option>2017</option>
<option>2018</option>
<option>2019</option>
<option>2020</option>
<option>2021</option>
<option>2022</option>
<option>2023</option>
<option>2024</option>
<option>2025</option>
<option>2026</option>
</Input>
</FormGroup>
</Col>
<Col xs="4">
<FormGroup>
<Label htmlFor="cvv">CVV/CVC</Label>
<Input type="text" id="cvv" placeholder="123" required />
</FormGroup>
</Col>
</Row>
</CardBody>
</Card>
</Col>
<Col xs="12" sm="6">
<Card>
<CardHeader>
<strong>Company</strong>
<small> Form</small>
</CardHeader>
<CardBody>
<FormGroup>
<Label htmlFor="company">Company</Label>
<Input type="text" id="company" placeholder="Enter your company name" />
</FormGroup>
<FormGroup>
<Label htmlFor="vat">VAT</Label>
<Input type="text" id="vat" placeholder="DE1234567890" />
</FormGroup>
<FormGroup>
<Label htmlFor="street">Street</Label>
<Input type="text" id="street" placeholder="Enter street name" />
</FormGroup>
<FormGroup row className="my-0">
<Col xs="8">
<FormGroup>
<Label htmlFor="city">City</Label>
<Input type="text" id="city" placeholder="Enter your city" />
</FormGroup>
</Col>
<Col xs="4">
<FormGroup>
<Label htmlFor="postal-code">Postal Code</Label>
<Input type="text" id="postal-code" placeholder="Postal Code" />
</FormGroup>
</Col>
</FormGroup>
<FormGroup>
<Label htmlFor="country">Country</Label>
<Input type="text" id="country" placeholder="Country name" />
</FormGroup>
</CardBody>
</Card>
</Col>
</Row>
<Row>
<Col xs="12" md="6">
<Card>
<CardHeader>
<strong>Basic Form</strong> Elements
</CardHeader>
<CardBody>
<Form action="" method="post" encType="multipart/form-data" className="form-horizontal">
<FormGroup row>
<Col md="3">
<Label>Static</Label>
</Col>
<Col xs="12" md="9">
<p className="form-control-static">Username</p>
</Col>
</FormGroup>
<FormGroup row>
<Col md="3">
<Label htmlFor="text-input">Text Input</Label>
</Col>
<Col xs="12" md="9">
<Input type="text" id="text-input" name="text-input" placeholder="Text" />
<FormText color="muted">This is a help text</FormText>
</Col>
</FormGroup>
<FormGroup row>
<Col md="3">
<Label htmlFor="email-input">Email Input</Label>
</Col>
<Col xs="12" md="9">
<Input type="email" id="email-input" name="email-input" placeholder="Enter Email" autoComplete="email"/>
<FormText className="help-block">Please enter your email</FormText>
</Col>
</FormGroup>
<FormGroup row>
<Col md="3">
<Label htmlFor="password-input">Password</Label>
</Col>
<Col xs="12" md="9">
<Input type="password" id="password-input" name="password-input" placeholder="Password" autoComplete="new-password" />
<FormText className="help-block">Please enter a complex password</FormText>
</Col>
</FormGroup>
<FormGroup row>
<Col md="3">
<Label htmlFor="date-input">Date Input <Badge>NEW</Badge></Label>
</Col>
<Col xs="12" md="9">
<Input type="date" id="date-input" name="date-input" placeholder="date" />
</Col>
</FormGroup>
<FormGroup row>
<Col md="3">
<Label htmlFor="disabled-input">Disabled Input</Label>
</Col>
<Col xs="12" md="9">
<Input type="text" id="disabled-input" name="disabled-input" placeholder="Disabled" disabled />
</Col>
</FormGroup>
<FormGroup row>
<Col md="3">
<Label htmlFor="textarea-input">Textarea</Label>
</Col>
<Col xs="12" md="9">
<Input type="textarea" name="textarea-input" id="textarea-input" rows="9"
placeholder="Content..." />
</Col>
</FormGroup>
<FormGroup row>
<Col md="3">
<Label htmlFor="select">Select</Label>
</Col>
<Col xs="12" md="9">
<Input type="select" name="select" id="select">
<option value="0">Please select</option>
<option value="1">Option #1</option>
<option value="2">Option #2</option>
<option value="3">Option #3</option>
</Input>
</Col>
</FormGroup>
<FormGroup row>
<Col md="3">
<Label htmlFor="selectLg">Select Large</Label>
</Col>
<Col xs="12" md="9" size="lg">
<Input type="select" name="selectLg" id="selectLg" bsSize="lg">
<option value="0">Please select</option>
<option value="1">Option #1</option>
<option value="2">Option #2</option>
<option value="3">Option #3</option>
</Input>
</Col>
</FormGroup>
<FormGroup row>
<Col md="3">
<Label htmlFor="selectSm">Select Small</Label>
</Col>
<Col xs="12" md="9">
<Input type="select" name="selectSm" id="SelectLm" bsSize="sm">
<option value="0">Please select</option>
<option value="1">Option #1</option>
<option value="2">Option #2</option>
<option value="3">Option #3</option>
<option value="4">Option #4</option>
<option value="5">Option #5</option>
</Input>
</Col>
</FormGroup>
<FormGroup row>
<Col md="3">
<Label htmlFor="disabledSelect">Disabled Select</Label>
</Col>
<Col xs="12" md="9">
<Input type="select" name="disabledSelect" id="disabledSelect" disabled autoComplete="name">
<option value="0">Please select</option>
<option value="1">Option #1</option>
<option value="2">Option #2</option>
<option value="3">Option #3</option>
</Input>
</Col>
</FormGroup>
<FormGroup row>
<Col md="3">
<Label htmlFor="multiple-select">Multiple select</Label>
</Col>
<Col md="9">
<Input type="select" name="multiple-select" id="multiple-select" multiple>
<option value="1">Option #1</option>
<option value="2">Option #2</option>
<option value="3">Option #3</option>
<option value="4">Option #4</option>
<option value="5">Option #5</option>
<option value="6">Option #6</option>
<option value="7">Option #7</option>
<option value="8">Option #8</option>
<option value="9">Option #9</option>
<option value="10">Option #10</option>
</Input>
</Col>
</FormGroup>
<FormGroup row>
<Col md="3">
<Label>Radios</Label>
</Col>
<Col md="9">
<FormGroup check className="radio">
<Input className="form-check-input" type="radio" id="radio1" name="radios" value="option1" />
<Label check className="form-check-label" htmlFor="radio1">Option 1</Label>
</FormGroup>
<FormGroup check className="radio">
<Input className="form-check-input" type="radio" id="radio2" name="radios" value="option2" />
<Label check className="form-check-label" htmlFor="radio2">Option 2</Label>
</FormGroup>
<FormGroup check className="radio">
<Input className="form-check-input" type="radio" id="radio3" name="radios" value="option3" />
<Label check className="form-check-label" htmlFor="radio3">Option 3</Label>
</FormGroup>
</Col>
</FormGroup>
<FormGroup row>
<Col md="3">
<Label>Inline Radios</Label>
</Col>
<Col md="9">
<FormGroup check inline>
<Input className="form-check-input" type="radio" id="inline-radio1" name="inline-radios" value="option1" />
<Label className="form-check-label" check htmlFor="inline-radio1">One</Label>
</FormGroup>
<FormGroup check inline>
<Input className="form-check-input" type="radio" id="inline-radio2" name="inline-radios" value="option2" />
<Label className="form-check-label" check htmlFor="inline-radio2">Two</Label>
</FormGroup>
<FormGroup check inline>
<Input className="form-check-input" type="radio" id="inline-radio3" name="inline-radios" value="option3" />
<Label className="form-check-label" check htmlFor="inline-radio3">Three</Label>
</FormGroup>
</Col>
</FormGroup>
<FormGroup row>
<Col md="3"><Label>Checkboxes</Label></Col>
<Col md="9">
<FormGroup check className="checkbox">
<Input className="form-check-input" type="checkbox" id="checkbox1" name="checkbox1" value="option1" />
<Label check className="form-check-label" htmlFor="checkbox1">Option 1</Label>
</FormGroup>
<FormGroup check className="checkbox">
<Input className="form-check-input" type="checkbox" id="checkbox2" name="checkbox2" value="option2" />
<Label check className="form-check-label" htmlFor="checkbox2">Option 2</Label>
</FormGroup>
<FormGroup check className="checkbox">
<Input className="form-check-input" type="checkbox" id="checkbox3" name="checkbox3" value="option3" />
<Label check className="form-check-label" htmlFor="checkbox3">Option 3</Label>
</FormGroup>
</Col>
</FormGroup>
<FormGroup row>
<Col md="3">
<Label>Inline Checkboxes</Label>
</Col>
<Col md="9">
<FormGroup check inline>
<Input className="form-check-input" type="checkbox" id="inline-checkbox1" name="inline-checkbox1" value="option1" />
<Label className="form-check-label" check htmlFor="inline-checkbox1">One</Label>
</FormGroup>
<FormGroup check inline>
<Input className="form-check-input" type="checkbox" id="inline-checkbox2" name="inline-checkbox2" value="option2" />
<Label className="form-check-label" check htmlFor="inline-checkbox2">Two</Label>
</FormGroup>
<FormGroup check inline>
<Input className="form-check-input" type="checkbox" id="inline-checkbox3" name="inline-checkbox3" value="option3" />
<Label className="form-check-label" check htmlFor="inline-checkbox3">Three</Label>
</FormGroup>
</Col>
</FormGroup>
<FormGroup row>
<Col md="3">
<Label htmlFor="file-input">File input</Label>
</Col>
<Col xs="12" md="9">
<Input type="file" id="file-input" name="file-input" />
</Col>
</FormGroup>
<FormGroup row>
<Col md="3">
<Label htmlFor="file-multiple-input">Multiple File input</Label>
</Col>
<Col xs="12" md="9">
<Input type="file" id="file-multiple-input" name="file-multiple-input" multiple />
</Col>
</FormGroup>
<FormGroup row hidden>
<Col md="3">
<Label className="custom-file" htmlFor="custom-file-input">Custom file input</Label>
</Col>
<Col xs="12" md="9">
<Label className="custom-file">
<Input className="custom-file" type="file" id="custom-file-input" name="file-input" />
<span className="custom-file-control"></span>
</Label>
</Col>
</FormGroup>
</Form>
</CardBody>
<CardFooter>
<Button type="submit" size="sm" color="primary"><i className="fa fa-dot-circle-o"></i> Submit</Button>
<Button type="reset" size="sm" color="danger"><i className="fa fa-ban"></i> Reset</Button>
</CardFooter>
</Card>
<Card>
<CardHeader>
<strong>Inline</strong> Form
</CardHeader>
<CardBody>
<Form action="" method="post" inline>
<FormGroup className="pr-1">
<Label htmlFor="exampleInputName2" className="pr-1">Name</Label>
<Input type="text" id="exampleInputName2" placeholder="Jane Doe" required />
</FormGroup>
<FormGroup className="pr-1">
<Label htmlFor="exampleInputEmail2" className="pr-1">Email</Label>
<Input type="email" id="exampleInputEmail2" placeholder="[email protected]" required />
</FormGroup>
</Form>
</CardBody>
<CardFooter>
<Button type="submit" size="sm" color="primary"><i className="fa fa-dot-circle-o"></i> Submit</Button>
<Button type="reset" size="sm" color="danger"><i className="fa fa-ban"></i> Reset</Button>
</CardFooter>
</Card>
</Col>
<Col xs="12" md="6">
<Card>
<CardHeader>
<strong>Horizontal</strong> Form
</CardHeader>
<CardBody>
<Form action="" method="post" className="form-horizontal">
<FormGroup row>
<Col md="3">
<Label htmlFor="hf-email">Email</Label>
</Col>
<Col xs="12" md="9">
<Input type="email" id="hf-email" name="hf-email" placeholder="Enter Email..." autoComplete="email" />
<FormText className="help-block">Please enter your email</FormText>
</Col>
</FormGroup>
<FormGroup row>
<Col md="3">
<Label htmlFor="hf-password">Password</Label>
</Col>
<Col xs="12" md="9">
<Input type="password" id="hf-password" name="hf-password" placeholder="Enter Password..." autoComplete="current-password"/>
<FormText className="help-block">Please enter your password</FormText>
</Col>
</FormGroup>
</Form>
</CardBody>
<CardFooter>
<Button type="submit" size="sm" color="primary"><i className="fa fa-dot-circle-o"></i> Submit</Button>
<Button type="reset" size="sm" color="danger"><i className="fa fa-ban"></i> Reset</Button>
</CardFooter>
</Card>
<Card>
<CardHeader>
<strong>Normal</strong> Form
</CardHeader>
<CardBody>
<Form action="" method="post">
<FormGroup>
<Label htmlFor="nf-email">Email</Label>
<Input type="email" id="nf-email" name="nf-email" placeholder="Enter Email.." autoComplete="email"/>
<FormText className="help-block">Please enter your email</FormText>
</FormGroup>
<FormGroup>
<Label htmlFor="nf-password">Password</Label>
<Input type="password" id="nf-password" name="nf-password" placeholder="Enter Password.." autoComplete="current-password"/>
<FormText className="help-block">Please enter your password</FormText>
</FormGroup>
</Form>
</CardBody>
<CardFooter>
<Button type="submit" size="sm" color="primary"><i className="fa fa-dot-circle-o"></i> Submit</Button>
<Button type="reset" size="sm" color="danger"><i className="fa fa-ban"></i> Reset</Button>
</CardFooter>
</Card>
<Card>
<CardHeader>
Input <strong>Grid</strong>
</CardHeader>
<CardBody>
<Form action="" method="post" className="form-horizontal">
<FormGroup row>
<Col sm="3">
<Input type="text" placeholder=".col-sm-3" />
</Col>
</FormGroup>
<FormGroup row>
<Col sm="4">
<Input type="text" placeholder=".col-sm-4" />
</Col>
</FormGroup>
<FormGroup row>
<Col sm="5">
<Input type="text" placeholder=".col-sm-5" />
</Col>
</FormGroup>
<FormGroup row>
<Col sm="6">
<Input type="text" placeholder=".col-sm-6" />
</Col>
</FormGroup>
<FormGroup row>
<Col sm="7">
<Input type="text" placeholder=".col-sm-7" />
</Col>
</FormGroup>
<FormGroup row>
<Col sm="8">
<Input type="text" placeholder=".col-sm-8" />
</Col>
</FormGroup>
<FormGroup row>
<Col sm="9">
<Input type="text" placeholder=".col-sm-9" />
</Col>
</FormGroup>
<FormGroup row>
<Col sm="10">
<Input type="text" placeholder=".col-sm-10" />
</Col>
</FormGroup>
<FormGroup row>
<Col sm="11">
<Input type="text" placeholder=".col-sm-11" />
</Col>
</FormGroup>
<FormGroup row>
<Col sm="12">
<Input type="text" placeholder=".col-sm-12" />
</Col>
</FormGroup>
</Form>
</CardBody>
<CardFooter>
<Button type="submit" size="sm" color="primary"><i className="fa fa-user"></i> Login</Button>
<Button type="reset" size="sm" color="danger"><i className="fa fa-ban"></i> Reset</Button>
</CardFooter>
</Card>
<Card>
<CardHeader>
Input <strong>Sizes</strong>
</CardHeader>
<CardBody>
<Form action="" method="post" className="form-horizontal">
<FormGroup row>
<Label sm="5" size="sm" htmlFor="input-small">Small Input</Label>
<Col sm="6">
<Input bsSize="sm" type="text" id="input-small" name="input-small" className="input-sm" placeholder=".form-control-sm" />
</Col>
</FormGroup>
<FormGroup row>
<Label sm="5" htmlFor="input-normal">Normal Input</Label>
<Col sm="6">
<Input type="text" id="input-normal" name="input-normal" placeholder="Normal" />
</Col>
</FormGroup>
<FormGroup row>
<Label sm="5" size="lg" htmlFor="input-large">Large Input</Label>
<Col sm="6">
<Input bsSize="lg" type="text" id="input-large" name="input-large" className="input-lg" placeholder=".form-control-lg" />
</Col>
</FormGroup>
</Form>
</CardBody>
<CardFooter>
<Button type="submit" size="sm" color="primary"><i className="fa fa-dot-circle-o"></i> Submit</Button>
<Button type="reset" size="sm" color="danger"><i className="fa fa-ban"></i> Reset</Button>
</CardFooter>
</Card>
</Col>
</Row>
<Row>
<Col xs="12" sm="6">
<Card>
<CardHeader>
<strong>Validation feedback</strong> Form
</CardHeader>
<CardBody>
<FormGroup>
<Label htmlFor="inputIsValid">Input is valid</Label>
<Input type="text" valid id="inputIsValid" />
<FormFeedback valid>Cool! Input is valid</FormFeedback>
</FormGroup>
<FormGroup>
<Label htmlFor="inputIsInvalid">Input is invalid</Label>
<Input type="text" invalid id="inputIsInvalid" />
<FormFeedback>Houston, we have a problem...</FormFeedback>
</FormGroup>
</CardBody>
</Card>
</Col>
<Col xs="12" sm="6">
<Card>
<CardHeader>
<strong>Validation feedback</strong> Form
</CardHeader>
<CardBody>
<Form className="was-validated">
<FormGroup>
<Label htmlFor="inputSuccess2i">Non-required input</Label>
<Input type="text" className="form-control-success" id="inputSuccess2i" />
<FormFeedback valid>Non-required</FormFeedback>
</FormGroup>
<FormGroup>
<Label htmlFor="inputWarning2i">Required input</Label>
<Input type="text" className="form-control-warning" id="inputWarning2i" required />
<FormFeedback className="help-block">Please provide a valid information</FormFeedback>
<FormFeedback valid className="help-block">Input provided</FormFeedback>
</FormGroup>
</Form>
</CardBody>
</Card>
</Col>
</Row>
<Row>
<Col xs="12" md="4">
<Card>
<CardHeader>
<strong>Icon/Text</strong> Groups
</CardHeader>
<CardBody>
<Form action="" method="post" className="form-horizontal">
<FormGroup row>
<Col md="12">
<InputGroup>
<InputGroupAddon addonType="prepend">
<InputGroupText>
<i className="fa fa-user"></i>
</InputGroupText>
</InputGroupAddon>
<Input type="text" id="input1-group1" name="input1-group1" placeholder="Username" />
</InputGroup>
</Col>
</FormGroup>
<FormGroup row>
<Col md="12">
<InputGroup>
<Input type="email" id="input2-group1" name="input2-group1" placeholder="Email" />
<InputGroupAddon addonType="append">
<InputGroupText>
<i className="fa fa-envelope-o"></i>
</InputGroupText>
</InputGroupAddon>
</InputGroup>
</Col>
</FormGroup>
<FormGroup row>
<Col md="12">
<InputGroup>
<InputGroupAddon addonType="prepend">
<InputGroupText>
<i className="fa fa-euro"></i>
</InputGroupText>
</InputGroupAddon>
<Input type="text" id="input3-group1" name="input3-group1" placeholder=".." />
<InputGroupAddon addonType="append">
<InputGroupText>.00</InputGroupText>
</InputGroupAddon>
</InputGroup>
</Col>
</FormGroup>
</Form>
</CardBody>
<CardFooter>
<Button type="submit" size="sm" color="success"><i className="fa fa-dot-circle-o"></i> Submit</Button>
<Button type="reset" size="sm" color="danger"><i className="fa fa-ban"></i> Reset</Button>
</CardFooter>
</Card>
</Col>
<Col xs="12" md="4">
<Card>
<CardHeader>
<strong>Button</strong> Groups
</CardHeader>
<CardBody>
<Form action="" method="post" className="form-horizontal">
<FormGroup row>
<Col md="12">
<InputGroup>
<InputGroupAddon addonType="prepend">
<Button type="button" color="primary"><i className="fa fa-search"></i> Search</Button>
</InputGroupAddon>
<Input type="text" id="input1-group2" name="input1-group2" placeholder="Username" />
</InputGroup>
</Col>
</FormGroup>
<FormGroup row>
<Col md="12">
<InputGroup>
<Input type="email" id="input2-group2" name="input2-group2" placeholder="Email" />
<InputGroupAddon addonType="append">
<Button type="button" color="primary">Submit</Button>
</InputGroupAddon>
</InputGroup>
</Col>
</FormGroup>
<FormGroup row>
<Col md="12">
<InputGroup>
<InputGroupAddon addonType="prepend">
<Button type="button" color="primary"><i className="fa fa-facebook"></i></Button>
</InputGroupAddon>
<Input type="text" id="input3-group2" name="input3-group2" placeholder="Search" />
<InputGroupAddon addonType="append">
<Button type="button" color="primary"><i className="fa fa-twitter"></i></Button>
</InputGroupAddon>
</InputGroup>
</Col>
</FormGroup>
</Form>
</CardBody>
<CardFooter>
<Button type="submit" size="sm" color="success"><i className="fa fa-dot-circle-o"></i> Submit</Button>
<Button type="reset" size="sm" color="danger"><i className="fa fa-ban"></i> Reset</Button>
</CardFooter>
</Card>
</Col>
<Col xs="12" md="4">
<Card>
<CardHeader>
<strong>Dropdowns</strong> Groups
</CardHeader>
<CardBody>
<Form className="form-horizontal">
<FormGroup row>
<Col md="12">
<InputGroup>
<InputGroupButtonDropdown addonType="prepend"
isOpen={this.state.first}
toggle={() => { this.setState({ first: !this.state.first }); }}>
<DropdownToggle caret color="primary">
Dropdown
</DropdownToggle>
<DropdownMenu className={this.state.first ? 'show' : ''}>
<DropdownItem>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem>Something else here</DropdownItem>
<DropdownItem divider />
<DropdownItem>Separated link</DropdownItem>
</DropdownMenu>
</InputGroupButtonDropdown>
<Input type="text" id="input1-group3" name="input1-group3" placeholder="Username" />
</InputGroup>
</Col>
</FormGroup>
<FormGroup row>
<Col md="12">
<InputGroup>
<Input type="email" id="input2-group3" name="input2-group3" placeholder="Email" />
<InputGroupButtonDropdown addonType="append"
isOpen={this.state.second}
toggle={() => { this.setState({ second: !this.state.second }); }}>
<DropdownToggle caret color="primary">
Dropdown
</DropdownToggle>
<DropdownMenu className={this.state.second ? 'show' : ''}>
<DropdownItem>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem>Something else here</DropdownItem>
<DropdownItem divider />
<DropdownItem>Separated link</DropdownItem>
</DropdownMenu>
</InputGroupButtonDropdown>
</InputGroup>
</Col>
</FormGroup>
<FormGroup row>
<Col md="12">
<InputGroup>
<InputGroupButtonDropdown
addonType="prepend"
isOpen={this.state.third}
toggle={() => { this.setState({ third: !this.state.third }); }}>
<DropdownToggle caret color="primary">Action</DropdownToggle>
<DropdownMenu className={this.state.third ? 'show' : ''}>
<DropdownItem>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem>Something else here</DropdownItem>
<DropdownItem divider />
<DropdownItem>Separated link</DropdownItem>
</DropdownMenu>
</InputGroupButtonDropdown>
<Input type="text" id="input3-group3" name="input3-group3" placeholder=".." />
<InputGroupButtonDropdown addonType="append"
isOpen={this.state.fourth}
toggle={() => { this.setState({ fourth: !this.state.fourth }); }}>
<DropdownToggle caret color="primary">
Dropdown
</DropdownToggle>
<DropdownMenu className={this.state.fourth ? 'show' : ''}>
<DropdownItem>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem>Something else here</DropdownItem>
<DropdownItem divider />
<DropdownItem>Separated link</DropdownItem>
</DropdownMenu>
</InputGroupButtonDropdown>
</InputGroup>
</Col>
</FormGroup>
</Form>
</CardBody>
<CardFooter>
<Button type="submit" size="sm" color="success"><i className="fa fa-dot-circle-o"></i> Submit</Button>
<Button type="reset" size="sm" color="danger"><i className="fa fa-ban"></i> Reset</Button>
</CardFooter>
</Card>
</Col>
</Row>
<Row>
<Col xs="12" md="6">
<Card>
<CardHeader>
Use the grid for big devices!
<small><code>.col-lg-*</code> <code>.col-md-*</code> <code>.col-sm-*</code></small>
</CardHeader>
<CardBody>
<Form action="" method="post" className="form-horizontal">
<FormGroup row>
<Col md="8">
<Input type="text" placeholder=".col-md-8" />
</Col>
<Col md="4">
<Input type="text" placeholder=".col-md-4" />
</Col>
</FormGroup>
<FormGroup row>
<Col md="7">
<Input type="text" placeholder=".col-md-7" />
</Col>
<Col md="5">
<Input type="text" placeholder=".col-md-5" />
</Col>
</FormGroup>
<FormGroup row>
<Col md="6">
<Input type="text" placeholder=".col-md-6" />
</Col>
<Col md="6">
<Input type="text" placeholder=".col-md-6" />
</Col>
</FormGroup>
<FormGroup row>
<Col md="5">
<Input type="text" placeholder=".col-md-5" />
</Col>
<Col md="7">
<Input type="text" placeholder=".col-md-7" />
</Col>
</FormGroup>
<FormGroup row>
<Col md="4">
<Input type="text" placeholder=".col-md-4" />
</Col>
<Col md="8">
<Input type="text" placeholder=".col-md-8" />
</Col>
</FormGroup>
</Form>
</CardBody>
<CardFooter>
<Button type="submit" size="sm" color="primary">Action</Button>
<Button size="sm" color="danger">Action</Button>
<Button size="sm" color="warning">Action</Button>
<Button size="sm" color="info">Action</Button>
<Button size="sm" color="success">Action</Button>
</CardFooter>
</Card>
</Col>
<Col xs="12" md="6">
<Card>
<CardHeader>
Input Grid for small devices!
<small><code>.col-*</code></small>
</CardHeader>
<CardBody>
<Form action="" method="post" className="form-horizontal">
<FormGroup row>
<Col xs="4">
<Input type="text" placeholder=".col-4" />
</Col>
<Col xs="8">
<Input type="text" placeholder=".col-8" />
</Col>
</FormGroup>
<FormGroup row>
<Col xs="5">
<Input type="text" placeholder=".col-5" />
</Col>
<Col xs="7">
<Input type="text" placeholder=".col-7" />
</Col>
</FormGroup>
<FormGroup row>
<Col xs="6">
<Input type="text" placeholder=".col-6" />
</Col>
<Col xs="6">
<Input type="text" placeholder=".col-6" />
</Col>
</FormGroup>
<FormGroup row>
<Col xs="7">
<Input type="text" placeholder=".col-5" />
</Col>
<Col xs="5">
<Input type="text" placeholder=".col-5" />
</Col>
</FormGroup>
<FormGroup row>
<Col xs="8">
<Input type="text" placeholder=".col-8" />
</Col>
<Col xs="4">
<Input type="text" placeholder=".col-4" />
</Col>
</FormGroup>
</Form>
</CardBody>
<CardFooter>
<Button type="submit" size="sm" color="primary">Action</Button>
<Button size="sm" color="danger">Action</Button>
<Button size="sm" color="warning">Action</Button>
<Button size="sm" color="info">Action</Button>
<Button size="sm" color="success">Action</Button>
</CardFooter>
</Card>
</Col>
</Row>
<Row>
<Col xs="12" sm="4">
<Card>
<CardHeader>
Example Form
</CardHeader>
<CardBody>
<Form action="" method="post">
<FormGroup>
<InputGroup>
<InputGroupAddon addonType="prepend">
<InputGroupText>Username</InputGroupText>
</InputGroupAddon>
<Input type="email" id="username3" name="username3" autoComplete="name"/>
<InputGroupAddon addonType="append">
<InputGroupText><i className="fa fa-user"></i></InputGroupText>
</InputGroupAddon>
</InputGroup>
</FormGroup>
<FormGroup>
<InputGroup>
<InputGroupAddon addonType="prepend">
<InputGroupText>Email</InputGroupText>
</InputGroupAddon>
<Input type="email" id="email3" name="email3" autoComplete="username"/>
<InputGroupAddon addonType="append">
<InputGroupText><i className="fa fa-envelope"></i></InputGroupText>
</InputGroupAddon>
</InputGroup>
</FormGroup>
<FormGroup>
<InputGroup>
<InputGroupAddon addonType="prepend">
<InputGroupText>Password</InputGroupText>
</InputGroupAddon>
<Input type="password" id="password3" name="password3" autoComplete="current-password"/>
<InputGroupAddon addonType="append">
<InputGroupText><i className="fa fa-asterisk"></i></InputGroupText>
</InputGroupAddon>
</InputGroup>
</FormGroup>
<FormGroup className="form-actions">
<Button type="submit" size="sm" color="primary">Submit</Button>
</FormGroup>
</Form>
</CardBody>
</Card>
</Col>
<Col xs="12" sm="4">
<Card>
<CardHeader>
Example Form
</CardHeader>
<CardBody>
<Form action="" method="post">
<FormGroup>
<InputGroup>
<Input type="text" id="username2" name="username2" placeholder="Username" autoComplete="name"/>
<InputGroupAddon addonType="append">
<InputGroupText><i className="fa fa-user"></i></InputGroupText>
</InputGroupAddon>
</InputGroup>
</FormGroup>
<FormGroup>
<InputGroup>
<Input type="email" id="email2" name="email2" placeholder="Email" autoComplete="username"/>
<InputGroupAddon addonType="append">
<InputGroupText><i className="fa fa-envelope"></i></InputGroupText>
</InputGroupAddon>
</InputGroup>
</FormGroup>
<FormGroup>
<InputGroup>
<Input type="password" id="password2" name="password2" placeholder="Password" autoComplete="current-password"/>
<InputGroupAddon addonType="append">
<InputGroupText><i className="fa fa-asterisk"></i></InputGroupText>
</InputGroupAddon>
</InputGroup>
</FormGroup>
<FormGroup className="form-actions">
<Button type="submit" size="sm" color="secondary">Submit</Button>
</FormGroup>
</Form>
</CardBody>
</Card>
</Col>
<Col xs="12" sm="4">
<Card>
<CardHeader>
Example Form
</CardHeader>
<CardBody>
<Form action="" method="post">
<FormGroup>
<InputGroup>
<InputGroupAddon addonType="prepend">
<InputGroupText><i className="fa fa-user"></i></InputGroupText>
</InputGroupAddon>
<Input type="text" id="username1" name="username1" placeholder="Username" autoComplete="name"/>
</InputGroup>
</FormGroup>
<FormGroup>
<InputGroup>
<InputGroupAddon addonType="prepend">
<InputGroupText><i className="fa fa-envelope"></i></InputGroupText>
</InputGroupAddon>
<Input type="email" id="email1" name="email1" placeholder="Email" autoComplete="username"/>
</InputGroup>
</FormGroup>
<FormGroup>
<InputGroup>
<InputGroupAddon addonType="prepend">
<InputGroupText><i className="fa fa-asterisk"></i></InputGroupText>
</InputGroupAddon>
<Input type="password" id="password1" name="password1" placeholder="Password" autoComplete="current-password"/>
</InputGroup>
</FormGroup>
<FormGroup className="form-actions">
<Button type="submit" size="sm" color="success">Submit</Button>
</FormGroup>
</Form>
</CardBody>
</Card>
</Col>
</Row>
<Row>
<Col xs="12">
<Fade timeout={this.state.timeout} in={this.state.fadeIn}>
<Card>
<CardHeader>
<i className="fa fa-edit"></i>Form Elements
<div className="card-header-actions">
<Button color="link" className="card-header-action btn-setting"><i className="icon-settings"></i></Button>
<Button color="link" className="card-header-action btn-minimize" data-target="#collapseExample" onClick={this.toggle}><i className="icon-arrow-up"></i></Button>
<Button color="link" className="card-header-action btn-close" onClick={this.toggleFade}><i className="icon-close"></i></Button>
</div>
</CardHeader>
<Collapse isOpen={this.state.collapse} id="collapseExample">
<CardBody>
<Form className="form-horizontal">
<FormGroup>
<Label htmlFor="prependedInput">Prepended text</Label>
<div className="controls">
<InputGroup className="input-prepend">
<InputGroupAddon addonType="prepend">
<InputGroupText>@</InputGroupText>
</InputGroupAddon>
<Input id="prependedInput" size="16" type="text" />
</InputGroup>
<p className="help-block">Here's some help text</p>
</div>
</FormGroup>
<FormGroup>
<Label htmlFor="appendedInput">Appended text</Label>
<div className="controls">
<InputGroup>
<Input id="appendedInput" size="16" type="text" />
<InputGroupAddon addonType="append">
<InputGroupText>.00</InputGroupText>
</InputGroupAddon>
</InputGroup>
<span className="help-block">Here's more help text</span>
</div>
</FormGroup>
<FormGroup>
<Label htmlFor="appendedPrependedInput">Append and prepend</Label>
<div className="controls">
<InputGroup className="input-prepend">
<InputGroupAddon addonType="prepend">
<InputGroupText>$</InputGroupText>
</InputGroupAddon>
<Input id="appendedPrependedInput" size="16" type="text" />
<InputGroupAddon addonType="append">
<InputGroupText>.00</InputGroupText>
</InputGroupAddon>
</InputGroup>
</div>
</FormGroup>
<FormGroup>
<Label htmlFor="appendedInputButton">Append with button</Label>
<div className="controls">
<InputGroup>
<Input id="appendedInputButton" size="16" type="text" />
<InputGroupAddon addonType="append">
<Button color="secondary">Go!</Button>
</InputGroupAddon>
</InputGroup>
</div>
</FormGroup>
<FormGroup>
<Label htmlFor="appendedInputButtons">Two-button append</Label>
<div className="controls">
<InputGroup>
<Input id="appendedInputButtons" size="16" type="text" />
<InputGroupAddon addonType="append">
<Button color="secondary">Search</Button>
<Button color="secondary">Options</Button>
</InputGroupAddon>
</InputGroup>
</div>
</FormGroup>
<div className="form-actions">
<Button type="submit" color="primary">Save changes</Button>
<Button color="secondary">Cancel</Button>
</div>
</Form>
</CardBody>
</Collapse>
</Card>
</Fade>
</Col>
</Row>
</div>
);
}
Example #20
| Source File: Collapses.js From id.co.moonlay-eworkplace-admin-web with MIT License | 4 votes |
|
render() {
return (
<div className="animated fadeIn">
<Row>
<Col xl="6">
<Card>
<CardHeader>
<i className="fa fa-align-justify"></i><strong>Collapse</strong>
<div className="card-header-actions">
<a href="https://reactstrap.github.io/components/collapse/" rel="noreferrer noopener" target="_blank" className="card-header-action">
<small className="text-muted">docs</small>
</a>
</div>
</CardHeader>
<Collapse isOpen={this.state.collapse} onEntering={this.onEntering} onEntered={this.onEntered} onExiting={this.onExiting} onExited={this.onExited}>
<CardBody>
<p>
Anim pariatur cliche reprehenderit,
enim eiusmod high life accusamus terry richardson ad squid. Nihil
anim keffiyeh helvetica, craft beer labore wes anderson cred
nesciunt sapiente ea proident.
</p>
<p>
Donec molestie odio id nisi malesuada, mattis tincidunt velit egestas. Sed non pulvinar risus. Aenean
elementum eleifend nunc, pellentesque dapibus arcu hendrerit fringilla. Aliquam in nibh massa. Cras
ultricies lorem non enim volutpat, a eleifend urna placerat. Fusce id luctus urna. In sed leo tellus.
Mauris tristique leo a nisl feugiat, eget vehicula leo venenatis. Quisque magna metus, luctus quis
sollicitudin vel, vehicula nec ipsum. Donec rutrum commodo lacus ut condimentum. Integer vel turpis
purus. Etiam vehicula, nulla non fringilla blandit, massa purus faucibus tellus, a luctus enim orci non
augue. Aenean ullamcorper nisl urna, non feugiat tortor volutpat in. Vivamus lobortis massa dolor, eget
faucibus ipsum varius eget. Pellentesque imperdiet, turpis sed sagittis lobortis, leo elit laoreet arcu,
vehicula sagittis elit leo id nisi.
</p>
</CardBody>
</Collapse>
<CardFooter>
<Button color="primary" onClick={this.toggle} className={'mb-1'} id="toggleCollapse1">Toggle</Button>
<hr/>
<h5>Current state: {this.state.status}</h5>
</CardFooter>
</Card>
<Card>
<CardHeader>
<i className="fa fa-align-justify"></i><strong>Fade</strong>
<div className="card-header-actions">
<a href="https://reactstrap.github.io/components/fade/" rel="noreferrer noopener" target="_blank" className="card-header-action">
<small className="text-muted">docs</small>
</a>
</div>
</CardHeader>
<CardBody>
<Fade timeout={this.state.timeout} in={this.state.fadeIn} tag="h5" className="mt-3">
This content will fade in and out as the button is pressed...
</Fade>
</CardBody>
<CardFooter>
<Button color="primary" onClick={this.toggleFade} id="toggleFade1">Toggle Fade</Button>
</CardFooter>
</Card>
</Col>
<Col xl="6">
<Card>
<CardHeader>
<i className="fa fa-align-justify"></i> Collapse <small>accordion</small>
<div className="card-header-actions">
<Badge>NEW</Badge>
</div>
</CardHeader>
<CardBody>
<div id="accordion">
<Card className="mb-0">
<CardHeader id="headingOne">
<Button block color="link" className="text-left m-0 p-0" onClick={() => this.toggleAccordion(0)} aria-expanded={this.state.accordion[0]} aria-controls="collapseOne">
<h5 className="m-0 p-0">Collapsible Group Item #1</h5>
</Button>
</CardHeader>
<Collapse isOpen={this.state.accordion[0]} data-parent="#accordion" id="collapseOne" aria-labelledby="headingOne">
<CardBody>
1. Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non
cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred
nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft
beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</CardBody>
</Collapse>
</Card>
<Card className="mb-0">
<CardHeader id="headingTwo">
<Button block color="link" className="text-left m-0 p-0" onClick={() => this.toggleAccordion(1)} aria-expanded={this.state.accordion[1]} aria-controls="collapseTwo">
<h5 className="m-0 p-0">Collapsible Group Item #2</h5>
</Button>
</CardHeader>
<Collapse isOpen={this.state.accordion[1]} data-parent="#accordion" id="collapseTwo">
<CardBody>
2. Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non
cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred
nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft
beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</CardBody>
</Collapse>
</Card>
<Card className="mb-0">
<CardHeader id="headingThree">
<Button block color="link" className="text-left m-0 p-0" onClick={() => this.toggleAccordion(2)} aria-expanded={this.state.accordion[2]} aria-controls="collapseThree">
<h5 className="m-0 p-0">Collapsible Group Item #3</h5>
</Button>
</CardHeader>
<Collapse isOpen={this.state.accordion[2]} data-parent="#accordion" id="collapseThree">
<CardBody>
3. Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non
cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred
nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft
beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</CardBody>
</Collapse>
</Card>
</div>
</CardBody>
</Card>
<Card>
<CardHeader>
<i className="fa fa-align-justify"></i> Collapse <small>custom accordion</small>
<div className="card-header-actions">
<Badge>NEW</Badge>
</div>
</CardHeader>
<CardBody>
<div id="exampleAccordion" data-children=".item">
<div className="item">
<Button className="m-0 p-0" color="link" onClick={() => this.toggleCustom(0)} aria-expanded={this.state.custom[0]} aria-controls="exampleAccordion1">
Toggle item
</Button>
<Collapse isOpen={this.state.custom[0]} data-parent="#exampleAccordion" id="exampleAccordion1">
<p className="mb-3">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pretium lorem non vestibulum scelerisque. Proin a vestibulum sem, eget
tristique massa. Aliquam lacinia rhoncus nibh quis ornare.
</p>
</Collapse>
</div>
<div className="item">
<Button className="m-0 p-0" color="link" onClick={() => this.toggleCustom(1)} aria-expanded={this.state.custom[1]} aria-controls="exampleAccordion2">
Toggle item 2
</Button>
<Collapse isOpen={this.state.custom[1]} data-parent="#exampleAccordion" id="exampleAccordion2">
<p className="mb-3">
Donec at ipsum dignissim, rutrum turpis scelerisque, tristique lectus. Pellentesque habitant morbi tristique senectus et netus et
malesuada fames ac turpis egestas. Vivamus nec dui turpis. Orci varius natoque penatibus et magnis dis parturient montes,
nascetur ridiculus mus.
</p>
</Collapse>
</div>
</div>
</CardBody>
</Card>
</Col>
</Row>
</div>
);
}
Example #21
| 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 #22
| Source File: UiCards.js From gedge-platform with Apache License 2.0 | 4 votes |
|
render() {
return (
<React.Fragment>
<div className="page-content">
<Container fluid>
<Breadcrumbs title="Cards" breadcrumbItems={this.state.breadcrumbItems} />
<Row>
<Col mg={6} xl={3}>
<Card>
<CardImg top className="img-fluid" src={img1} alt="Skote" />
<CardBody>
<CardTitle className="mt-0">Card title</CardTitle>
<CardText>Some quick example text to build on the card title and make
up the bulk of the card's content.</CardText>
<Link to="#" className="btn btn-primary waves-effect waves-light">Button</Link>
</CardBody>
</Card>
</Col>
<Col mg={6} xl={3}>
<Card>
<CardImg top className="img-fluid" src={img2} alt="Skote" />
<CardBody>
<CardTitle className="mt-0">Card title</CardTitle>
<CardText>Some quick example text to build on the card title and make
up the bulk of the card's content.</CardText>
</CardBody>
<ul className="list-group list-group-flush">
<li className="list-group-item">Cras justo odio</li>
<li className="list-group-item">Dapibus ac facilisis in</li>
</ul>
<CardBody>
<Link to="#" className="card-link">Card link</Link>
<Link to="#" className="card-link">Another link</Link>
</CardBody>
</Card>
</Col>
<Col mg={6} xl={3}>
<Card>
<CardImg top className="img-fluid" src={img3} alt="Skote" />
<CardBody>
<CardText>Some quick example text to build on the card title and make
up the bulk of the card's content.</CardText>
</CardBody>
</Card>
</Col>
<Col md={6} xl={3}>
<Card>
<CardBody>
<CardTitle className="mt-0">Card title</CardTitle>
<CardSubtitle className="font-14 text-muted">Support card subtitle</CardSubtitle>
</CardBody>
<CardImg className="img-fluid" src={img4} alt="Skote" />
<CardBody>
<CardText>Some quick example text to build on the card title and make
up the bulk of the card's content.</CardText>
<Link to="#" className="card-link">Card link</Link>
<Link to="#" className="card-link">Another link</Link>
</CardBody>
</Card>
</Col>
</Row>
<Row>
<Col md={6}>
<Card body>
<CardTitle className="mt-0">Special title treatment</CardTitle>
<CardText>With supporting text below as a natural lead-in to additional
content.</CardText>
<Link to="#" className="btn btn-primary waves-effect waves-light">Go somewhere</Link>
</Card>
</Col>
<Col md={6}>
<Card body>
<CardTitle className="mt-0">Special title treatment</CardTitle>
<CardText>With supporting text below as a natural lead-in to additional
content.</CardText>
<Link to="#" className="btn btn-primary waves-effect waves-light">Go somewhere</Link>
</Card>
</Col>
</Row>
<Row>
<Col lg={4}>
<Card body>
<CardTitle className="mt-0">Special title treatment</CardTitle>
<CardText>With supporting text below as a natural lead-in to additional
content.</CardText>
<Link to="#" className="btn btn-primary waves-effect waves-light">Go somewhere</Link>
</Card>
</Col>
<Col lg={4}>
<Card body className="text-center">
<CardTitle className="mt-0">Special title treatment</CardTitle>
<CardText>With supporting text below as a natural lead-in to additional
content.</CardText>
<Link to="#" className="btn btn-primary waves-effect waves-light">Go somewhere</Link>
</Card>
</Col>
<Col lg={4}>
<Card body className="text-right">
<CardTitle className="mt-0">Special title treatment</CardTitle>
<CardText>With supporting text below as a natural lead-in to additional
content.</CardText>
<Link to="#" className="btn btn-primary waves-effect waves-light">Go somewhere</Link>
</Card>
</Col>
</Row>
<Row>
<Col lg={4}>
<Card>
<CardHeader className="mt-0">Featured</CardHeader>
<CardBody>
<CardTitle className="mt-0">Special title treatment</CardTitle>
<CardText>With supporting text below as a natural lead-in to
additional content.</CardText>
<Link to="#" className="btn btn-primary">Go somewhere</Link>
</CardBody>
</Card>
</Col>
<Col lg={4}>
<Card>
<CardHeader>
Quote
</CardHeader>
<CardBody>
<blockquote className="card-blockquote mb-0">
<CardText>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere
erat a ante.</CardText>
<footer className="blockquote-footer font-size-12">
Someone famous in <cite title="Source Title">Source Title</cite>
</footer>
</blockquote>
</CardBody>
</Card>
</Col>
<Col lg={4}>
<Card>
<CardHeader>Featured</CardHeader>
<CardBody>
<CardTitle className="mt-0">Special title treatment</CardTitle>
<CardText>With supporting text below as a natural lead-in to
additional content.</CardText>
<Link to="#" className="btn btn-primary waves-effect waves-light">Go somewhere</Link>
</CardBody>
<CardFooter className="text-muted">
2 days ago
</CardFooter>
</Card>
</Col>
</Row>
<Row>
<Col lg={4}>
<Card>
<CardImg top className="img-fluid" src={img5} alt="Skote" />
<CardBody>
<CardTitle className="mt-0">Card title</CardTitle>
<CardText>This is a wider card with supporting text below as a
natural lead-in to additional content. This content is a little bit
longer.</CardText>
<CardText>
<small className="text-muted">Last updated 3 mins ago</small>
</CardText>
</CardBody>
</Card>
</Col>
<Col lg={4}>
<Card>
<CardBody>
<CardTitle className="mt-0">Card title</CardTitle>
<CardText>This is a wider card with supporting text below as a
natural lead-in to additional content. This content is a little bit
longer.</CardText>
<CardText>
<small className="text-muted">Last updated 3 mins ago</small>
</CardText>
</CardBody>
<CardImg bottom className="img-fluid" src={img7} alt="Skote" />
</Card>
</Col>
<Col lg={4}>
<Card>
<CardImg className="img-fluid" src={img6} alt="Skote" />
<CardImgOverlay>
<CardTitle className="text-white mt-0">Card title</CardTitle>
<CardText className="text-light">This is a wider card with supporting text below as a
natural lead-in to additional content. This content is a little bit
longer.</CardText>
<CardText>
<small className="text-white">Last updated 3 mins ago</small>
</CardText>
</CardImgOverlay>
</Card>
</Col>
</Row>
<Row>
<Col lg={6}>
<Card>
<Row className="no-gutters align-items-center">
<Col md={4}>
<CardImg className="img-fluid" src={img2} alt="Skote" />
</Col>
<Col md={8}>
<CardBody>
<CardTitle>Card title</CardTitle>
<CardText>This is a wider card with supporting text below as a natural lead-in to additional content.</CardText>
<CardText><small className="text-muted">Last updated 3 mins ago</small></CardText>
</CardBody>
</Col>
</Row>
</Card>
</Col>
<Col lg={6}>
<Card>
<Row className="no-gutters align-items-center">
<Col md={8}>
<CardBody>
<CardTitle>Card title</CardTitle>
<CardText>This is a wider card with supporting text below as a natural lead-in to additional content.</CardText>
<CardText><small className="text-muted">Last updated 3 mins ago</small></CardText>
</CardBody>
</Col>
<Col md={4}>
<CardImg className="img-fluid" src={img3} alt="Skote" />
</Col>
</Row>
</Card>
</Col>
</Row>
<Row>
<Col lg={4}>
<Card color="primary" className="text-white-50">
<CardBody>
<CardTitle className="mb-4 text-white"><i className="mdi mdi-bullseye-arrow mr-3"></i> Primary Card</CardTitle>
<CardText>Some quick example text to build on the card title and make up the bulk of the card's content.</CardText>
</CardBody>
</Card>
</Col>
<Col lg={4}>
<Card color="success" className="text-white-50">
<CardBody>
<CardTitle className="mb-4 text-white"><i className="mdi mdi-check-all mr-3"></i> Success Card</CardTitle>
<CardText>Some quick example text to build on the card title and make up the bulk of the card's content.</CardText>
</CardBody>
</Card>
</Col>
<Col lg={4}>
<Card color="info" className="text-white-50">
<CardBody>
<CardTitle className="mb-4 text-white"><i className="mdi mdi-alert-circle-outline mr-3"></i>Info Card</CardTitle>
<CardText>Some quick example text to build on the card title and make up the bulk of the card's content.</CardText>
</CardBody>
</Card>
</Col>
</Row>
<Row>
<Col lg={4}>
<Card color="warning" className="text-white-50">
<CardBody>
<CardTitle className="mb-4 text-white"><i className="mdi mdi-alert-outline mr-3"></i>Warning Card</CardTitle>
<CardText>Some quick example text to build on the card title and make up the bulk of the card's content.</CardText>
</CardBody>
</Card>
</Col>
<Col lg={4}>
<Card color="danger" className="text-white-50">
<CardBody>
<CardTitle className="mb-4 text-white"><i className="mdi mdi-block-helper mr-3"></i>Danger Card</CardTitle>
<CardText>Some quick example text to build on the card title and make up the bulk of the card's content.</CardText>
</CardBody>
</Card>
</Col>
<Col lg={4}>
<Card color="dark" className="text-light">
<CardBody>
<CardTitle className="mb-4 text-white"><i className="mdi mdi-alert-circle-outline mr-3"></i>Dark Card</CardTitle>
<CardText>Some quick example text to build on the card title and make up the bulk of the card's content.</CardText>
</CardBody>
</Card>
</Col>
</Row>
<Row>
<Col lg={4}>
<Card outline color="primary" className="border">
<CardHeader className="bg-transparent">
<h5 className="my-0 text-primary"><i className="mdi mdi-bullseye-arrow mr-3"></i>Primary outline Card</h5>
</CardHeader>
<CardBody>
<CardTitle className="mt-0">card title</CardTitle>
<CardText>Some quick example text to build on the card title and make up the bulk of the card's content.</CardText>
</CardBody>
</Card>
</Col>
<Col lg={4}>
<Card outline color="danger" className="border">
<CardHeader className="bg-transparent">
<h5 className="my-0 text-danger"><i className="mdi mdi-block-helper mr-3"></i>Danger outline Card</h5>
</CardHeader>
<CardBody>
<CardTitle className="mt-0">card title</CardTitle>
<CardText>Some quick example text to build on the card title and make up the bulk of the card's content.</CardText>
</CardBody>
</Card>
</Col>
<Col lg={4}>
<Card outline color="success" className="border">
<CardHeader className="bg-transparent">
<h5 className="my-0 text-success"><i className="mdi mdi-check-all mr-3"></i>Success Card</h5>
</CardHeader>
<CardBody>
<CardTitle className="mt-0">card title</CardTitle>
<CardText>Some quick example text to build on the card title and make up the bulk of the card's content.</CardText>
</CardBody>
</Card>
</Col>
</Row>
<Row>
<Col xs={12} className="mb-4">
<h4 className="my-3">Decks</h4>
<CardDeck>
<Card>
<CardImg top className="img-fluid" src={img4} alt="Skote" />
<CardBody>
<CardTitle className="mt-0">Card title</CardTitle>
<CardText>This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</CardText>
<CardText>
<small className="text-muted">Last updated 3 mins ago</small>
</CardText>
</CardBody>
</Card>
<Card>
<CardImg top className="img-fluid" src={img5} alt="Skote" />
<CardBody>
<CardTitle className="mt-0">Card title</CardTitle>
<CardText>This card has supporting text below as a natural lead-in to additional content.</CardText>
<CardText>
<small className="text-muted">Last updated 3 mins ago</small>
</CardText>
</CardBody>
</Card>
<Card>
<CardImg top className="img-fluid" src={img6} alt="Skote" />
<CardBody>
<CardTitle className="mt-0">Card title</CardTitle>
<CardText>This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</CardText>
<CardText>
<small className="text-muted">Last updated 3 mins ago</small>
</CardText>
</CardBody>
</Card>
</CardDeck>
</Col>
</Row>
<Row>
<Col sm={12}>
<h4 className="my-3">Cards Columns</h4>
<CardColumns>
<Card>
<CardImg top src={img3} alt="Skote" />
<CardBody>
<CardTitle>Card title that wraps to a new line</CardTitle>
<CardText>This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</CardText>
</CardBody>
</Card>
<Card>
<CardBody>
<blockquote className="card-blockquote mb-0">
<CardText>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</CardText>
<footer className="blockquote-footer font-size-12">
Someone famous in <cite title="Source Title">Source Title</cite>
</footer>
</blockquote>
</CardBody>
</Card>
<Card>
<CardImg top src={img5} alt="Skote" />
<CardBody>
<CardTitle>Card title</CardTitle>
<CardText>This card has supporting text below as a natural lead-in to additional content.</CardText>
<CardText><small className="text-muted">Last updated 3 mins ago</small></CardText>
</CardBody>
</Card>
<Card color="primary" className="text-white text-center p-3">
<blockquote className="card-blockquote mb-0">
<CardText>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</CardText>
<footer className="blockquote-footer text-white font-size-12">Someone famous in <cite title="Source Title">Source Title</cite>
</footer>
</blockquote>
</Card>
<Card className="text-center">
<CardBody>
<CardTitle>Card title</CardTitle>
<CardText>This card has a regular title and short paragraphy of text below it.</CardText>
<CardText><small className="text-muted">Last updated 3 mins ago</small></CardText>
</CardBody>
</Card>
<Card>
<CardImg top src={img7} alt="Skote" />
</Card>
<Card className="p-3 text-right">
<blockquote className="blockquote mb-0">
<CardText>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</CardText>
<footer className="blockquote-footer">
<small className="text-muted">
Someone famous in <cite title="Source Title">Source Title</cite>
</small>
</footer>
</blockquote>
</Card>
<Card>
<CardBody>
<CardTitle>Card title</CardTitle>
<CardText>This is another card with title and supporting text below. This card has some additional content to make it slightly taller overall.</CardText>
<CardText><small className="text-muted">Last updated 3 mins ago</small></CardText>
</CardBody>
</Card>
</CardColumns>
</Col>
</Row>
</Container>
</div>
</React.Fragment>
);
}
Example #23
| Source File: footerSection.js From ErgoAuctionHouse with MIT License | 4 votes |
|
render() {
return (
<span style={{"display": "contents"}}>
<FakeModal bid={this.state.bid} modal={this.state.modal} box={this.state.box}
original={this.state.original} isOpen={this.state.fakeOpen}
close={() => this.setState({fakeOpen: !this.state.fakeOpen})}/>
<CardFooter>
<Col md={6} className="widget-description">
<Row>
{this.props.box.curBid >= this.props.box.minBid && <span>
<b className="fsize-1">
{longToCurrency(this.props.box.curBid, -1, this.props.box.currency)}{' '}{this.props.box.currency}
</b>{' '}
<text
style={{fontSize: '10px'}}
className="text-success pl-1 pr-1"
>
{this.props.box.increase}%
<FontAwesomeIcon icon={faAngleUp}/>
</text>
</span>}
{this.props.box.curBid < this.props.box.minBid && <span>
<i
style={{fontSize: '12px'}}
className="pl-1 pr-1"
>
No bids yet
</i>{' '}
</span>}
</Row>
</Col>
<Col md={6} className="justify-content-end ml-3">
<div className="widget-content">
<div className="widget-content-outer">
<div className="widget-content-wrapper">
{this.props.box.remTime}
</div>
<div className="widget-progress-wrapper">
<Progress
className="progress-bar-xs progress-bar-animated-alt"
value={this.props.box.done}
/>
</div>
</div>
</div>
</Col>
</CardFooter>
{!this.props.box.isFinished && <ButtonGroup>
<div className="d-block text-center">
<button className="btn-icon btn-icon-only btn btn-outline-primary"
onClick={(e) => {
e.preventDefault();
this.props.openBid();
}}>
<i className="pe-7s-edit btn-icon-wrapper"> </i>
</button>
</div>
<button type="button" className="btn btn-outline-primary btn-sm"
style={{fontSize: 13}}
onClick={(e) => {
if (!isWalletSaved()) {
showMsg(
'In order to place bids, you have to configure the wallet first.',
true
);
return
}
e.preventDefault();
this.props.loading(true)
bidHelper(this.props.box.nextBid, this.props.box, this.props.assemblerModal, this.openFake).finally(() => this.props.loading(false))
}}>
<text>
Bid
</text>
{' '}
<text>
for{' '}
<b>
{longToCurrency(this.props.box.nextBid, -1, this.props.box.currency)}{' '} {this.props.box.currency}
</b>
</text>
</button>
{this.props.box.instantAmount !== -1 &&
<button type="button" className="btn btn-outline-dark btn-sm"
style={{fontSize: 13}}
onClick={(e) => {
if (!isWalletSaved()) {
showMsg(
'In order to place bids, you have to configure the wallet first.',
true
);
return
}
e.preventDefault();
this.props.loading(true)
bidHelper(this.props.box.instantAmount, this.props.box, this.props.assemblerModal, this.openFake).finally(() => this.props.loading(false))
}}>
<text>
Buy
</text>
{' '}
<text>
for{' '}
<b>
{longToCurrency(this.props.box.instantAmount, -1, this.props.box.currency)}{' '} {this.props.box.currency}
</b>
</text>
</button>}
</ButtonGroup>}
{this.props.box.isFinished &&
<p className="text-danger mr-2 ml-2">
{this.props.box.remTime === 0 && <text>
This auction is already finished!
</text>}
{this.props.box.remTime !== 0 && <text>
This auction has been bought with the "Instant Buy" option.
</text>}
</p>}
</span>
);
}
Example #24
| Source File: historyBox.js From ErgoAuctionHouse with MIT License | 4 votes |
|
render() {
return (
<Col key={this.props.box.id} md="4">
<ArtworkDetails
box={this.props.box}
isOpen={this.state.infoModal}
close={() =>
this.setState({
infoModal: !this.state.infoModal,
})
}
/>
<MyBidsModal
isOpen={this.state.myBidsModal}
box={this.props.box}
close={this.openMyBids}
highText='winner'
/>
<BidHistory close={this.openDetails} box={this.props.box} isOpen={this.state.detailsModal}/>
<div className="card mb-3 widget-chart">
<div className="widget-chart-actions">
<UncontrolledButtonDropdown direction='left'>
<DropdownToggle color="link">
<FontAwesomeIcon icon={faEllipsisV}/>
</DropdownToggle>
<DropdownMenu className="dropdown-menu-md-left">
<Nav vertical>
<NavItem className="nav-item-header">
General
</NavItem>
<NavItem>
<NavLink
href={'#/auction/specific/' + this.props.box.boxId}
>Go to Auction's specific Link</NavLink>
</NavItem>
</Nav>
</DropdownMenu>
</UncontrolledButtonDropdown>
</div>
<div className="widget-chart-content">
<ResponsiveContainer height={20}>
<SyncLoader
css={override}
size={8}
color={'#0086d3'}
loading={this.props.box.loader}
/>
</ResponsiveContainer>
<div className="d-inline-flex">
{this.props.box.curBid >= this.props.box.minBid && <span className="widget-numbers">
{longToCurrency(this.props.box.curBid, -1, this.props.box.currency)} {this.props.box.currency}
</span>}
{this.props.box.curBid < this.props.box.minBid && <span className="widget-numbers">
-
</span>}
{this.props.box.isArtwork && <span
onClick={() => this.setState({artDetail: true})}
data-tip="Artwork NFT"
className="icon-wrapper rounded-circle opacity-7 m-2 font-icon-wrapper">
<i className="lnr-picture icon-gradient bg-plum-plate fsize-4"/>
<ArtworkDetails
box={this.props.box}
isOpen={this.state.artDetail}
close={() => this.setState({artDetail: !this.state.artDetail})}
/>
</span>}
</div>
<ArtworkMedia preload={false} avoidFav={true} box={this.props.box}/>
<div className="widget-chart-wrapper chart-wrapper-relative justify justify-content-lg-start">
<div
style={{
display: 'flex',
justifyContent: 'center',
}}
className="widget-subheading m-1"
>
<span
data-tip={this.props.box.assets[0].tokenId}
>
{friendlyToken(this.props.box.assets[0], true, 8)}
</span>
<i
onClick={() =>
this.showIssuingTx(this.props.box)
}
data-tip="see issuing transaction"
style={{
fontSize: '1.5rem',
marginLeft: '5px',
}}
className="pe-7s-help1 icon-gradient bg-night-sky"
/>
</div>
<div
style={{
display: 'flex',
justifyContent: 'center',
}}
className="widget-subheading m-1"
>
<span data-tip={this.props.box.seller}>
Seller{' '}
{friendlyAddress(this.props.box.seller, 8)}
</span>
<i
onClick={() =>
this.showAddress(this.props.box.seller)
}
data-tip="see seller's address"
style={{
fontSize: '1.5rem',
marginLeft: '5px',
}}
className="pe-7s-help1 icon-gradient bg-night-sky"
/>
</div>
<div
style={{
display: 'flex',
justifyContent: 'center',
}}
className="widget-subheading m-1"
>
<span data-tip={this.props.box.bidder}>
Winner{' '}
{friendlyAddress(this.props.box.bidder, 8)}
</span>
<i
onClick={() =>
this.showAddress(this.props.box.bidder)
}
data-tip="see winner's address"
style={{
fontSize: '1.5rem',
marginLeft: '5px',
}}
className="pe-7s-help1 icon-gradient bg-night-sky"
/>
</div>
</div>
<ReactTooltip effect="solid" place="bottom"/>
<div className="widget-chart-wrapper chart-wrapper-relative">
<div
onClick={() => {
this.setState({infoModal: true})
}}
style={{
flex: 1,
cursor: 'pointer',
justifyContent: 'center',
alignItems: 'center',
height: '100px',
overflowY: 'hidden',
overflowX: 'hidden',
fontSize: '12px',
}}
>
<p className="text-primary mr-2 ml-2">
{this.props.box.description}
<Link
to={'/auction/active?type=other&artist=' + this.props.box.artist}
>
<b
>
{' '}- By {friendlyAddress(this.props.box.artist, 4)}
</b></Link>
</p>
</div>
</div>
</div>
<div className="widget-chart-wrapper chart-wrapper-relative">
<Button
onClick={() => this.openMyBids()}
outline
className="btn-outline-light m-2 border-0"
color="primary"
>
<i className="nav-link-icon lnr-layers"> </i>
<span>My Bids</span>
</Button>
<Button
onClick={() => this.showTx(this.props.box.finalTx? this.props.box.finalTx : this.props.box.spentTransactionId)}
outline
className="btn-outline-light m-2 border-0"
color="primary"
>
<i className="nav-link-icon lnr-exit-up"> </i>
<span>Final Transaction</span>
</Button>
<Button
onClick={() => {
this.setState({detailsModal: true});
}}
outline
className="btn-outline-light m-2 border-0"
color="primary"
>
<i className="nav-link-icon lnr-chart-bars"> </i>
<span>Details</span>
</Button>
</div>
<CardFooter>
<ResponsiveContainer height={60}>
<Col className="widget-description">
Up by
<span className="text-success pl-1 pr-1">
<FontAwesomeIcon icon={faAngleUp}/>
<span className="pl-1">
{this.props.box.increase}%
</span>
</span>
in comparision to the initial bid
</Col>
</ResponsiveContainer>
</CardFooter>
</div>
</Col>
);
}
Example #25
| Source File: myBlog.component.js From blogApp with MIT License | 4 votes |
|
render() {
const blog = this.props.blog;
return (
<div
className='col-12 col-md-6 col-lg-4 col-xl-3 mb-5'
key={blog._id}>
<Card className='p-1 m-1' id='cards'>
<Card>
<CardImg
top
width='100%'
src={blog.image}
alt='Card image cap'
className='img-fluid'
/>
<CardImgOverlay>
<h3>
<FontAwesomeIcon
className='text-danger'
icon={faHeart}
/>{" "}
{blog.likes.length}
</h3>
</CardImgOverlay>
</Card>
<CardBody>
<CardTitle className='text-primary'>
<h5>
{blog.title}
{this.state.liked ? (
<span
className='float-right '
style={{ cursor: "pointer" }}
onClick={this.toggleLike}
/>
) : (
<span
className='float-right '
onClick={this.toggleLike}>
{/* <FontAwesomeIcon
style={{
color: "rgba(0,0,0,0.2)",
cursor: "pointer",
}}
icon={faHeart}
className=''
/> */}
</span>
)}
</h5>
</CardTitle>
<CardSubtitle>
{"-"}
<em>@{blog.author.username}</em>
</CardSubtitle>
<br />
<CardText className=''>
{blog.body.substring(0, 50)}
{" ..."}
</CardText>
<div className='row justify-content-center'>
<Button
className='btn btn-sm col-5 mr-1'
color='success'>
<Link
to={{
pathname: `/blog/${blog._id}`,
blog: { blog },
}}
className='text-decoration-none text-white'>
Read More
</Link>
</Button>
<Button
className='col-5 btn btn-sm ml-1'
color='danger'
onClick={this.showLikes}>
Likes
</Button>
</div>
</CardBody>
{blog.date && (
<CardFooter className='small '>
<FontAwesomeIcon
icon={faCalendar}
className='mr-2'
/>
{new Intl.DateTimeFormat("en-US", {
month: "long",
day: "numeric",
year: "numeric",
hour: "numeric",
minute: "numeric",
}).format(Date.parse(blog.date))}
{/* {blog.date} */}
{this.state.isOpen && (
<div className='likes m-3'>
<h6>
<FontAwesomeIcon
className='text-danger'
icon={faHeart}
/>{" "}
{this.state.likes.length} Likes
</h6>
<ul className='list-group list-group-flush'>
{this.state.likes.map((user) => (
<li className='list-group-item py-2 pl-0'>
<FontAwesomeIcon
icon={faUserCircle}
// className='text-danger'
/>
{" "}
{user.username}
</li>
))}
</ul>
</div>
)}
</CardFooter>
)}
</Card>
</div>
);
}
Example #26
| Source File: blogList.component.js From blogApp with MIT License | 4 votes |
|
render() {
const blog = this.props.blog;
return (
<div
className='col-12 col-md-6 col-lg-4 col-xl-3 mb-5'
key={blog._id}>
<Card className='p-1 m-1 h-100' id='cards'>
<Card>
<CardImg
top
width='100%'
src={blog.image}
alt='Card image cap'
className='img-fluid'
/>
<CardImgOverlay>
<h3>
<FontAwesomeIcon
className='text-danger'
icon={faHeart}
/>{" "}
{this.state.likes}
</h3>
</CardImgOverlay>
</Card>
<CardBody className='d-flex flex-column'>
<CardTitle className='text-primary'>
<h5>
{blog.title}
{this.state.liked ? (
<span
className='float-right '
style={{ cursor: "pointer" }}
onClick={this.toggleLike}>
<FontAwesomeIcon
icon={faHeart}
className='text-danger'
/>
</span>
) : (
<span
className='float-right '
onClick={this.toggleLike}>
<FontAwesomeIcon
style={{
color: "rgba(0,0,0,0.2)",
cursor: "pointer",
}}
icon={faHeart}
className=''
/>
</span>
)}
</h5>
</CardTitle>
<CardSubtitle>
{"-"}
<em>@{blog.author.username}</em>
</CardSubtitle>
<br />
<CardText className=''>
{blog.body.substring(0, 70)}
{" ..."}
</CardText>
<Link
to={{
pathname: `/blog/${blog._id}`,
blog: { blog },
}}
className='text-decoration-none mt-auto'>
<Button className='btn btn-sm' color='success'>
Read More
</Button>
</Link>
</CardBody>
{blog.date && (
<CardFooter className='small '>
<FontAwesomeIcon
icon={faCalendar}
className='mr-2'
/>
{new Intl.DateTimeFormat("en-US", {
month: "long",
day: "numeric",
year: "numeric",
hour: "numeric",
minute: "numeric",
}).format(Date.parse(blog.date))}
{/* {blog.date} */}
</CardFooter>
)}
</Card>
</div>
);
}
Example #27
| Source File: blog.component.js From blogApp with MIT License | 4 votes |
|
render() {
return (
<div className='pt-2 px-3'>
<div className='row mr-auto ml-0 mb-4 mt-0'>
<Button
color='primary'
size='lg'
onClick={() => {
window.location.href = "/";
}}
style={{
width: "60px",
height: "60px",
borderRadius: "50%",
}}>
<FontAwesomeIcon icon={faArrowLeft} />
</Button>
</div>
{!this.state.loaded ? (
<ReactLoading
type={"spin"}
color={"orange"}
height={"100vh"}
width={"40%"}
className='loading'
/>
) : (
<Card id='blog' className='p-2 col-12 singleBlog'>
<CardImg
src={this.state.image}
alt='Card image cap'
className='img-thumbnail'
/>
<CardBody>
<CardTitle className='text-primary'>
<h5>
{this.state.title}
<span className='float-right text-secondary'>
{"-"}
<em>@{this.state.author.username}</em>
</span>
</h5>
</CardTitle>
{this.state.date !== "" && (
<CardSubtitle className='text-dark'>
<FontAwesomeIcon
icon={faCalendar}
className='mr-2'
/>
{new Intl.DateTimeFormat("en-US", {
month: "long",
day: "numeric",
year: "numeric",
hour: "numeric",
minute: "numeric",
}).format(Date.parse(this.state.date))}
<span className='float-right'>
<FontAwesomeIcon
className='text-danger'
icon={faHeart}
/>{" "}
{this.state.likes.length}
</span>
</CardSubtitle>
)}
<CardText>
<br />
{this.state.body}
</CardText>
</CardBody>
<CardFooter>
{this.props.user !== null &&
this.props.user._id ===
this.state.author.id && (
<div
style={{ display: "flex" }}
className='p-1'>
<Button
className='btn btn-danger mr-1'
style={{ width: "48%" }}
onClick={this.deleteBlog}>
Delete
</Button>{" "}
<Button
className='btn btn-warning ml-1'
style={{ width: "48%" }}
onClick={this.toggleModal}>
Edit
</Button>
</div>
)}
</CardFooter>
</Card>
)}
<Modal
isOpen={this.state.isModalOpen}
fade={false}
toggle={this.toggleModal}>
<ModalHeader toggle={this.toggleModal}>
Add a blog
</ModalHeader>
<Form onSubmit={this.onSubmit}>
<ModalBody>
<FormGroup>
<Label htmlFor='title'>title</Label>
<Input
type='text'
id='title'
onChange={this.ontitleChange}
value={this.state.title}
name='title'
/>
</FormGroup>
<FormGroup>
<Label htmlFor='imageURL'>imageURL</Label>
<Input
type='text'
id='imageURL'
onChange={this.onimgChange}
value={this.state.image}
name='imageURL'
/>
</FormGroup>
<FormGroup>
<Label htmlFor='body'>body</Label>
<Input
type='textarea'
id='body'
onChange={this.onbodyChange}
value={this.state.body}
name='body'
/>
</FormGroup>
</ModalBody>
<ModalFooter>
<Button
type='submit'
value='submit'
color='primary'>
UPDATE BLOG
</Button>
</ModalFooter>
</Form>
</Modal>
</div>
);
}
Example #28
| 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 #29
| 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>
);
}
