reactstrap#Container JavaScript Examples
The following examples show how to use
reactstrap#Container.
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: IndexHeader.js From Website2020 with MIT License | 6 votes |
|
function IndexHeader () {
return (
<>
<div
className="page-header section-dark"
style={{
backgroundImage:
'url(' + require('assets/img/antoine-barres.jpg') + ')'
}}
>
<div className="filter"/>
<div className="content-center">
<Container>
<div className="title-brand">
<h1 className="presentation-title">Paper Kit React</h1>
<div className="fog-low">
<img alt="..." src={require('assets/img/fog-low.png')}/>
</div>
<div className="fog-low right">
<img alt="..." src={require('assets/img/fog-low.png')}/>
</div>
</div>
<h2 className="presentation-subtitle text-center">
Make your mark with a Free Bootstrap 4 (Reactstrap) UI Kit!
</h2>
</Container>
</div>
</div>
</>
)
}
Example #3
| Source File: ProductDisplay.js From Merch-Dropper-fe with MIT License | 6 votes |
|
ProductDisplay = ({ products, addToCart }) => {
const [shirts, setShirts] = useState([]);
useEffect(() => {
axiosWithEnv().get('/api/products')
.then(res => {
setShirts(res.data);
})
}, []);
return (
<Container fluid="true" className="container-margin">
{/*<NavBar />*/}
<Row>
<Col sm="7" className="flex ">
{shirts.map((product, id) => (
<ProductCard
url={product.thumbnailURL}
name={product.productName}
design={product.design}
price={product.price}
product={product}
addToCart={addToCart}
/>
))}
</Col>
</Row>
</Container>
);
}
Example #4
| Source File: Content.js From GB-GCGC with MIT License | 6 votes |
|
Content = ({ sidebarIsOpen, toggleSidebar }) => (
<Container
fluid
className={classNames("content", { "is-open": sidebarIsOpen })}
>
<Topbar toggleSidebar={toggleSidebar} />
<Switch>
<Route exact path="/" component={() => "Hello"} />
<Route
exact
path="/home"
component={() => (
<div>
<Row className="pl-3">
<h4 className="pr-3">Glimpse - </h4>
<Example />
</Row>
<hr style={{ visibility: "visible" }} />
</div>
)}
/>
<Route exact path="/calendar" component={() => "Calendar"} />
<Route
exact
path="/individualstudent"
component={() => "Individual Student"}
/>
<Route exact path="/allstudents" component={() => "All Students"} />
<Route exact path="/uploads" component={() => "Uploads"} />
<Route exact path="/requests" component={() => "Request"} />
<Route exact path="/settings" component={() => "Settings"} />
<Route exact path="/Page-1" component={() => "Page-1"} />
</Switch>
</Container>
)
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: Component.js From agenda with MIT License | 6 votes |
|
render() {
const {
fields,
submitContactData
} = this.props;
return (
<Container fluid>
<Form>
{map(fields, field => (
<FormGroup>
<Label>
{field.label}
<br/>
<Input
key={field.control}
name={field.control}
{...field}
/>
</Label>
</FormGroup>
))}
<Button
onClick={() => submitContactData()}
>
Submit
</Button>
</Form>
</Container>
);
}
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: about.js From web-frontend with MIT License | 6 votes |
|
render(){
return <div id="tentang">
<Container className="themed-container title " fluid>
<div>
<Title subtitle="Tentang" title="Apa itu Patal?"></Title>
</div>
<div>
<p>Palembang digital dibentuk pada tanggal 21 april 2020 yang diinisiasi oleh Beberapa pelaku IT yang berasal dari Kota Palembang Sumatera Selatan. Palembang digital merupakan sebuah komunitas Digital yang meliputi Software engineer, Content creator , digital marketing dan pelaku digital lainnya yang berasal dari sumatera selatan.</p>
</div>
</Container>
</div>
}
Example #10
| Source File: ErrorPage.js From light-blue-react-template with MIT License | 6 votes |
|
render() {
return (
<div className={s.errorPage}>
<Container>
<div className={`${s.errorContainer} mx-auto`}>
<h1 className={s.errorCode}>404</h1>
<p className={s.errorInfo}>
Opps, it seems that this page does not exist here.
</p>
<p className={[s.errorHelp, 'mb-3'].join(' ')}>
If you are sure it should, please search for it:
</p>
<Form method="get">
<FormGroup>
<Input className="input-no-border" type="text" placeholder="Search Pages" />
</FormGroup>
<Link to="app/extra/search">
<Button className={s.errorBtn} type="submit" color="inverse">
Search <i className="fa fa-search text-secondary ml-xs" />
</Button>
</Link>
</Form>
</div>
<footer className={s.pageFooter}>
2020 © Light Blue Template - React Admin Dashboard Template.
</footer>
</Container>
</div>
);
}
Example #11
| Source File: Footer.js From gedge-platform with Apache License 2.0 | 6 votes |
|
Footer = () => {
return (
<React.Fragment>
<footer className="footer">
<Container fluid>
<Row>
<Col sm={6}>
{new Date().getFullYear()} © GEdge Platform
</Col>
<Col sm={6}>
<div className="text-sm-right d-none d-sm-block">
COPYRIGHT 2021 INNOGRID - CLOUD STRATEGY & PLANNING DEPARTMENT
</div>
</Col>
</Row>
</Container>
</footer>
</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: 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 #19
| Source File: Component.js From agenda with MIT License | 5 votes |
|
render() {
const {
fields,
submitAssignmentData,
assignment
} = this.props;
return (
<Container>
<Form>
{map(fields, field => (
<FormGroup>
<Label>
{field.label}
<br/>
<Input
key={field.control}
name={field.control}
{...field}
>
{!field.value && (<option>[Seleccione]</option>)}
{map(field.options, opt => (
<option value={opt.id}>
{opt.name ? `${opt.name} - ${opt.address}` : `${opt.firstName} ${opt.lastName}`}
</option>
))}
</Input>
</Label>
</FormGroup>
))}
<Button
onClick={() => submitAssignmentData()}
disabled={!assignment.contact || !assignment.department}
>
Guardar
</Button>
</Form>
</Container>
);
}
Example #20
| Source File: App.js From ReactJS-Projects with MIT License | 5 votes |
|
App = () => {
const [state, dispatch] = useReducer(reducer, initialState);
const getContacts = async () => {
dispatch({
type: SET_LOADING,
payload: true
})
const contactsRef = await firebase.database().ref('/contacts')
contactsRef.on('value', snapshot => {
dispatch({
type: SET_CONTACT,
payload: snapshot.val()
})
dispatch({
type: SET_LOADING,
payload: false
})
})
};
useEffect(() => {
getContacts()
}, []);
return (
<Router>
<ContactContext.Provider value={{ state, dispatch }}>
<ToastContainer />
<Header />
<Container>
<Switch>
<Route exact path="/contact/add" component={AddContact} />
<Route exact path="/contact/view" component={ViewContact} />
<Route exact path="/" component={Contacts} />
<Route exact path="*" component={PageNotFound} />
</Switch>
</Container>
<Footer />
</ContactContext.Provider>
</Router>
);
}
Example #21
| 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 #22
| 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 #23
| Source File: fakeModal.js From ErgoAuctionHouse with MIT License | 5 votes |
|
render() {
return (
<Modal
isOpen={this.props.isOpen}
toggle={this.props.close}
>
<ModalHeader toggle={this.props.close}>
<span className="fsize-1 text-muted">Potential warning</span>
</ModalHeader>
<ModalBody>
<Container>
<p className="text-danger mr-2 ml-2">
There is a similar artwork issued before this one.
<br/>
<b>Note that this message may not be accurate! Please see the potential original one and make the decision for yourself.</b>
</p>
</Container>
</ModalBody>
<ModalFooter>
<Button
className="ml-3 mr-3 btn-transition"
color="secondary"
onClick={() => {
this.props.close()
bidHelper(this.props.bid, this.props.box, this.props.modal, null, false)
}}
>
Place the bid anyway
</Button>
<Button
className="ml-3 mr-3 btn-transition"
color="secondary"
onClick={() => {
window.open(getArtworkUrl(this.props.original))
}}
>
See the potential original
</Button>
</ModalFooter>
</Modal>
);
}
Example #24
| 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 #25
| 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 #26
| 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>
);
}
