reactstrap#Row JavaScript Examples
The following examples show how to use
reactstrap#Row.
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: GithubProfileCard.jsx From developer-portfolio with Apache License 2.0 | 6 votes |
|
GithubProfileCard = ({ prof }) => {
return (
<Card className="section-lg bg-gradient-info shadow-lg border-0">
<Container className="">
<div className="p-2">
<Row className="">
<Col className="order-lg-2" lg="4">
<img
src={prof.avatar_url}
style={{ width: "200px" }}
alt=""
className="rounded-circle img-center img-fluid shadow shadow-lg--hover mb-4"
/>
</Col>
<Col lg="8" className="order-lg-1">
<h2 className="text-white">Reach Out to me!</h2>
<p className="lead text-white mt-3">
DISCUSS A PROJECT OR JUST WANT TO SAY HI? MY
INBOX IS OPEN FOR ALL
</p>
<p className="text-white mt-3">{prof.bio}</p>
<div className="my-3 icon-shape bg-gradient-white shadow rounded text-info">
<i className="ni ni-pin-3 text-info mr-2" />
{prof.location}
</div>
<SocialLinks />
</Col>
</Row>
</div>
</Container>
</Card>
);
}
Example #2
| Source File: Blog.js From Website2020 with MIT License | 6 votes |
|
/* eslint-disable react/prop-types */
function Blog(props) {
const topath = "/blogs/" + props.id;
console.log(topath);
return (
<>
<div className="section blog-card">
<div className="blog-content">
<h1 className="blog-heading" style={{ fontSize: "3.4rem" }}>{props.heading}</h1>
<div className="subheading-container">
<h3 className="blog-author" style={{ fontSize: "1.8rem" }}>{props.author}</h3>
<h3 className="blog-date" style={{ fontSize: "1.8rem" }}>{props.date}</h3>
</div>
<Row>
<Col lg="6">
<img
src={require("assets/img/blog/BlogImages/" + props.bannerImage)}
className="blog-banner-image"
></img>
</Col>
<Col style={{ display: "flex" }} lg="6">
<p className="blogs-description">
{props.abstract}
<Link to={topath} className="blogs-more-button">
Read More
</Link>
</p>
</Col>
</Row>
</div>
</div>
</>
);
}
Example #3
| Source File: Home.js From Merch-Dropper-fe with MIT License | 6 votes |
|
Home = ({ history }) => {
const classes = useStyles();
const { loginWithRedirect } = useAuth0();
let url;
if (process.env.REACT_APP_BASE_URL === "development") {
url = "http://localhost:3000/redirect";
} else {
url = "https://merchdropper.store/redirect";
}
const customSignup = () => {
loginWithRedirect({
redirect_uri: url,
signup: true,
});
}
return (
<div className={classes.jumboParent} >
<Row className={classes.row}>
<Col className={classes.column}>
<Media className={classes.image} object src="https://res.cloudinary.com/dze74ofbf/image/upload/v1591910999/couple_z0vlls.jpg"/>
</Col>
<Col className={classes.column} >
<h1 className={classes.text } style={{fontSize: "2.8rem"}} >Hassle free online store</h1>
<h2 style={{ fontSize: "1.5rem"}}>You handle the designs, we'll handle the rest.</h2>
<p style={{ textAlign: "center" }}>
<Button style={{background: "#4455ee", fontSize: 18, fontWeight: "bold", marginTop: 50}} className="letsGo"
onClick={customSignup}
>
Create Store
</Button>
</p>
</Col>
</Row>
<FAQ/>
</div>
);
}
Example #4
| Source File: Section.js From GB-GCGC with MIT License | 6 votes |
|
render(){
return (
<div class="container-fluid">
<Alert color="danger" className="Rounded p-3" >
<CardTitle align="left">{this.state.sect}</CardTitle>
<CardSubtitle align="left">
<Row>
<Col style={{"padding":"0px"}}>Section</Col>
<Col style={{"textAlign":"end"}}><Button onClick={()=>{this.handleModalsection()}}>Edit</Button></Col>
</Row>
</CardSubtitle>
<Modal show={this.state.show} onHide={()=>this.handleModalsection()} >
<Modal.Header closeButton>Edit Section</Modal.Header>
<Modal.Body>
<form onSubmit={this.onSubmitsection}>
<Table className="section" responsive>
<tbody>
<tr>
<td>
<input type="text" name="section" value={this.state.sect}
onChange={this.onChangesection} />
</td>
<td>
<div className={"form-group"}>
<input type={"submit"} value={"Submit"} className={"btn btn-primary"}/>
</div>
</td>
</tr>
</tbody>
</Table>
</form>
</Modal.Body>
</Modal>
</Alert>
</div>
);
}
Example #5
| Source File: Layout.js From HexactaLabs-NetCore_React-Initial with Apache License 2.0 | 6 votes |
|
Layout = props => (
<React.Fragment>
<NavMenu />
<Container fluid>
<Row>
<Sidebar {...props} />
<BodyContainer {...props} />
</Row>
</Container>
</React.Fragment>
)
Example #6
| Source File: Footer.js From agenda with MIT License | 6 votes |
|
Footer = () => (
<footer
className="hidden-print"
>
<Row>
<Col sm={4} md={4} className="m-0 p-0 mt-2 ml-1 pl-1">
<div className="version small">
Version
{VERSION}
<br/>
</div>
</Col>
<Col>
<quote className="small">
<a href="https://www.indec.gob.ar " target="_blank" rel="noopener noreferrer">INDEC</a>
- 2020
</quote>
</Col>
</Row>
</footer>
)
Example #7
| Source File: App.js From ReactJS-Projects with MIT License | 6 votes |
|
function App() {
const [details, setDetails] = useState({});
const fetchFromAPI = async () => {
const { data } = await Axios.get('https://randomuser.me/api/')
console.log(data)
const details = data.results[0]
setDetails(details)
}
useEffect(() => {
fetchFromAPI()
}, [])
return (
<Container fluid className="p-4 bg-primary App">
<Row>
<Col md={4} className="offset-md-4 mt-4">
<ProfileCard details={details} />
</Col>
</Row>
</Container>
);
}
Example #8
| Source File: index.js From HexactaLabs-NetCore_React-Level2 with Apache License 2.0 | 6 votes |
|
Create = ({ create: onSubmit, goBack: onCancel }) => {
return (
<Container fluid>
<Row>
<h2>Nuevo Tipo Producto</h2>
</Row>
<Row>
<Col>
<Form onSubmit={onSubmit} handleCancel={onCancel} />
</Col>
</Row>
</Container>
);
}
Example #9
| Source File: banner.js From web-frontend with MIT License | 6 votes |
|
render() {
return (
<div id="banner">
<Container fluid>
<Row className="jumbotronn" id="banner">
<Col>
<h2>Halo,</h2>
<h1>wong kito!</h1>
<p>
Palembang Digital (Patal)
<span className="bold">
{" "}
adalah grup berbagi informasi seputar IT Development &
Digital di daerah Sumatera Selatan.
</span>
</p>
</Col>
<Col sm="6" className="logo">
<img src={"/logo.png"} width="180px" alt="logo" />
</Col>
</Row>
<div className="scroll-down">
<Link to="join" smooth={true} duration={1000}>
<img src={"/icons/down.png"} alt="scroll" width="17px"></img>
</Link>
</div>
</Container>
</div>
);
}
Example #10
| Source File: MindMap.js From hivemind with Apache License 2.0 | 6 votes |
|
MindMap = ({ data, edata, timestamp, jump }) => (
<>
<Row className="my-1">
<Col>
<Canvas data={data} timestamp={timestamp} events={edata} />
</Col>
</Row>
<Row className="my-1">
<Col>
<Timeline data={edata} timestamp={timestamp} jump={jump} />
</Col>
</Row>
</>
)
Example #11
| Source File: Breadcrumb.js From gedge-platform with Apache License 2.0 | 6 votes |
|
render() {
const itemsLength = this.props.breadcrumbItems.length;
return (
<React.Fragment>
<Row>
<Col xs={12}>
<div className="page-title-box d-flex align-items-center justify-content-between">
<h4 className="mb-0">{this.props.t(this.props.title)}</h4>
<div className="page-title-right">
<Breadcrumb listClassName="m-0">
{
this.props.breadcrumbItems.map((item, key) =>
key+1 === itemsLength ?
<BreadcrumbItem key={key} active>{this.props.t(item.title)}</BreadcrumbItem>
: <BreadcrumbItem key={key} ><Link to={item.link}>{this.props.t(item.title)}</Link></BreadcrumbItem>
)
}
</Breadcrumb>
</div>
</div>
</Col>
</Row>
</React.Fragment>
);
}
Example #12
| Source File: Education.jsx From developer-portfolio with Apache License 2.0 | 5 votes |
|
Education = () => {
return (
<section className="section pb-0 bg-gradient-info my-5">
<Container>
<div className="d-flex px-3">
<div>
<div className="icon icon-lg icon-shape bg-gradient-white shadow rounded-circle text-info">
<i className="ni ni-books text-info" />
</div>
</div>
<div className="pl-4">
<h4 className="display-3 text-white">Education</h4>
</div>
</div>
<Row className="row-grid align-items-center">
{educationInfo.map((info) => {
return (
<Col
className="order-lg-1"
lg="6"
key={info.schoolName}
>
<EducationCard education={info} />
</Col>
);
})}
</Row>
</Container>
<div className="separator separator-bottom separator-skew zindex-100">
<svg
xmlns="http://www.w3.org/2000/svg"
preserveAspectRatio="none"
version="1.1"
viewBox="0 0 2560 100"
x="0"
y="0"
>
<polygon
className="fill-white"
points="2560 0 2560 100 0 100"
/>
</svg>
</div>
</section>
);
}
Example #13
| Source File: DemoFooter.js From Website2020 with MIT License | 5 votes |
|
function DemoFooter() {
return (
<footer className="footer footer-black footer-white">
<Container>
<Row>
<nav className="footer-nav">
<ul>
<li>
<a
href="https://www.creative-tim.com?ref=pkr-footer"
target="_blank"
>
Creative Tim
</a>
</li>
<li>
<a
href="http://blog.creative-tim.com/?ref=pkr-footer"
target="_blank"
>
Blog
</a>
</li>
<li>
<a
href="https://www.creative-tim.com/license?ref=pkr-footer"
target="_blank"
>
Licenses
</a>
</li>
</ul>
</nav>
<div className="credits ml-auto">
<span className="copyright">
© {new Date().getFullYear()}, made with{" "}
<i className="fa fa-heart heart" /> by Creative Tim
</span>
</div>
</Row>
</Container>
</footer>
);
}
Example #14
| Source File: MusicData.js From Music-Hoster-FrontEnd-Using-React with MIT License | 5 votes |
|
// download(id){
// var token = "Bearer " + localStorage.getItem("jwt");
// let url = '/getpostbyid/' + id;
// fetch(url,{
// headers :{
// "Authorization" : token,
// }
// })
// .then(response => {
// response.blob().then(blob => {
// let url = window.URL.createObjectURL(blob);
// let a = document.createElement('a');
// a.href = url;
// a.download = 'employees.json';
// a.click();
// });
// //window.location.href = response.url;
// });
// }
render(){
let peopleCards = this.state.files.map(data => {
return (
<Col xs="3" key = {data.musicId} className="col">
<div className="div">
<Card>
<i class="fas fa-file-alt"></i>
{/* <Button color="danger" className="btn" onClick={() => this.download(data.musicId)}>Download</Button> */}
<CardBody className="cbody">
<CardTitle><h4 className="tag">{data.tag}</h4></CardTitle>
<CardSubtitle className="name">{data.name}</CardSubtitle>
<CardText className="description">{data.description}</CardText>
<Button color="danger" className="btn" onClick={() => this.delete(data.musicId)}>Delete</Button>
</CardBody>
</Card>
</div>
</Col>
)
})
return (
<Container fluid="md" className="container">
<Row xs="3" className="row">
{peopleCards}
</Row>
<ToastContainer
position="top-center"
autoClose={5000}
hideProgressBar={false}
newestOnTop={false}
closeOnClick
rtl={false}
pauseOnFocusLoss
draggable
pauseOnHover
/>
</Container>
)
}
Example #15
| Source File: ProductDisplayDomain.js From Merch-Dropper-fe with MIT License | 5 votes |
|
ProductDisplayDomain = ({ products, addToCart, match, location }) => {
const [shirts, setShirts] = useState([]);
const [connected, setConnected] = useState(false)
let storeID = 0;
const { domain_name } = useParams();
localStorage.setItem("domain_name", domain_name);
useEffect(() => {
axiosWithEnv()
.get(`/api/stores/domain/${domain_name}`)
// axios
// .get(
// `https://merch-dropper.herokuapp.com/api/stores/domain/${domain_name}`
// )
.then((res) => {
storeID = res.data.id;
localStorage.setItem("storeID", storeID);
setConnected(res.data.active)
})
.catch((err) => {
console.log(err);
})
.finally(() => {
axiosWithEnv()
.get(`/api/products/store/${storeID}`)
// axios
// .get(
// `https://merch-dropper.herokuapp.com/api/products/store/${storeID}`
// )
.then((res) => {
setShirts(res.data);
})
.catch((err) => {
console.log(err.response);
});
});
}, [match.params, domain_name]);
return (
<>
{shirts.length !== 0 && connected ? (
<Container style={{display: "flex"}}>
<Row>
{/* <Col > */}
{shirts.map((product, id) => (
<ProductCard
key={id}
url={product.thumbnailURL}
name={product.productName}
design={product.design}
price={product.price}
product={product}
addToCart={addToCart}
/>
))}
{/* </Col> */}
</Row>
</Container>
) : (
<div style={{ height: "65vh", textAlign: "center" }}>
<h2>? SHOP UNDER CONSTRUCTION ?</h2>
<h4>Come back at launch!</h4>
</div>
)}
</>
);
}
Example #16
| Source File: Assessment.js From GB-GCGC with MIT License | 5 votes |
|
render(){
return (
<div style={{backgroundColor:'#C7CCDB'}}>
<Container>
<Row>
<NavLink tag={Link} to={"/AddStudent"}>
<Button
style={{
backgroundColor: "#2A324B",
color: "white",
borderColor: "#2A324B",
}}
>
Add Assessment
</Button>
</NavLink>
</Row>
<Row>
<Col align="left" styles={{padding:'10'}}>
<div>
<ReactHTMLTableToExcel
className="btn btn-secondary"
table="Data"
filename="Filtered Students"
sheet="Sheet1"
buttonText="EXCEL"
style={{backgroundColor:"#2A324B",color:"white",borderColor:"#2A324B"}}
/>
</div>
</Col>
</Row>
<br/>
<Row>
<Table id="Data" responsive striped style={{backgroundColor:'white'}}>
<thead style={{backgroundColor:'#2A324B',color:'white'}}>
<tr>
<th>Sno</th>
<th align="left">Name of the Assessment</th>
<th align="left">YOP</th>
<th>Date Of Assessment</th>
<th>No of students attended</th>
<th>No of Absentees</th>
<th>Highest Score</th>
<th>Average Score</th>
<th>Least Score</th>
<th></th>
</tr>
</thead>
<tbody>
{this.StudentsList()}
</tbody>
</Table>
</Row>
</Container>
</div>
)
}
Example #17
| Source File: index.js From HexactaLabs-NetCore_React-Initial with Apache License 2.0 | 5 votes |
|
Presentation = props => {
return (
<Container fluid>
<Row className="my-1">
<Col>
<h1>Proveedores</h1>
</Col>
</Row>
<Row>
<Col>
<Search
handleFilter={props.handleFilter}
submitFilter={props.submitFilter}
clearFilter={props.clearFilter}
filters={props.filters}
/>
</Col>
</Row>
<Row className="my-1">
<Col>
<Button
className="provider__button"
color="primary"
aria-label="Agregar"
onClick={() => props.push(props.urls.create)}
>
<FaPlus className="provider__button-icon" />
AGREGAR
</Button>
</Col>
</Row>
<Row className="my-3">
<Col>
<ReactTable
{...props}
data={props.data}
loading={props.dataLoading}
columns={columns}
defaultPageSize={props.defaultPageSize}
className="-striped -highlight"
/>
</Col>
</Row>
</Container>
);
}
Example #18
| Source File: Footer.js From covidAnalytics with MIT License | 5 votes |
|
render(){
return (
<div className="container">
<Row >
<Col md="12" py="5">
<div className=" text-center py-3 ">
<p class=" footerfonts mr-md-5 mr-3 fa-2x " >Dashboard desenvolvida pelo time C3 Analytics,
grupo pertencente a frente tecnológica ITeCCorona, uma iniciativa da FURG em parceria
com outras instituições para ajudar na prevenção e no combate do Covid-19.
</p>
</div>
</Col>
</Row>
<Col Col md="12" py="5">
<div class=" footerfonts text-center py-3 font-weight-bold">© 2020
<Link to="/" className="mr-md-5 mr-3 ml-2 fa-2x footerfonts LinkTitle">ITeCCorona
</Link>
<a href="http://www.riogrande.rs.gov.br/corona/" class="mr-md-5 mr-3 fa-2x footerfonts LinkTitle" >Portal
</a>
<Link to="/about" class="mr-md-5 mr-3 fa-2x footerfonts LinkTitle" >Sobre nós
</Link>
<a href="https://github.com/Gabriellavoura/covidAnalytics" class="mr-md-5 mr-3 fa-2x footerfonts LinkTitle" >Github
</a>
<a href="https://brasil.io/home" class="mr-md-5 mr-3 fa-2x footerfonts LinkTitle" >Dados
</a>
</div>
</Col>
{/* Logos*/}
<Col md="12" py="5">
<div className="text-center py-3">
<a href="https://www.furg.br/">
<img class="furgh" src={logoFurg} alt="Logo Furg"/></a>
<a href="http://www.c3.furg.br/">
<img class=" c3h"src={logoC3} alt="Logo C3"/></a>
</div>
</Col>
</div>
);
}
Example #19
| Source File: applicants.page.js From hiring-system with GNU General Public License v3.0 | 5 votes |
|
ApplicantsPage = () => {
return (
<div className="container mt-4 mb-4">
<Jumbotron fluid className="border-bottom rounded-top">
<Container fluid>
<h1 className="display-5">Applicants</h1>
<p className="lead float-right font-weight-bold">
<strong>Position</strong>: Senior Developer
</p>
</Container>
</Jumbotron>
<div>
<Row>
{/* Map through all the data */}
{listOfApplicants.map((applicant) => (
<Col sm="6 mt-4" key={applicant.id}>
<Card body>
<CardTitle>
<h3>{applicant.name}</h3>
<hr />
</CardTitle>
<CardText>
<Row className="mt-2">
<Col sm="6">
<strong>Email:</strong>
</Col>
<Col>{applicant.email}</Col>
</Row>
<Row className="mt-2">
<Col sm="6">
<strong>Contact:</strong>
</Col>
<Col>7{applicant.contact}</Col>
</Row>
<Row className="mt-2">
<Col sm="6">
<strong>Time Zone</strong>
</Col>
<Col>{applicant.timeZone}</Col>
</Row>
<Row className="mt-2">
<Col sm="6">
<strong>Availibility</strong>
</Col>
<Col>{applicant.availability}</Col>
</Row>
</CardText>
<ButtonToggle color="primary">View Resume</ButtonToggle>
</Card>
</Col>
))}
{/* end of data mapping */}
</Row>
</div>
</div>
);
}
Example #20
| Source File: Component.js From agenda with MIT License | 5 votes |
|
render() {
const {contacts} = this.props;
return (
<Container>
<Row>
<Col>
<Button
className="float-right"
color="primary"
size="lg"
tag={Link}
to="/contacts/new"
>
Nuevo contacto
</Button>
</Col>
</Row>
<hr/>
<Row>
<Col>
<Table bordered condensed hover stripped size="sm">
<thead>
<tr>
<th>Nombre</th>
<th>Apellido</th>
<th>Email</th>
<th>Genero</th>
<th>Fecha de nacimiento</th>
<th>Numero de telefono</th>
<th>Direccion</th>
<th>Cargo</th>
<th>Notas</th>
<th>Acciones</th>
</tr>
</thead>
<tbody>
{contacts.map(contact => (
<tr>
<td>{contact.firstName}</td>
<td>{contact.lastName}</td>
<td>{contact.email}</td>
<td>{contact.gender}</td>
<td>{contact.birthDate}</td>
<td>{contact.phoneNumber}</td>
<td>{contact.address}</td>
<td>{contact.role}</td>
<td>{contact.notes}</td>
<td>
<Link to={`/contacts/${contact.id}`}>Edit</Link>
</td>
</tr>
))}
</tbody>
</Table>
</Col>
</Row>
</Container>
);
}
Example #21
| Source File: ViewContact.js From ReactJS-Projects with MIT License | 5 votes |
|
ViewContact = () => {
const { state } = useContext(ContactContext);
const { contact } = state;
return (
<Container>
<Row className="mt-5 mb-5">
<Col md="5" className="offset-md-3">
<Card className="pt-3 pb-5">
<CardBody className="text-center ">
<img
height="150"
width="150"
className="cardImg profile border-danger"
src={contact?.picture}
/>
<CardTitle className="text-primary mt-3">
<h1>{contact?.name}</h1>
</CardTitle>
<CardSubtitle>
<h3>
<FaPhone className="mr-2" />
{contact?.phoneNumber}
</h3>
</CardSubtitle>
<a
className="btn btn-primary btn-block"
target="_blank"
href={`mailto:{contact?.email}`}
>
<FaEnvelope className="icon mr-2" />
{contact?.email}
</a>
<a
className="btn btn-primary btn-block"
target="_blank"
href={`https://maps.google.com/?=${contact?.address}`}
>
<FaMapMarkerAlt className="icon mr-2" />
{contact?.address}
</a>
</CardBody>
</Card>
</Col>
</Row>
</Container>
);
}
Example #22
| Source File: index.js From HexactaLabs-NetCore_React-Level2 with Apache License 2.0 | 5 votes |
|
ProductView = ({ type = {}, push, match }) => {
return (
<Container fluid>
<div className="block-header">
<h1>{type.initials}</h1>
</div>
<div className="info-box">
<Row>
<Col lg="2">Id</Col>
<Col>{type.id}</Col>
</Row>
<Row>
<Col lg="2">Iniciales</Col>
<Col>{type.initials}</Col>
</Row>
<Row>
<Col lg="2">Descripción</Col>
<Col>{type.description}</Col>
</Row>
</div>
<div className="product-view__button-row">
<Button title="Editar" aria-label="Editar"
className="product-form__button"
color="primary"
onClick={() => push(`/product-type/update/${match.params.id}`)}
>
<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 576 512" class="product-list__button-icon" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M402.6 83.2l90.2 90.2c3.8 3.8 3.8 10 0 13.8L274.4 405.6l-92.8 10.3c-12.4 1.4-22.9-9.1-21.5-21.5l10.3-92.8L388.8 83.2c3.8-3.8 10-3.8 13.8 0zm162-22.9l-48.8-48.8c-15.2-15.2-39.9-15.2-55.2 0l-35.4 35.4c-3.8 3.8-3.8 10 0 13.8l90.2 90.2c3.8 3.8 10 3.8 13.8 0l35.4-35.4c15.2-15.3 15.2-40 0-55.2zM384 346.2V448H64V128h229.8c3.2 0 6.2-1.3 8.5-3.5l40-40c7.6-7.6 2.2-20.5-8.5-20.5H48C21.5 64 0 85.5 0 112v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V306.2c0-10.7-12.9-16-20.5-8.5l-40 40c-2.2 2.3-3.5 5.3-3.5 8.5z"></path></svg>
</Button>
<Button title="Eliminar" aria-label="Eliminar"
className="product-form__button"
color="danger"
onClick={() => push(`/product-type/view/${match.params.id}/remove`)}
>
<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 448 512" class="product-list__button-icon" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M432 32H312l-9.4-18.7A24 24 0 0 0 281.1 0H166.8a23.72 23.72 0 0 0-21.4 13.3L136 32H16A16 16 0 0 0 0 48v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16V48a16 16 0 0 0-16-16zM53.2 467a48 48 0 0 0 47.9 45h245.8a48 48 0 0 0 47.9-45L416 128H32z"></path></svg>
</Button>
<Button title="Volver" aria-label="Volver"
outline
className="product-form__button"
color="secondary"
onClick={() => push(`/product-type`)}
>
<svg xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 470 474" width="20px" height="16px" xmlSpace="preserve">
<path d="M384.834,180.699c-0.698,0-348.733,0-348.733,0l73.326-82.187c4.755-5.33,4.289-13.505-1.041-18.26 c-5.328-4.754-13.505-4.29-18.26,1.041l-82.582,92.56c-10.059,11.278-10.058,28.282,0.001,39.557l82.582,92.561 c2.556,2.865,6.097,4.323,9.654,4.323c3.064,0,6.139-1.083,8.606-3.282c5.33-4.755,5.795-12.93,1.041-18.26l-73.326-82.188 c0,0,348.034,0,348.733,0c55.858,0,101.3,45.444,101.3,101.3s-45.443,101.3-101.3,101.3h-61.58 c-7.143,0-12.933,5.791-12.933,12.933c0,7.142,5.79,12.933,12.933,12.933h61.58c70.12,0,127.166-57.046,127.166-127.166 C512,237.745,454.954,180.699,384.834,180.699z"/>
</svg>
</Button>
</div>
</Container>
);
}
Example #23
| Source File: footer.js From web-frontend with MIT License | 5 votes |
|
render() {
return (
<div id="footer">
<div className="kontak">
<Container className="footer" fluid>
<Row className="cp">
<Col lg="3">
<a
href="https://api.whatsapp.com/send?phone=6282282512539"
target="_blank"
rel="noreferrer">
<FontAwesomeIcon icon={faWhatsapp} /> <p>0822-825-12539</p>{" "}
</a>
</Col>
<Col lg="3">
<a
href="https://www.instagram.com/palembang_digital/"
target="_blank"
rel="noreferrer">
<FontAwesomeIcon icon={faInstagram} />{" "}
<p>palembang_digital</p>
</a>
</Col>
<Col lg="3">
<a
href="https://www.youtube.com/channel/UCc2Wluk3SISRSNzNlxaQ1Fw"
target="_blank"
rel="noreferrer">
<FontAwesomeIcon icon={faYoutubeSquare} />{" "}
<p>palembang_digital</p>
</a>
</Col>
<Col lg="3" className="ig">
<a
href="mailto:[email protected]"
target="_blank"
rel="noreferrer">
<FontAwesomeIcon icon={faEnvelopeSquare} />{" "}
<p>[email protected]</p>
</a>
</Col>
</Row>
<hr></hr>
<p>Palembang Digital © 2020</p>
</Container>
</div>
</div>
);
}
Example #24
| Source File: view.js From hivemind with Apache License 2.0 | 5 votes |
|
PopperCard = ({ el, poppers }) => {
const data = el.data()
let path
if (!data.isRoot) {
path = getPath(el).join(' ⟶ ')
}
return (
<Card className="border-dark">
<CardBody>
<CardTitle
tag="h5"
className="mw-100 mb-4"
style={{ minWidth: '50vw' }}
>
{data.title}
<span>
<small className="text-muted">
({data.isRoot ? 'ROOT NODE' : path})
</small>
</span>
<CloseButton
divKey={`popper-${el.id()}`}
popperKey={el.id()}
poppers={poppers}
/>
</CardTitle>
<CardSubtitle>
<Row>
<Col className="mb4">Created By: {data.createdBy}</Col>
{data.lastUpdatedBy ? (
<Col className="mb4">Last Updated By: {data.lastUpdatedBy}</Col>
) : null}
</Row>
<hr />
</CardSubtitle>
<CardText tag="div">
{data.summary ? (
<>
<Row>
<h5>Summary</h5>
</Row>
<Row>{data.summary}</Row>
</>
) : null}
{data.content ? (
<>
<hr />
<Row>{data.content}</Row>
</>
) : null}
{data.audio ? (
<>
<Row>
<h5>Audio</h5>
</Row>
<Row>
<audio controls>
<source src={data.audio}/>
</audio>
</Row>
</>
) : null}
</CardText>
</CardBody>
</Card>
)
}
Example #25
| Source File: showActives.js From ErgoAuctionHouse with MIT License | 5 votes |
|
render() {
const listItems = this.state.auctions.map((box) => {
return (
<ActiveAuction
box={box}
assemblerModal={this.toggleAssemblerModal}
updateParams={this.props.updateParams}
preload={this.props.preload}
/>
);
});
return (
<Fragment>
<SendModal
isOpen={this.state.assemblerModal}
close={this.toggleAssemblerModal}
bidAmount={this.state.bidAmount}
isAuction={this.state.isAuction}
bidAddress={this.state.bidAddress}
currency={this.state.currency}
/>
{!this.state.loading && this.state.auctions.length === 0 && (
<strong
style={{
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
}}
>
No Active Auctions
</strong>
)}
{this.state.loading ? (
<div
style={{
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
}}
>
<PropagateLoader
css={override}
size={20}
color={'#0086d3'}
loading={this.state.loading}
/>
</div>
) : (
<Row>{listItems}</Row>
)}
</Fragment>
);
}
Example #26
| Source File: Charts.js From sofia-react-template with MIT License | 5 votes |
|
Charts = () => {
return (
<div>
<Row>
<Col className="pr-grid-col" xs={12} lg={6}>
<Row className="gutter mb-4">
<Col>
<Widget className="widget-p-md">
<div className="headline-2 mb-3">Line Column Mixed Chart</div>
<ApexLineColumnChart/>
</Widget>
</Col>
</Row>
<Row className="gutter mb-4">
<Col>
<Widget className="widget-p-md">
<div className="headline-2 mb-3">Column Area Mixed Chart</div>
<ApexColumnAreaChart/>
</Widget>
</Col>
</Row>
</Col>
<Col className="pl-grid-col pr-grid-col" xs={12} lg={6}>
<Row className="gutter mb-4 pl-grid-row pr-grid-row">
<Col xs={12} xl={6}>
<Widget className="widget-p-md">
<div className="headline-2 mb-3">Donut chart</div>
<RechartsPieChart/>
</Widget>
</Col>
<Col className="mt-4 mt-xl-0" xs={12} xl={6}>
<Widget className="widget-p-md">
<div className="headline-2">Radar Chart</div>
<ApexRadarChart/>
</Widget>
</Col>
</Row>
<Row>
<Col>
<Widget className="widget-p-md">
<div className="headline-2 mb-3">Line Chart</div>
<ApexLineChart/>
</Widget>
</Col>
</Row>
</Col>
</Row>
</div>
);
}
Example #27
| Source File: AuthLockScreen.js From gedge-platform with Apache License 2.0 | 5 votes |
|
render() {
return (
<React.Fragment>
<div className="home-btn d-none d-sm-block">
<Link to="/"><i className="mdi mdi-home-variant h2 text-white"></i></Link>
</div>
<div>
<Container fluid className="p-0">
<Row className="no-gutters">
<Col lg={4}>
<div className="authentication-page-content p-4 d-flex align-items-center min-vh-100">
<div className="w-100">
<Row className="justify-content-center">
<Col lg={9}>
<div>
<div className="text-center">
<div>
<Link to="/" className="logo"><img src={logodark} height="20" alt="logo" /></Link>
</div>
<h4 className="font-size-18 mt-4">Lock screen</h4>
<p className="text-muted">Enter your password to unlock the screen!</p>
</div>
<div className="p-2 mt-5">
<AvForm className="form-horizontal">
<div className="user-thumb text-center mb-5">
<img src={avatar2} className="rounded-circle img-thumbnail avatar-md" alt="thumbnail" />
<h5 className="font-size-15 mt-3">Jacob Lopez</h5>
</div>
<FormGroup className="auth-form-group-custom mb-4">
<i className="ri-lock-2-line auti-custom-input-icon"></i>
<Label for="userpassword">Password</Label>
<AvField name="password" validate={{ required: true }} type="password" className="form-control" id="userpassword" placeholder="Enter password" />
</FormGroup>
<div className="mt-4 text-center">
<Button color="primary" className="w-md waves-effect waves-light" type="submit">Unlock</Button>
</div>
</AvForm>
</div>
<div className="mt-5 text-center">
<p>Not you ? return <Link to="auth-login" className="font-weight-medium text-primary"> Log in </Link> </p>
<p>© 2021 Gedge Platform</p>
</div>
</div>
</Col>
</Row>
</div>
</div>
</Col>
<Col lg={8}>
<div className="authentication-bg">
<div className="bg-overlay"></div>
</div>
</Col>
</Row>
</Container>
</div>
</React.Fragment>
);
}
Example #28
| Source File: Navigation.jsx From developer-portfolio with Apache License 2.0 | 4 votes |
|
Navigation = () => {
const [collapseClasses, setCollapseClasses] = useState("");
const onExiting = () => setCollapseClasses("collapsing-out");
const onExited = () => setCollapseClasses("");
useEffect(() => {
let headroom = new Headroom(document.getElementById("navbar-main"));
// initialise
headroom.init();
});
return (
<>
<header className="header-global">
<Navbar
className="navbar-main navbar-transparent navbar-light headroom"
expand="lg"
id="navbar-main"
>
<Container>
<NavbarBrand href="/" className="mr-lg-5">
<h2 className="text-white" id="nav-title">
{greetings.name}
</h2>
</NavbarBrand>
<button
className="navbar-toggler"
aria-label="navbar_toggle"
id="navbar_global"
>
<span className="navbar-toggler-icon" />
</button>
<UncontrolledCollapse
toggler="#navbar_global"
navbar
className={collapseClasses}
onExiting={onExiting}
onExited={onExited}
>
<div className="navbar-collapse-header">
<Row>
<Col className="collapse-brand" xs="6">
<h3
className="text-black"
id="nav-title"
>
{greetings.name}
</h3>
</Col>
<Col className="collapse-close" xs="6">
<button
className="navbar-toggler"
id="navbar_global"
>
<span />
<span />
</button>
</Col>
</Row>
</div>
<Nav
className="align-items-lg-center ml-lg-auto"
navbar
>
{socialLinks.facebook && (
<NavItem>
<NavLink
rel="noopener"
aria-label="Facebook"
className="nav-link-icon"
href={socialLinks.facebook}
target="_blank"
>
<i className="fa fa-facebook-square" />
<span className="nav-link-inner--text d-lg-none ml-2">
Facebook
</span>
</NavLink>
</NavItem>
)}
{socialLinks.instagram && (
<NavItem>
<NavLink
rel="noopener"
aria-label="Instagram"
className="nav-link-icon"
href={socialLinks.instagram}
target="_blank"
>
<i className="fa fa-instagram" />
<span className="nav-link-inner--text d-lg-none ml-2">
Instagram
</span>
</NavLink>
</NavItem>
)}
{socialLinks.github && (
<NavItem>
<NavLink
rel="noopener"
aria-label="Github"
className="nav-link-icon"
href={socialLinks.github}
target="_blank"
>
<i className="fa fa-github" />
<span className="nav-link-inner--text d-lg-none ml-2">
Github
</span>
</NavLink>
</NavItem>
)}
{socialLinks.linkedin && (
<NavItem>
<NavLink
rel="noopener"
aria-label="Linkedin"
className="nav-link-icon"
href={socialLinks.linkedin}
target="_blank"
>
<i className="fa fa-linkedin" />
<span className="nav-link-inner--text d-lg-none ml-2">
Linkedin
</span>
</NavLink>
</NavItem>
)}
{socialLinks.twitter && (
<NavItem>
<NavLink
rel="noopener"
aria-label="Twitter"
className="nav-link-icon"
href={socialLinks.twitter}
target="_blank"
>
<i className="fa fa-twitter-square" />
<span className="nav-link-inner--text d-lg-none ml-2">
Twitter
</span>
</NavLink>
</NavItem>
)}
</Nav>
</UncontrolledCollapse>
</Container>
</Navbar>
</header>
</>
);
}
Example #29
| Source File: Footer.js From Website2020 with MIT License | 4 votes |
|
function Footer() {
return (
<footer className="footer-new">
<Container>
<Row className="footer-row">
<Col lg="6" md="7" className="logo-description mr-auto ml-auto">
<Row className="align-items-center">
<Col xs="4" className="my-auto ml-auto mr-auto">
<img src={logo} className="w-100" style={{ maxWidth: '150px' }} />
</Col>
<Col xs="5" className="my-auto mr-auto ml-auto">
<div className="footer-heading-primary">Team AUV-IITK</div>
<div className="footer-address">
AUV Room, Hall-2,
<br />Indian Institute of Technology Kanpur,
<br />Uttar Pradesh-208016, India
</div>
</Col>
</Row>
</Col>
<Col lg="5" md="6" className="quick-social-links mr-auto ml-auto my-auto">
<Row>
<Col md="12" xs="5">
<div className="footer-links-heading">Quick Links</div>
<NavLink to="/landing-page" tag={Link} className="footer-nav-link">
Home
</NavLink>
<NavLink to="/about-us" tag={Link} className="footer-nav-link">
About Us
</NavLink>
<NavLink to="/team" tag={Link} className="footer-nav-link">
Team
</NavLink>
<NavLink to="/vehicles/anahita" tag={Link} className="footer-nav-link">
Vehicles
</NavLink>
<NavLink to="/contact-us" tag={Link} className="footer-nav-link">
Contact Us
</NavLink>
</Col>
<Col md="12" xs="12" className="my-auto text-center mr-auto ml-auto">
<div className="nav-icons-container">
<NavLink
data-placement="bottom"
href="https://github.com/AUV-IITK"
target="_blank"
title="Star on GitHub"
className="footer-nav-icon"
>
<i className="fa fa-github" />
</NavLink>
<NavLink
data-placement="bottom"
href="https://www.facebook.com/auviitk"
target="_blank"
title="Follow us on Facebook"
className="footer-nav-icon"
>
<i className="fa fa-facebook-square" />
</NavLink>
<NavLink
data-placement="bottom"
href="https://www.linkedin.com/company/auv-iitk/"
target="_blank"
title="Reach Us on Linkedin"
className="footer-nav-icon"
>
<i className="fa fa-linkedin-square" />
</NavLink>
<NavLink
data-placement="bottom"
href="mailto:[email protected]"
target="_blank"
title="Write Us"
className="footer-nav-icon"
>
<i className="fa fa-envelope-square" />
</NavLink>
<NavLink
data-placement="bottom"
href="https://www.instagram.com/auviitk/"
target="_blank"
title="Follow us on Instagram
"
className="footer-nav-icon"
>
<i className="fa fa-instagram" />
</NavLink>
</div>
</Col>
</Row>
</Col>
</Row>
</Container>
</footer>
);
}
