reactstrap#Card JavaScript Examples
The following examples show how to use
reactstrap#Card.
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: EducationCard.jsx From developer-portfolio with Apache License 2.0 | 6 votes |
|
EducationCard = ({ education }) => {
return (
<Fade left duration={2000} >
<Card className="card-lift--hover shadow mt-4">
<CardBody>
<div className="d-flex px-3">
<div className="pl-4">
<h5 className="text-info">
{education.schoolName}
</h5>
<h6>{education.subHeader}</h6>
<Badge color="info" className="mr-1">
{education.duration}
</Badge>
<p className="description mt-3">{education.desc}</p>
<ul>
{education.descBullets
? education.descBullets.map((desc) => {
return <li key={desc}>{desc}</li>;
})
: null}
</ul>
</div>
</div>
</CardBody>
</Card>
</Fade>
);
}
Example #2
| Source File: JobFitment.js From GB-GCGC with MIT License | 6 votes |
|
render() {
return (
<div class="container-fluid">
<Card className="Rounded p-3">
<CardSubtitle align="left">Job Fitment</CardSubtitle>
<hr></hr>
<br></br>
<ReactSpeedometer responsive
maxValue={100}
value={this.state.result}
segments={6}
/>
<CardText>
Description : You are {this.state.result} % suitable to the industry with your
current performance in all the tests conducted by T&P
</CardText>
</Card>
</div>
);
}
Example #3
| Source File: CardConf.js From covidAnalytics with MIT License | 6 votes |
|
render(){
return(
<div className="CardContainer">
<Card className="ConfCard">
<CardBody>
<CardTitle id="confirmed" tag="h4" className=" mb-2 mb-xl-2 ConfTitle">
</CardTitle>
<span className="h8 mb-2 font-weight-bold mb-xl-2 " >
Casos Confirmados no RS
</span><br></br>
<span id="confirmed_atualiza" className="small font-weight-light" >
</span>
</CardBody>
</Card>
</div>
);
}
Example #4
| Source File: UserCard.js From ReactJS-Projects with MIT License | 6 votes |
|
UserCard = ({ user }) => {
return (
<Card className='text-center mt-3 mb-4'>
<img src={user.avatar_url} className=' img-thumbnail' />
<CardBody>
<div className='text-primary'>
Naem: {user.name}
</div>
<div className='text-primary'>
Bio: {user.bio}
</div>
<div className='text-primary'>
Location: {user.location}
</div>
<div className='text-primary'>
Followers: {user.followers}
</div>
<div className='text-primary'>
Available for hire: {user.hireable ? 'Yes' : 'No'}
</div>
</CardBody>
</Card>
)
}
Example #5
| Source File: ShowCard.js From master-en-code-g2 with MIT License | 6 votes |
|
ShowCard = ({ id, image, summary, name }) => {
return (
<div>
<Link to={`shows/${id}`} style={{ textDecoration: 'none' }}>
<Card style={{ width: '250px' }}>
<CardImg top width="100%" src={ image } alt="Show Image" />
<CardBody>
<CardTitle tag="h5">{ name }</CardTitle>
<CardSubtitle tag="h6" className="mb-2 text-muted">{ id }</CardSubtitle>
<CardText>{ summary }</CardText>
</CardBody>
</Card>
</Link>
</div>
);
}
Example #6
| Source File: article.js From web-frontend with MIT License | 6 votes |
|
Article = (props) => {
return (
<div id="article">
<Card className="team-thumb" onClick={(e) => handleClick(e, props.url)}>
<CardImg
top
width="100%"
src={props.img}
// width="264px"
alt="Card image cap"
/>
<CardBody>
<CardTitle>
<h3>{props.title}</h3>
</CardTitle>
</CardBody>
</Card>
</div>
);
}
Example #7
| Source File: MiniWidgets.js From gedge-platform with Apache License 2.0 | 6 votes |
|
render() {
return (
<React.Fragment>
{
this.props.reports.map((report, key) =>
<Col key={key} md={4}>
<Card>
<CardBody>
<Media>
<Media body className="overflow-hidden">
<p className="text-truncate font-size-14 mb-2">{report.title}</p>
<h4 className="mb-0">{report.value}</h4>
</Media>
<div className="text-primary">
<i className={report.icon + " font-size-24"}></i>
</div>
</Media>
</CardBody>
<CardBody className="border-top py-3">
<div className="text-truncate">
<span className="badge badge-soft-success font-size-11 mr-1"><i className="mdi mdi-menu-up"> </i> {report.rate}</span>
<span className="text-muted ml-2">{report.desc}</span>
</div>
</CardBody>
</Card>
</Col>
)
}
</React.Fragment>
);
}
Example #8
| 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 #9
| Source File: SubsystemHeads.js From Website2020 with MIT License | 5 votes |
|
function TalkAbout() {
console.log(String(team.teamData[0].items[0].image));
return (
<>
<div className="section text-center">
<Container>
{
team.teamData.map((section) => {
console.log(section);
return(
<div>
<h1 className="title heading-main">{section.heading}</h1>
<div>
<Row>
{section.items.map((teamMember)=>{
console.log(teamMember);
return(
<Col lg="3 ml-auto mr-auto" sm="6">
<Card className="card-profile card-plain card-auv">
<CardBody>
<a href="#pablo" onClick={(e) => e.preventDefault()}>
<div className="author">
<img
alt="..."
src={require("assets/img/"+ teamMember.image)}
className="image-prof"
/>
<></>
<CardTitle tag="h4" className="auv-description-primary pt-3">
{teamMember.name}
</CardTitle>
<h6 className="auv-description-primary"> {teamMember.subheading}</h6>
</div>
</a>
</CardBody>
<CardFooter className="text-center margin-neg">
<Button
className="btn-just-icon btn-neutral"
color="link"
href="#pablo"
onClick={(e) => e.preventDefault()}
>
<i className="fa fa-facebook flip"/>
</Button>
<Button
className="btn-just-icon btn-neutral ml-1"
color="link"
href="#pablo"
onClick={(e) => e.preventDefault()}
>
<i className="fa fa-linkedin flip"/>
</Button>
</CardFooter>
</Card>
</Col>
)
})}
</Row>
</div>
</div>
)
})
}
</Container>
</div>
</>
);
}
Example #10
| 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 #11
| 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 #12
| 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 #13
| Source File: BtechMarks.js From GB-GCGC with MIT License | 5 votes |
|
render(){
return (
<div class="container-fluid">
<Card color="danger" className="Rounded p-3" >
<CardTitle align="left">{this.state.gpa}</CardTitle>
<CardSubtitle align="left">
<Row>
<Col style={{"padding":"0px"}}>
B Tech CGPA
</Col>
<Col style={{"textAlign":"end"}}>
<Button style={{"background-color": "rgb(42, 50, 75)"}} onClick={()=>{this.handleModalbtech()}}>Edit</Button>
</Col>
</Row>
</CardSubtitle>
<Modal show={this.state.show} onHide={()=>this.handleModalbtech()} >
<Modal.Header closeButton>Edit B.Tech Marks</Modal.Header>
<Modal.Body>
<form onSubmit={this.onSubmitgpa}>
<Row>
<Col>
<input type="text" name="B.techMarks" value={this.state.gpa}
onChange={this.onChangebtech} />
</Col>
<Col>
<Button type="submit">
Submit
</Button>
{/*<input type={"submit"} value={"Submit"} className={"btn btn-primary"}/>*/}
</Col>
</Row>
</form>
</Modal.Body>
</Modal>
</Card>
</div>
);
}
Example #14
| Source File: Maps.js From covidAnalytics with MIT License | 5 votes |
|
render() {
return (
<div className="cardContainer">
<Card>
<CardBody>
<CardTitle tag="h4" className=" mb-2 mb-xl-2 font-weight-bold">
Mapa Rio Grande do Sul
</CardTitle>
</CardBody>
<Map center={center} zoom={7} maxZoom={9}>
<TileLayer
attribution='&copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
/>
<MarkerClusterGroup>
{array_obj_confirmed.map(({lat, lng, nome, confirmed, pop_estimada, data}, index) => (
<Marker position={[lat, lng]} key={index} icon={new L.NumberedDivIcon({number: confirmed})} attribution="confirmed" >
<Popup minWidth={250}>
<div className="popUp-container">
<div className="popUp-title">{nome}</div>
<div className="popUp-body">
<ul>
<li><FontAwesomeIcon icon={faVirus}/> Casos confirmados: {confirmed}</li>
<li><FontAwesomeIcon icon={faUser}/> População Estimada 2019: {pop_estimada}</li>
<li><FontAwesomeIcon icon={faCalendar}/> Data da ultima atualização: {data}</li>
</ul>
</div>
</div>
</Popup>
</Marker>
))}
</MarkerClusterGroup>
</Map>
</Card>
</div>
);
}
Example #15
| 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 #16
| 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 #17
| 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 #18
| Source File: Calendar.js From gedge-platform with Apache License 2.0 | 5 votes |
|
render() {
return (
<React.Fragment>
<div className="page-content">
<Container fluid>
<Breadcrumbs title="Calendar" breadcrumbItems={this.state.breadcrumbItems} />
<Row>
<Col xs={12}>
<Card>
<CardBody>
<FullCalendar
defaultView="dayGridMonth"
plugins={[BootstrapTheme, dayGridPlugin, interactionPlugin ]}
handleWindowResize={true}
themeSystem="bootstrap"
header={{
left: "prev,next today",
center: "title",
right: "dayGridMonth,dayGridWeek,dayGridDay"
}}
dateClick={this.handleDateClick}
editable={true}
droppable={true}
eventLimit={true}
selectable={true}
events={this.state.calendarEvents}
/>
<div style={{clear : "both"}}></div>
</CardBody>
</Card>
</Col>
</Row>
</Container>
</div>
</React.Fragment>
);
}
Example #19
| Source File: Cards.jsx From aglomerou with GNU General Public License v3.0 | 5 votes |
|
Cards = ({ data: { confirmed, recovered, deaths, lastUpdate } }) => {
if (!confirmed) {
return 'Carregando...';
}
return (
<div className={styles.container}>
<Row className={styles.row} container spacing={3} justify="center">
<Col sm="4">
<Card xs={12} md={3} className={cx(styles.card, styles.infected)}>
<CardTitle>CASOS ATIVOS</CardTitle>
<CardText variant="h5">
<CountUp start={0} end={confirmed.value} duration={2.5} separator="," />
</CardText>
<CardText color="textSecondary">{new Date(lastUpdate).toDateString()}</CardText>
<CardFooter variant="body2">Número de casos ativos de COVID-19</CardFooter>
</Card>
</Col>
<Col sm="4">
<Card xs={12} md={3} className={cx(styles.card, styles.recovered)}>
<CardTitle color="textSecondary">RECUPERADOS</CardTitle>
<CardText variant="h5">
<CountUp start={0} end={recovered.value} duration={2.5} separator="," />
</CardText>
<CardText color="textSecondary">{new Date(lastUpdate).toDateString()}</CardText>
<CardFooter variant="body2">Números de recuperados do COVID-19</CardFooter>
</Card>
</Col>
<Col sm="4">
<Card xs={12} md={3} className={cx(styles.card, styles.deaths)}>
<CardTitle color="textSecondary">MORTES</CardTitle>
<CardText variant="h5">
<CountUp start={0} end={deaths.value} duration={2.5} separator="," />
</CardText>
<CardText color="textSecondary">{new Date(lastUpdate).toDateString()}</CardText>
<CardFooter variant="body2">Número de mortes causadas pelo COVID-19</CardFooter>
</Card>
</Col>
</Row>
</div>
);
}
Example #20
| Source File: Breadcrumbs.js From id.co.moonlay-eworkplace-admin-web with MIT License | 5 votes |
|
render() {
return (
<div className="animated fadeIn">
<Row>
<Col xs="12">
<Card>
<CardHeader>
<i className="fa fa-align-justify"></i><strong>Breadcrumbs</strong>
<div className="card-header-actions">
<a href="https://reactstrap.github.io/components/breadcrumbs/" rel="noreferrer noopener" target="_blank" className="card-header-action">
<small className="text-muted">docs</small>
</a>
</div>
</CardHeader>
<CardBody>
<Breadcrumb>
<BreadcrumbItem active>Home</BreadcrumbItem>
</Breadcrumb>
<Breadcrumb>
{/*eslint-disable-next-line*/}
<BreadcrumbItem><a href="#">Home</a></BreadcrumbItem>
<BreadcrumbItem active>Library</BreadcrumbItem>
</Breadcrumb>
<Breadcrumb>
{/*eslint-disable-next-line*/}
<BreadcrumbItem><a href="#">Home</a></BreadcrumbItem>
{/* eslint-disable-next-line*/}
<BreadcrumbItem><a href="#">Library</a></BreadcrumbItem>
<BreadcrumbItem active>Data</BreadcrumbItem>
</Breadcrumb>
<Breadcrumb tag="nav">
<BreadcrumbItem tag="a" href="#">Home</BreadcrumbItem>
<BreadcrumbItem tag="a" href="#">Library</BreadcrumbItem>
<BreadcrumbItem tag="a" href="#">Data</BreadcrumbItem>
<BreadcrumbItem active tag="span">Bootstrap</BreadcrumbItem>
</Breadcrumb>
</CardBody>
</Card>
</Col>
</Row>
</div>
);
}
Example #21
| Source File: RegisterPage.js From Website2020 with MIT License | 4 votes |
|
function RegisterPage() {
document.documentElement.classList.remove("nav-open");
React.useEffect(() => {
document.body.classList.add("register-page");
return function cleanup() {
document.body.classList.remove("register-page");
};
});
return (
<>
<ExamplesNavbar />
<div
className="page-header"
style={{
backgroundImage: "url(" + require("assets/img/login-image.jpg") + ")"
}}
>
<div className="filter" />
<Container>
<Row>
<Col className="ml-auto mr-auto" lg="4">
<Card className="card-register ml-auto mr-auto">
<h3 className="title mx-auto">Welcome</h3>
<div className="social-line text-center">
<Button
className="btn-neutral btn-just-icon mr-1"
color="facebook"
href="#pablo"
onClick={e => e.preventDefault()}
>
<i className="fa fa-facebook-square" />
</Button>
<Button
className="btn-neutral btn-just-icon mr-1"
color="google"
href="#pablo"
onClick={e => e.preventDefault()}
>
<i className="fa fa-google-plus" />
</Button>
<Button
className="btn-neutral btn-just-icon"
color="twitter"
href="#pablo"
onClick={e => e.preventDefault()}
>
<i className="fa fa-twitter" />
</Button>
</div>
<Form className="register-form">
<label>Email</label>
<Input placeholder="Email" type="text" />
<label>Password</label>
<Input placeholder="Password" type="password" />
<Button block className="btn-round" color="danger">
Register
</Button>
</Form>
<div className="forgot">
<Button
className="btn-link"
color="danger"
href="#pablo"
onClick={e => e.preventDefault()}
>
Forgot password?
</Button>
</div>
</Card>
</Col>
</Row>
</Container>
<div className="footer register-footer text-center">
<h6>
© {new Date().getFullYear()}, made with{" "}
<i className="fa fa-heart heart" /> by Creative Tim
</h6>
</div>
</div>
</>
);
}
Example #22
| Source File: IndividualStudent.js From GB-GCGC with MIT License | 4 votes |
|
render() {
return (
<div className="IndividualStudent">
<div className="container-fluid">
<Card>
<Collapsible trigger="Student Details">
<PersonalDetails login={this.props.match.params.id}/>
</Collapsible>
</Card>
<br/>
<Card>
<Collapsible trigger="Academic Details">
<br></br>
{console.log(this.props.match.params.id)}
<Row>
<Col md="4">
<TenthMarks tenth={this.props.match.params.id}/>
</Col>
<Col md="4">
<TwelveMarks twe={this.props.match.params.id}/>
</Col>
<Col md="4">
<BtechMarks btech={this.props.match.params.id}/>
</Col>
</Row>
<br></br>
<Collapsible trigger="More Info">
<br></br>
<Row>
<Col md="4">
<Branch brn={this.props.match.params.id}/>
</Col>
<Col md="4">
<Pass pas={this.props.match.params.id}/>
</Col>
<Col md="4">
<Section sec={this.props.match.params.id}/>
</Col>
</Row>
</Collapsible>
</Collapsible>
</Card>
</div>
<div class="container-fluid">
<Card>
<Collapsible trigger="Job Fitment Curve">
<Row>
<Col md="6" className="p-2">
<JobFitment jf={this.props.match.params.id} />
</Col>
<Col md="6" className="p-2">
<CurrentJobS cs={this.props.match.params.id}/>
</Col>
</Row>
</Collapsible>
</Card>
</div>
<div class="container-fluid">
<Card>
<Collapsible trigger="ARI">
<ARI ari={this.props.match.params.id}/>
</Collapsible>
</Card>
</div>
<div class="container-fluid">
<Card>
<Collapsible trigger="ARE">
<Row>
<Col md="6" className="p-2">
<Cocubes cid={this.props.match.params.id}/>
</Col>
<Col md="6" className="p-2">
<Amcat aid={this.props.match.params.id}/>
</Col>
</Row>
</Collapsible>
</Card>
</div>
<div className="container-fluid">
<Card>
<Collapsible trigger="TAR">
<ITA aid={this.props.match.params.id}/>
</Collapsible>
</Card>
</div>
<div className="container-fluid">
<Card>
<Collapsible trigger="Placement Analysis">
<Table className="placements" striped bordered responsive>
<tbody>
<tr>
<td md="6">Total Number of Companies: {this.state.noc}</td>
<td md="6">Number of written test cleared:{this.state.wtc}</td>
</tr>
<tr>
<td md="6">Number of Companies Attended:{this.state.ce}</td>
<td md="6">Number of GD's cleared:{this.state.gdc}</td>
</tr>
<tr>
<td md="6">Number of Companies Eligible:{this.state.nca}</td>
<td md="6">Number of technical test cleared:{this.state.ttc}</td>
</tr>
<tr>
<td colspan="2">Number of Offer Letters:{this.state.olf}</td>
</tr>
</tbody>
</Table>
<br></br>
<h6>Placements Analysis</h6>
<Table className="placementanalysis" responsive>
<thead>
<tr>
<th>Company Logo</th>
<th>Company Name</th>
<th>Attendance</th>
<th>Written Test</th>
<th>GroupDiscussion</th>
<th>Technical Test</th>
<th>Personal Interview</th>
</tr>
</thead>
<tbody>
{this.RecordsList()}
</tbody>
</Table>
</Collapsible>
</Card>
</div>
</div>
);
}
Example #23
| Source File: about.js From covidAnalytics with MIT License | 4 votes |
|
export default function About(){
return(
<div className="teste">
<Header/>
<div className="conteudoCardAbout">
<Container fluid={true} >
<Row noGutters={false}>
<Col xs="12" sm="12" md="12" xl="12">
<Card>
<CardBody>
<CardTitle className="titulosAbout">
Quem somos
<hr className="my-2 mb-5" />
</CardTitle>
<p className="my-2 mb-2 aboutexto"> O Grupo de Trabalho C3-Analytics é formado por uma pequena equipe de professores e alunos de
graduação e pós-graduação do Centro de Ciências Computacionais - C3. É parte da frente de ITeCCorona, que desenvolve atividades
de pesquisa, extensão e inovação na Universidade Federal do Rio Grande - FURG sobre COVID-19. </p>
<p className="my-2 mb-2 aboutexto">O principal objetivo do GT C3-Analytics é permitir a visualização e a análise de dados da
COVID-19 nas regiões de abrangência da FURG. A equipe responsável pelo desenvolvimento desta plataforma de coleta e visualização
de dados é detalhada abaixo. </p>
<p className="my-2 mb-5 aboutexto">Estes e outros integrantes do GT ainda atuam de forma conjunta com a prefeitura municipal de
Rio Grande para implantar a plataforma desenvolvida no portal de serviços relacionados à pandemia do novo Coronavírus e na elaboração
de outras análises a serem publicadas no futuro, principalmente ligadas ao sistema de tele-triagem.</p>
<CardTitle className="titulosAbout mb-2">
Equipe de Desenvolvedores
<hr className="my-2 mb-5" />
</CardTitle>
<div className=" text-center ">
<Container>
<Row>
<Col md="12" sm="12" xl="4"xs="12" py="5" mx="2" >
<img class="fotos" src={eduardo} alt="foto1"/>
<CardTitle className="TituloTime mt-3">Eduardo Borges</CardTitle>
<p className="graduacaoTime my-2 mb-2 text-center ">Dr. em Computação. </p>
<p className="my-2 resumoTime">Coordenador do GT C3-Analytics. Professor do Centro de Ciências Computacionais e
do Programa de Pós-Graduação em Computação. Coordenador do Grupo de Pesquisa em Gerenciamento de Informações.
</p>
<div className="mb-5">
<Button className="Headerlinks" color="link" href="http://lattes.cnpq.br/5851601274050374">
<FontAwesomeIcon icon={faGlobeAmericas} />
</Button>
<Button className="Headerlinks" color="link" href="https://www.linkedin.com/in/enborges/">
<FontAwesomeIcon icon={faLinkedin} />
</Button>
<Button className="Headerlinks" color="link" href="https://github.com/enborges">
<FontAwesomeIcon icon={faGithub} />
</Button>
</div>
</Col>
<Col md="12" sm="12" xl="4"xs="12" py="5" mx="2" >
<img class="fotos" src={glauber} alt="foto9"/>
<CardTitle className="TituloTime mt-3">Glauber Gonçalves</CardTitle>
<p className="graduacaoTime my-2 mb-2 text-center ">Dr. em Ciências Geodésicas </p>
<p className="my-2 resumoTime">Professor do Centro de Ciências Computacionais,
coordenador do Laboratório de Tecnologia da Geoinformação. Atua como pesquisador em Sensoriamento Remoto e Fotogrametria
</p>
<div className="mb-5">
<Button className="Headerlinks" color="link" href="http://lattes.cnpq.br/2814370196736373">
<FontAwesomeIcon icon={faGlobeAmericas} />
</Button>
{/* <Button className="Headerlinks" color="link" href="https://www.linkedin.com/in/enborges/">
<FontAwesomeIcon icon={faLinkedin} />
</Button>
<Button className="Headerlinks" color="link" href="https://github.com/enborges">
<FontAwesomeIcon icon={faGithub} />
</Button> */}
</div>
</Col>
<Col md="12" sm="12" xl="4"xs="12" py="5" mx="5" >
<img class="fotos" src={gabriel} alt="foto2"/>
<CardTitle className="TituloTime mt-3">Gabriel Lavoura</CardTitle>
<p className="graduacaoTime my-2 mb-2 text-center ">Mestrando em Eng.Comp. </p>
<p className="my-2 resumoTime">Empreendedor, trabalha com desenvolvimento há mais de 7 anos,
sendo entusiasta em hardware, desenvolvimento Web e Mobile. Atua como pesquisador nas áreas de
Deep Learning e Data Science.
</p>
<div className="mb-5">
<Button className="Headerlinks" color="link" href="http://lattes.cnpq.br/5616548040095346">
<FontAwesomeIcon icon={faGlobeAmericas} />
</Button>
<Button className="Headerlinks" color="link" href="https://www.linkedin.com/in/gabriellavoura/">
<FontAwesomeIcon icon={faLinkedin} />
</Button>
<Button className="Headerlinks" color="link" href="https://github.com/Gabriellavoura">
<FontAwesomeIcon icon={faGithub} />
</Button>
</div>
</Col>
<Col md="12" sm="12" xl="4"xs="12" py="5" mx="2">
<img class="fotos" src={vanessa} alt="foto3"/>
<CardTitle className="TituloTime mt-3">Vanessa Telles</CardTitle>
<p className="graduacaoTime my-2 mb-2 text-center ">Mestranda em Eng.Comp. </p>
<p className="my-2 resumoTime">Entusiasta em Design Digital, empreendedora e
desenvolvedora Web e Mobile desde 2014. Atua como
pesquisadora nas áreas de Data Science e Deep Learning .
</p>
<div className="mb-5">
<Button className="Headerlinks" color="link" href="http://lattes.cnpq.br/3565116360523950">
<FontAwesomeIcon icon={faGlobeAmericas} />
</Button>
<Button className="Headerlinks" color="link" href="https://www.linkedin.com/in/vanessa-telles-da-silva-8ab4b614a/">
<FontAwesomeIcon icon={faLinkedin} />
</Button>
<Button className="Headerlinks" color="link" href="https://github.com/vanessatelles">
<FontAwesomeIcon icon={faGithub} />
</Button>
</div>
</Col>
<Col md="12" sm="12" xl="4"xs="12" py="5" mx="2">
<img class="fotos" src={bruna} alt="foto4"/>
<CardTitle className="TituloTime mt-3">Bruna Guterres</CardTitle>
<p className="graduacaoTime my-2 mb-2 text-center ">Mestranda em Eng.Comp. </p>
<p className="my-2 resumoTime">Professora substituta do Centro de Ciências Computacionais - C3.
Entusiasta em Visão Computacional e Aprendizado de Máquina. Membro do grupo NAUTEC desde 2015.
</p>
<div className="mb-5">
<Button className="Headerlinks" color="link" href="http://lattes.cnpq.br/2197909913930437">
<FontAwesomeIcon icon={faGlobeAmericas} />
</Button>
<Button className="Headerlinks" color="link" href="https://www.linkedin.com/in/bruna-de-vargas-guterres-07888b129/">
<FontAwesomeIcon icon={faLinkedin} />
</Button>
{/* <Button className="Headerlinks" color="link" href="https://github.com/luucasrb">
<FontAwesomeIcon icon={faGithub} />
</Button> */}
</div>
</Col>
<Col md="12" sm="12" xl="4"xs="12" py="5" mx="2">
<img class="fotos" src={lucas} alt="foto5"/>
<CardTitle className="TituloTime mt-3">Lucas Ribeiro</CardTitle>
<p className="graduacaoTime my-2 mb-2 text-center ">Graduando em Eng.Comp. </p>
<p className="my-2 resumoTime">Atua como pesquisador nas áreas de Data Science
e Blockchain. Entusiasta em Desenvolvimento Web.
</p>
<div className="mb-5">
<Button className="Headerlinks" color="link" href="http://lattes.cnpq.br/1491700382158430">
<FontAwesomeIcon icon={faGlobeAmericas} />
</Button>
<Button className="Headerlinks" color="link" href="https://www.linkedin.com/in/luucasrb/">
<FontAwesomeIcon icon={faLinkedin} />
</Button>
<Button className="Headerlinks" color="link" href="https://github.com/luucasrb">
<FontAwesomeIcon icon={faGithub} />
</Button>
</div>
</Col>
<Col md="12" sm="12" xl="4"xs="12" py="5" mx="2">
<img class="fotos" src={willian} alt="foto6"/>
<CardTitle className="TituloTime mt-3">Willian Lemos</CardTitle>
<p className="graduacaoTime my-2 mb-2 text-center ">Graduando em Eng.Comp. </p>
<p className="my-2 resumoTime">Desenvolvedor desde 2015 e entusiasta em Redes Neurais.
Atua como pesquisador nas áreas de Data Science e Engenharia de dados.
</p>
<div className="mb-5">
<Button className="Headerlinks" color="link" href="http://lattes.cnpq.br/5429651614061510">
<FontAwesomeIcon icon={faGlobeAmericas} />
</Button>
<Button className="Headerlinks" color="link" href="https://www.linkedin.com/in/willian-lemos-4b9121136/">
<FontAwesomeIcon icon={faLinkedin} />
</Button>
<Button className="Headerlinks" color="link" href="https://github.com/Willblemos">
<FontAwesomeIcon icon={faGithub} />
</Button>
</div>
</Col>
<Col md="12" sm="12" xl="4"xs="12" py="5" mx="2">
<img class="fotos" src={augusto} alt="foto7"/>
<CardTitle className="TituloTime mt-3">Augusto Lamim</CardTitle>
<p className="graduacaoTime my-2 mb-2 text-center ">Graduando em Eng.Comp. </p>
<p className="my-2 resumoTime">Desenvolvedor full-stack, entusiasta em Tecnologia da
Informação.
</p>
<div className="mb-5">
<Button className="Headerlinks" color="link" href="http://lattes.cnpq.br/1925430387887371">
<FontAwesomeIcon icon={faGlobeAmericas} />
</Button>
<Button className="Headerlinks" color="link" href="https://www.linkedin.com/in/augusto-c%C3%A9sar-lamim-martins-de-oliveira-6b93a5168/">
<FontAwesomeIcon icon={faLinkedin} />
</Button>
<Button className="Headerlinks" color="link" href="https://github.com/Lastopsop">
<FontAwesomeIcon icon={faGithub} />
</Button>
</div>
</Col>
<Col md="12" sm="12" xl="4"xs="12" py="5" mx="2">
<img class="fotos" src={felipe} alt="foto8"/>
<CardTitle className="TituloTime mt-3">Felipe Marques</CardTitle>
<p className="graduacaoTime my-2 mb-2 text-center ">Graduando em Eng.Comp. </p>
<p className="my-2 resumoTime">Técnico em Informática para Internet pelo IFRS, desenvolvedor
desde 2016.
</p>
<div className="mb-5">
{/* <Button className="Headerlinks" color="link" href="#">
<FontAwesomeIcon icon={faGlobeAmericas} />
</Button> */}
<Button className="Headerlinks" color="link" href="https://www.linkedin.com/in/felipesouzamarques/">
<FontAwesomeIcon icon={faLinkedin} />
</Button>
<Button className="Headerlinks" color="link" href="https://github.com/FelpsZMS">
<FontAwesomeIcon icon={faGithub} />
</Button>
</div>
</Col>
</Row>
</Container>
</div>
<div>
<Container>
<Row>
<Col md="12" sm="12" xl="12"xs="12" py="5" mx="2">
<CardTitle className="titulosAbout">
Attribution
<hr className="my-2 mb-5" />
</CardTitle>
<p className="my-2 mb-2 aboutexto">Icons made
by <a class="LinkTitle" href="https://www.flaticon.com/authors/freepik" title="Freepik">Freepik</a> from <a className="LinkTitle" href="https://www.flaticon.com/" title="Flaticon"> www.flaticon.com</a>. </p>
<p className="my-2 mb-2 aboutexto">Icons fonts made
by <a class="LinkTitle" href="https://fontawesome.com/license/free" title="FontAwesome">FontAwesome</a> from <a className="LinkTitle" href="https://fontawesome.com/" title="Flaticon"> www.fontawesome.com/</a>. </p>
<p className="my-2 mb-2 aboutexto">Graphs
by <a class="LinkTitle" href="https://github.com/PaulLeCam/react-leaflet/blob/master/LICENSE" title="FontAwesome">React-leaflet</a> from <a className="LinkTitle" href="https://github.com/PaulLeCam/react-leaflet" title="Flaticon"> https://github.com/PaulLeCam/react-leaflet</a>. </p>
<p className="my-2 mb-2 aboutexto">Maps clusters
by <a class="LinkTitle" href="https://github.com/yuzhva/react-leaflet-markercluster/blob/master/LICENSE" title="FontAwesome">React-leaflet-markercluster</a> from <a className="LinkTitle" href="https://github.com/yuzhva/react-leaflet-markercluster" title="Flaticon"> https://github.com/yuzhva/react-leaflet-markercluster</a>. </p>
</Col>
</Row>
</Container>
</div>
</CardBody>
</Card>
</Col>
</Row>
</Container>
</div>
<Footer/>
</div>
);
}
Example #24
| Source File: createJob.page.js From hiring-system with GNU General Public License v3.0 | 4 votes |
|
CreateJob = () => {
const { handleSubmit, watch, errors, control, getValues } = useForm({
mode: "all",
reValidateMode: "onChange",
});
const [selectedPostDate, setSelectedPostDate] = useState();
const watchDate = watch("jobPostDate");
const onSubmit = (data) => {
// code to submit form
console.log(data);
};
useEffect(() => {
if (!getValues("jobPostDate")) {
return;
}
const selectedDate = new Date(getValues("jobPostDate"));
setSelectedPostDate(selectedDate.toDateString());
}, [watchDate]);
return (
<>
<div className="create-job-container" style={styles.pageContainer}>
<div>
<Card style={styles.cardContainer}>
<CardBody>
<CardTitle style={styles.section}>
<h3> Create New Job</h3>
</CardTitle>
<Form
style={styles.formContainer}
onSubmit={handleSubmit(onSubmit)}
>
<FormGroup>
<Controller
as={Input}
type="text"
name="jobTitle"
control={control}
rules={{ required: true }}
placeholder="Enter Job Title"
/>
{errors.jobTitle && (
<span className="error-text">This field is required</span>
)}
</FormGroup>
<FormGroup>
<Controller
as={Input}
type="text"
name="jobDesc"
control={control}
rules={{ required: true }}
placeholder="Enter Job Description"
/>
{errors.jobDesc && (
<span className="error-text">This field is required</span>
)}
</FormGroup>
<FormGroup>
<Controller
name="skills"
as={Select}
options={skills}
control={control}
rules={{ required: true }}
isMulti
placeholder="Select Skills"
/>
{errors.skills && (
<span className="error-text">This field is required</span>
)}
</FormGroup>
<FormGroup>
<Controller
as={Input}
type="text"
name="companyName"
control={control}
rules={{ required: true }}
placeholder="Enter Company Name"
/>
{errors.companyName && (
<span className="error-text">This field is required</span>
)}
</FormGroup>
<FormGroup style={styles.relativeEle}>
<Input
type="text"
name="jobPostDateInput"
placeholder="Select Job Post Date"
value={selectedPostDate}
/>
{errors.jobPostDate && (
<span className="error-text">This field is required</span>
)}
<Controller
name="jobPostDate"
as={DatePicker}
control={control}
rules={{ required: true }}
maxDate={new Date()}
clearIcon={null}
className="app-date-custom-style"
/>
</FormGroup>
<FormGroup>
<Controller
as={Input}
type="text"
name="workLocation"
control={control}
rules={{ required: true }}
placeholder="Enter Work Location"
/>
{errors.workLocation && (
<span className="error-text">This field is required</span>
)}
</FormGroup>
<FormGroup>
<Controller
name="benefits"
as={Select}
options={benefits}
control={control}
rules={{ required: true }}
placeholder="Select Benefits"
isMulti
/>
{errors.benefits && (
<span className="error-text">This field is required</span>
)}
</FormGroup>
<FormGroup>
<Controller
name="workVisa"
as={Select}
options={visaSelection}
control={control}
rules={{ required: true }}
placeholder="Will Sponsor Work Visa"
/>
{errors.workVisa && (
<span className="error-text">This field is required</span>
)}
</FormGroup>
<div style={styles.section}>
<Button type="submit" variant="primary">
Create New Job
</Button>
</div>
</Form>
</CardBody>
</Card>
</div>
</div>
</>
);
}
Example #25
| Source File: Signin.js From ReactJS-Projects with MIT License | 4 votes |
|
Signin = () => {
const context = useContext(UserContext)
const [email, setEmail] = useState("")
const [password, setPassword] = useState("")
const handleSignup = () => {
firebase
.auth()
.signInWithEmailAndPassword(email, password)
.then(res => {
console.log(res)
context.setUser({
email: res.user.email,
uid: res.user.uid
})
})
.catch(err => {
console.log(err);
toast(err.message, {
type: 'error'
})
})
}
const handleFormSubmit = e => {
e.preventDefault()
handleSignup()
}
if (context.user?.uid) {
return (
<Navigate to="/" replace />
)
}
return (
<Container className='text-center'>
<Row>
<Col lg={6} className='offset-lg-3 mt-5'>
<Card>
<Form onSubmit={handleFormSubmit}>
<CardHeader className=''>SignIn here</CardHeader>
<CardBody>
<FormGroup row>
<Label for='email' sm={3}>
Email
</Label>
<Col sm={9}>
<Input
type='email'
name='email'
id='email'
placeholder='Your Email'
value={email}
onChange={e => setEmail(e.target.value)}
/>
</Col>
</FormGroup>
<FormGroup row>
<Label for='password' sm={3}>
Password
</Label>
<Col sm={9}>
<Input
type='password'
name='password'
id='password'
placeholder='Your Password'
value={password}
onChange={e => setPassword(e.target.value)}
/>
</Col>
</FormGroup>
</CardBody>
<CardFooter>
<Button type='submit' block color='primary'>
Sign In
</Button>
</CardFooter>
</Form>
</Card>
</Col>
</Row>
</Container>
);
}
Example #26
| Source File: blog.component.js From blogApp with MIT License | 4 votes |
|
render() {
return (
<div className='pt-2 px-3'>
<div className='row mr-auto ml-0 mb-4 mt-0'>
<Button
color='primary'
size='lg'
onClick={() => {
window.location.href = "/";
}}
style={{
width: "60px",
height: "60px",
borderRadius: "50%",
}}>
<FontAwesomeIcon icon={faArrowLeft} />
</Button>
</div>
{!this.state.loaded ? (
<ReactLoading
type={"spin"}
color={"orange"}
height={"100vh"}
width={"40%"}
className='loading'
/>
) : (
<Card id='blog' className='p-2 col-12 singleBlog'>
<CardImg
src={this.state.image}
alt='Card image cap'
className='img-thumbnail'
/>
<CardBody>
<CardTitle className='text-primary'>
<h5>
{this.state.title}
<span className='float-right text-secondary'>
{"-"}
<em>@{this.state.author.username}</em>
</span>
</h5>
</CardTitle>
{this.state.date !== "" && (
<CardSubtitle className='text-dark'>
<FontAwesomeIcon
icon={faCalendar}
className='mr-2'
/>
{new Intl.DateTimeFormat("en-US", {
month: "long",
day: "numeric",
year: "numeric",
hour: "numeric",
minute: "numeric",
}).format(Date.parse(this.state.date))}
<span className='float-right'>
<FontAwesomeIcon
className='text-danger'
icon={faHeart}
/>{" "}
{this.state.likes.length}
</span>
</CardSubtitle>
)}
<CardText>
<br />
{this.state.body}
</CardText>
</CardBody>
<CardFooter>
{this.props.user !== null &&
this.props.user._id ===
this.state.author.id && (
<div
style={{ display: "flex" }}
className='p-1'>
<Button
className='btn btn-danger mr-1'
style={{ width: "48%" }}
onClick={this.deleteBlog}>
Delete
</Button>{" "}
<Button
className='btn btn-warning ml-1'
style={{ width: "48%" }}
onClick={this.toggleModal}>
Edit
</Button>
</div>
)}
</CardFooter>
</Card>
)}
<Modal
isOpen={this.state.isModalOpen}
fade={false}
toggle={this.toggleModal}>
<ModalHeader toggle={this.toggleModal}>
Add a blog
</ModalHeader>
<Form onSubmit={this.onSubmit}>
<ModalBody>
<FormGroup>
<Label htmlFor='title'>title</Label>
<Input
type='text'
id='title'
onChange={this.ontitleChange}
value={this.state.title}
name='title'
/>
</FormGroup>
<FormGroup>
<Label htmlFor='imageURL'>imageURL</Label>
<Input
type='text'
id='imageURL'
onChange={this.onimgChange}
value={this.state.image}
name='imageURL'
/>
</FormGroup>
<FormGroup>
<Label htmlFor='body'>body</Label>
<Input
type='textarea'
id='body'
onChange={this.onbodyChange}
value={this.state.body}
name='body'
/>
</FormGroup>
</ModalBody>
<ModalFooter>
<Button
type='submit'
value='submit'
color='primary'>
UPDATE BLOG
</Button>
</ModalFooter>
</Form>
</Modal>
</div>
);
}
Example #27
| Source File: App.js From RT7-example with MIT License | 4 votes |
|
App = () => {
const [data, setData] = useState([]);
useEffect(() => {
const doFetch = async () => {
const response = await fetch('https://randomuser.me/api/?results=100');
const body = await response.json();
const contacts = body.results;
console.log(contacts);
setData(contacts);
};
doFetch();
}, []);
const renderRowSubComponent = (row) => {
const {
name: { first, last },
location: { city, street, postcode },
picture,
cell,
} = row.original;
return (
<Card style={{ width: '18rem', margin: '0 auto' }}>
<CardImg top src={picture.large} alt='Card image cap' />
<CardBody>
<CardTitle>
<strong>{`${first} ${last}`} </strong>
</CardTitle>
<CardText>
<strong>Phone</strong>: {cell} <br />
<strong>Address:</strong>{' '}
{`${street.name} ${street.number} - ${postcode} - ${city}`}
</CardText>
</CardBody>
</Card>
);
};
const columns = useMemo(
() => [
{
Header: () => null,
id: 'expander', // 'id' is required
Cell: ({ row }) => (
<span {...row.getToggleRowExpandedProps()}>
{row.isExpanded ? '?' : '?'}
</span>
),
},
{
Header: 'Title',
accessor: 'name.title',
disableSortBy: true,
Filter: SelectColumnFilter,
filter: 'equals',
},
{
Header: 'First Name',
accessor: 'name.first',
},
{
Header: 'Last Name',
accessor: 'name.last',
},
{
Header: 'Email',
accessor: 'email',
},
{
Header: 'City',
accessor: 'location.city',
},
{
Header: 'Hemisphere',
accessor: (values) => {
const { latitude, longitude } = values.location.coordinates;
const first = Number(latitude) > 0 ? 'N' : 'S';
const second = Number(longitude) > 0 ? 'E' : 'W';
return first + '/' + second;
},
disableSortBy: true,
Filter: SelectColumnFilter,
filter: 'equals',
Cell: ({ cell }) => {
const { value } = cell;
const pickEmoji = (value) => {
let first = value[0]; // N or S
let second = value[2]; // E or W
const options = ['⇖', '⇗', '⇙', '⇘'];
let num = first === 'N' ? 0 : 2;
num = second === 'E' ? num + 1 : num;
return options[num];
};
return (
<div style={{ textAlign: 'center', fontSize: 18 }}>
{pickEmoji(value)}
</div>
);
},
},
],
[]
);
return (
<Container style={{ marginTop: 100 }}>
<TableContainer
columns={columns}
data={data}
renderRowSubComponent={renderRowSubComponent}
/>
</Container>
);
}
Example #28
| Source File: add.js From hivemind with Apache License 2.0 | 4 votes |
|
PopperCard = ({ el, poppers }) => {
const { user } = useUser()
const [spinnerDisplay, setSpinnerDisplay] = useState('d-none')
const [title, setTitle] = useState('')
const inputRef = useRef(null)
useEffect(() => {
if (inputRef.current) {
inputRef.current.focus()
}
}, [])
const handleChange = (event) => {
setTitle(event.target.value)
}
const handleSubmit = async (event) => {
event.preventDefault()
setSpinnerDisplay('d-block')
const rootId = el.cy().nodes().id()
const key = rootId.split('/')[1]
const { ok, data: result, status } = await fetcher(
`/api/nodes?parentId=${el.id()}`,
user.token,
'POST',
JSON.stringify({ title })
)
const options = {
place: 'tr',
autoDismiss: 7,
}
if (ok) {
mutate([`/api/timeline/events?key=${key}`, user.token], null, true)
mutate([`/api/mindmaps/${key}?timestamp=`, user.token], null, true)
options.message = 'Added node!'
options.type = 'success'
} else {
options.message = `Failed to add node! - ${JSON.stringify(
result || status
)}`
options.type = 'danger'
}
if (window.notify) {
window.notify(options)
}
setSpinnerDisplay('d-none')
removePopper(el.id(), `popper-${el.id()}`, poppers)
}
return (
<Card className="border-dark">
<CardBody>
<CardTitle
tag="h5"
className="mw-100 mb-4"
style={{ minWidth: '50vw' }}
>
Add Child Node{' '}
<small className="text-muted">(of {el.data('title')})</small>
<CloseButton
divKey={`popper-${el.id()}`}
popperKey={el.id()}
poppers={poppers}
/>
</CardTitle>
<CardText tag="div" className="mw-100">
<Form onSubmit={handleSubmit} inline>
<FormGroup className="mb-2 mr-sm-2 mb-sm-0">
<Input
type="text"
name="title"
id="title"
placeholder="Type a title and hit ⏎"
value={title}
onChange={handleChange}
required
maxLength="50"
autoComplete="off"
innerRef={inputRef}
/>
</FormGroup>
<FormGroup className={spinnerDisplay}>
<Spinner />
</FormGroup>
</Form>
</CardText>
</CardBody>
</Card>
)
}
