reactstrap#Col JavaScript Examples
The following examples show how to use
reactstrap#Col.
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: Sidebar.js From HexactaLabs-NetCore_React-Initial with Apache License 2.0 | 6 votes |
|
Sidebar = ({ menu }) => (
<Col className="ui-sidebar" sm={2}>
<h4 className="ui-sidebar-section-title">Navegación</h4>
<Nav className="ui-sidebar-section-nav" vertical>
{menu.map(({ to, icon, title }, i) => (
<NavItem
key={i}
tag={() => (
<Link to={to}>
<i className={icon} />
<p>{title}</p>
</Link>
)}
/>
))}
</Nav>
</Col>
)
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: ExperienceCard.jsx From developer-portfolio with Apache License 2.0 | 5 votes |
|
ExperienceCard = ({ data }) => {
return (
<Col lg="6">
<Fade left duration={2000}>
<Card
style={{ flex: 1 }}
className="shadow-lg--hover mb-3 shadow border-0 text-center rounded"
>
<CardBody className="">
<img
src={data.companylogo}
style={{
objectFit: "cover",
left: 0,
right: 0,
top: "7rem",
marginLeft: "auto",
marginRight: "auto",
width: "8rem",
height: "8rem",
borderRadius: "50%",
}}
className="shadow mb-3"
alt={data.companylogo}
/>
<CardTitle tag="h4" className="mb-2">
{data.company}
</CardTitle>
<CardSubtitle tag="h5" className="mb-2">
{data.role}
</CardSubtitle>
<CardSubtitle>{data.date}</CardSubtitle>
<CardText
tag="div"
className="description my-3 text-left"
>
{data.desc}
<ul>
{data.descBullets
? data.descBullets.map((desc) => {
return <li key={desc}>{desc}</li>;
})
: null}
</ul>
</CardText>
</CardBody>
</Card>
</Fade>
</Col>
);
}
Example #13
| Source File: Event.js From Website2020 with MIT License | 5 votes |
|
function Event(props) {
return (
<>
<FadeIn>
<div className="">
<Container>
<Row className="event-container">
<Col className="ml-auto mr-auto" md="12">
<a href={props.event.link} target="_blank">
<h2 className="text-left comp-heading heading-main">
{props.event.name}
</h2>
</a>
</Col>
<Col md="8" className="event-image-container my-auto">
<img src={props.event.image} className="event-image" alt="" />
</Col>
<Col md="4" className="headings-container text-left my-auto">
<h1 className="small-heading primary-heading">
{props.event.heading}
</h1>
<h2 className=" mt-3 small-heading-edited secondary-heading">
{props.event.subheading}
</h2>
<h1 className="small-heading primary-heading">
{props.event.heading02}
</h1>
{(props.event.name !== "ROBOSUB") ?
<h2 className=" mt-3 small-heading-edited secondary-heading">
{props.event.subheading02}
</h2> : <Link to='/vehicles/tarang' className="small-heading-edited tarang-link"> {props.event.subheading02}</Link>
}
<h2 className=" mt-3 small-heading-edited secondary-heading">
{props.event.subheading03}
</h2>
<h2 className=" mt-3 small-heading-edited secondary-heading">
{props.event.subheading04}
</h2>
<h1 className="small-heading primary-heading">
{props.event.heading03}
</h1>
<h2 className=" mt-3 small-heading-edited secondary-heading">
{props.event.subheading05}
</h2>
<h2 className=" mt-3 small-heading-edited secondary-heading">
{props.event.subheading06}
</h2>
<h2 className=" mt-3 small-heading-edited secondary-heading">
{props.event.subheading07}
</h2>
</Col>
</Row>
<Row>
<p className="ml-3 mt-5 text-left auv-description-primary ">
{props.event.para1}
</p>
<p className="ml-3 text-left auv-description-primary ">
{props.event.para2}
</p>
</Row>
</Container>
</div>
</FadeIn>
</>
);
}
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: Desktop-Login-Register.js From Encon-fe with MIT License | 5 votes |
|
LoginRegister = () => {
const [activeTab, setActiveTab] = useState('1');
const toggle = (tab) => {
if (activeTab !== tab) setActiveTab(tab);
};
return (
<div className='desktop-login-reg-container'>
<Nav pills style={{ padding: '1rem' }}>
<NavLink
style={{ borderRadius: '1.25rem' }}
className={classnames({ active: activeTab === '1' })}
onClick={() => {
toggle('1');
}}
>
<h1 className='desktop-register-tab'>Register</h1>
</NavLink>
<NavLink
style={{ borderRadius: '1.25rem' }}
className={classnames({ active: activeTab === '2' })}
onClick={() => {
toggle('2');
}}
>
<h1 className='desktop-login-tab'>Sign In</h1>
</NavLink>
</Nav>
<TabContent activeTab={activeTab}>
<TabPane tabId='1'>
<Col xl='13'>
<Card className='desktop-register-card' style={{ border: 'none' }}>
<Register />
</Card>
</Col>
</TabPane>
<TabPane tabId='2'>
<Col xl='13'>
<Card className='desktop-login-card' style={{ border: 'none' }}>
<Login />
</Card>
</Col>
</TabPane>
</TabContent>
</div>
);
}
Example #16
| Source File: ProductCard.js From Merch-Dropper-fe with MIT License | 5 votes |
|
ProductCard = ({ product, addToCart }) => {
const [isAdded, setIsAdded] = useState(false);
console.log("product", product);
const showAdded = () => {
setIsAdded(true);
setTimeout(() => {
setIsAdded(false);
}, 2000);
};
return (
<Fragment>
<Col xs="6" lg="4">
<Card className="merchCard m-1">
<CardImg
top
width="100%"
height="auto"
src={product.fullSizeURL}
alt="T-shirt"
/>
<CardBody className="product-card-padding">
<CardTitle className="h5 text-center">{product.design}</CardTitle>
<CardText>
<small className="text-muted">{product.name}</small>
</CardText>
<CardText>${product.price}</CardText>
<button
className="btn-primary cardBtn"
size="sm"
onClick={() => {
addToCart(product);
showAdded();
}}
>
{isAdded ? "Added" : "Add to Cart"}
</button>
</CardBody>
</Card>
</Col>
</Fragment>
);
}
Example #17
| 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 #18
| Source File: BodyContainer.js From HexactaLabs-NetCore_React-Initial with Apache License 2.0 | 5 votes |
|
BodyContainer = ({ children }) => <Col>{children}</Col>
Example #19
| 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 #20
| 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 #21
| 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 #22
| 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 #23
| 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 #24
| 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 #25
| 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 #26
| Source File: SpecificArt.js From ErgoAuctionHouse with MIT License | 5 votes |
|
render() {
let box = this.props.box;
return (
<div
style={{
borderWidth: '1px',
borderRadius: '8px',
borderColor: 'lightgrey',
boxShadow: '0px 0px 0px 1px rgba(0, 0, 0, 0.08)',
borderStyle: 'solid',
textAlign: "center"
}}
>
{/*<p className='text-center'><b>{box.tokenName}</b></p>*/}
{/*<p className='text-center'><b>{box.totalIssued}</b></p>*/}
<ReactTooltip effect="solid" place="bottom"/>
<Row style={{margin: 5}}>
<Col className="text-truncate">
<b>{box.tokenName}</b>
</Col>
{(box.royalty > 0 || box.totalIssued > 1) &&
<Col className="text-truncate">
{box.royalty > 0 &&
<i data-tip={`Includes ${box.royalty / 10}% royalty on secondary sales`}
style={{fontSize: '12px'}}
className="font-weight-light">{`${box.royalty / 10}% royalty`}</i>}
{box.totalIssued > 1 &&
<i data-tip={`This is a Fungible Token with total issuance of ${box.totalIssued}`}
style={{fontSize: '12px'}}
className="font-weight-light">{` - #${box.totalIssued}`}</i>}</Col>
}
</Row>
<ArtworkMedia avoidFav={true} box={box} avoidDetail={false}/>
<p className="text-primary mr-2 ml-2">
<b
style={{cursor: "pointer"}}
onClick={() => window.open(getArtistUrl(box.artist))}
>
{' '}- By {friendlyAddress(box.artist, 4)}
</b>
</p>
</div>
);
}
Example #27
| 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 #28
| 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 #29
| 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>
</>
);
}
