reactstrap#CardBody JavaScript Examples
The following examples show how to use
reactstrap#CardBody.
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: 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 #3
| 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 #4
| 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 #5
| 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 #6
| 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 #7
| 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 #8
| 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 #9
| 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 #10
| 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 #11
| 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 #12
| 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 #13
| 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 #14
| 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 #15
| 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 #16
| Source File: Dashboard.js From GB-GCGC with MIT License | 4 votes |
|
render(){
return (
<div className='container-fluid'>
<br></br>
<Card>
<Row style={{textAlign:"initial"}}>
<Col md="4"style={{"padding":"10px"}}>
<img src={this.state.images} style={{"height":"100px","width":"100px","border-radius": "50%"}}/>
Welcome {this.state.fname} {this.state.mname} {this.state.lname}
</Col>
<Col>
<h1 style={{"font-size": "xx-large","text-align": "end","padding": "35px","font-family": "Brush Script MT"}}>Have a Nice Day</h1>
</Col>
</Row>
</Card>
<br/>
<Card>
<Collapsible trigger="PersonalDetails" triggerStyle={{"textAlign":"end"}} style={{"textAlign":"center"}}>
<hr/>
<Personaldetails login={this.props.login}/>
</Collapsible>
</Card>
<br/>
<Card>
<Collapsible trigger="Academic Details">
<hr></hr>
<CardBody>
<br/>
<Row style={{"paddind-left":"25px"}}>
<Col md="4">
<Card color="success" className="Rounded p-3">
<CardTitle align="left">{this.state.SSC}</CardTitle>
<CardSubtitle align="left">Tenth Percentage</CardSubtitle>
</Card>
</Col>
<Col md="4">
<Card color="warning" className="Rounded p-3">
<CardTitle align="left">{this.state.inter}</CardTitle>
<CardSubtitle align="left">Inter Percentage</CardSubtitle>
</Card>
</Col>
<Col md="4">
<Card color="danger" className="Rounded p-3">
<CardTitle align="left">{(this.state.gpa*9.5).toFixed(2)}</CardTitle>
<CardSubtitle align="left">B Tech Percentage</CardSubtitle>
</Card>
</Col>
</Row><br></br>
<Collapsible trigger="More Info"><br></br>
<Row>
<Col md="4">
<Alert color="success" className="Rounded p-3">
<CardTitle align="left">{this.state.branch.slice(0,3)}</CardTitle>
<CardSubtitle align="left">Branch</CardSubtitle>
</Alert>
</Col>
<Col md="4">
<Alert color="warning" className="Rounded p-3">
<CardTitle align="left">{this.state.pass_category}</CardTitle>
<CardSubtitle align="left">Pass Category</CardSubtitle>
</Alert>
</Col>
<Col md="4">
<Alert color="danger" className="Rounded p-3">
<CardTitle align="left">{this.state.branch.slice(3,5)}</CardTitle>
<CardSubtitle align="left">Section</CardSubtitle>
</Alert>
</Col>
</Row>
</Collapsible>
</CardBody>
</Collapsible>
</Card>
<Card>
<Collapsible trigger="Leader Board">
<hr/>
<CardBody>
<br/>
<Leaderboard login={this.props.login}/>
</CardBody>
</Collapsible>
</Card>
<br/>
<Card>
<Collapsible trigger="Job Suitability">
<hr></hr>
<br></br>
<Row>
<Col md="6" className="pr-2 pt-2">
<JobFitment fitid={this.props.login}/>
</Col>
<Col md="6" className="p-2">
<CurrentJob jobid={this.props.login}/>
</Col>
</Row>
</Collapsible>
</Card>
<br></br>
<Card>
<Collapsible trigger="Assessment Report Internal">
<hr></hr>
<br/>
<ARI arii={this.props.login}/>
</Collapsible>
</Card>
<br/>
<Card>
<Collapsible trigger="Assessment Report External">
<hr></hr>
<br/>
<Col className="p-2">
<Cocubes cid={this.props.login}/>
</Col>
<Col className="p-2">
<Amcat aid={this.props.login}/>
</Col>
</Collapsible>
</Card>
<br></br>
<Card>
<Collapsible trigger="Training Attendance Report">
<hr></hr>
<ITA aid={this.props.login}/>
</Collapsible>
</Card>
<br></br>
<Card>
<Collapsible trigger="Placement Analysis">
<br/>
<hr></hr>
<Row>
<Table striped className="placements" 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 Eligible: {this.state.ce}</td>
<td md="6">Number of GD's cleared: {this.state.gdc}</td>
</tr>
<tr>
<td md="6">Number of Companies Attended: {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>
</Row>
<br></br>
<br></br>
<h6>Placements Analysis of {this.props.login}</h6>
<Placements login={this.props.login}/>
</Collapsible>
</Card>
<br/>
</div>
);
}
Example #17
| 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 #18
| 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 #19
| 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 #20
| 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 #21
| 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 #22
| 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>
)
}
Example #23
| Source File: ChatRoom.js From react-js-chat-webapp-example with MIT License | 4 votes |
|
function ChatRoom() {
const [chats, setChats] = useState([]);
const [users, setUsers] = useState([]);
const [nickname, setNickname] = useState('');
const [roomname, setRoomname] = useState('');
const [newchat, setNewchat] = useState({ roomname: '', nickname: '', message: '', date: '', type: '' });
const history = useHistory();
const { room } = useParams();
useEffect(() => {
const fetchData = async () => {
setNickname(localStorage.getItem('nickname'));
setRoomname(room);
firebase.database().ref('chats/').orderByChild('roomname').equalTo(roomname).on('value', resp => {
setChats([]);
setChats(snapshotToArray(resp));
});
};
fetchData();
}, [room, roomname]);
useEffect(() => {
const fetchData = async () => {
setNickname(localStorage.getItem('nickname'));
setRoomname(room);
firebase.database().ref('roomusers/').orderByChild('roomname').equalTo(roomname).on('value', (resp2) => {
setUsers([]);
const roomusers = snapshotToArray(resp2);
setUsers(roomusers.filter(x => x.status === 'online'));
});
};
fetchData();
}, [room, roomname]);
const snapshotToArray = (snapshot) => {
const returnArr = [];
snapshot.forEach((childSnapshot) => {
const item = childSnapshot.val();
item.key = childSnapshot.key;
returnArr.push(item);
});
return returnArr;
}
const submitMessage = (e) => {
e.preventDefault();
const chat = newchat;
chat.roomname = roomname;
chat.nickname = nickname;
chat.date = Moment(new Date()).format('DD/MM/YYYY HH:mm:ss');
chat.type = 'message';
const newMessage = firebase.database().ref('chats/').push();
newMessage.set(chat);
setNewchat({ roomname: '', nickname: '', message: '', date: '', type: '' });
};
const onChange = (e) => {
e.persist();
setNewchat({...newchat, [e.target.name]: e.target.value});
}
const exitChat = (e) => {
const chat = { roomname: '', nickname: '', message: '', date: '', type: '' };
chat.roomname = roomname;
chat.nickname = nickname;
chat.date = Moment(new Date()).format('DD/MM/YYYY HH:mm:ss');
chat.message = `${nickname} leave the room`;
chat.type = 'exit';
const newMessage = firebase.database().ref('chats/').push();
newMessage.set(chat);
firebase.database().ref('roomusers/').orderByChild('roomname').equalTo(roomname).once('value', (resp) => {
let roomuser = [];
roomuser = snapshotToArray(resp);
const user = roomuser.find(x => x.nickname === nickname);
if (user !== undefined) {
const userRef = firebase.database().ref('roomusers/' + user.key);
userRef.update({status: 'offline'});
}
});
history.goBack();
}
return (
<div className="Container">
<Container>
<Row>
<Col xs="4">
<div>
<Card className="UsersCard">
<CardBody>
<CardSubtitle>
<Button variant="primary" type="button" onClick={() => { exitChat() }}>
Exit Chat
</Button>
</CardSubtitle>
</CardBody>
</Card>
{users.map((item, idx) => (
<Card key={idx} className="UsersCard">
<CardBody>
<CardSubtitle>{item.nickname}</CardSubtitle>
</CardBody>
</Card>
))}
</div>
</Col>
<Col xs="8">
<ScrollToBottom className="ChatContent">
{chats.map((item, idx) => (
<div key={idx} className="MessageBox">
{item.type ==='join'||item.type === 'exit'?
<div className="ChatStatus">
<span className="ChatDate">{item.date}</span>
<span className="ChatContentCenter">{item.message}</span>
</div>:
<div className="ChatMessage">
<div className={`${item.nickname === nickname? "RightBubble":"LeftBubble"}`}>
{item.nickname === nickname ?
<span className="MsgName">Me</span>:<span className="MsgName">{item.nickname}</span>
}
<span className="MsgDate"> at {item.date}</span>
<p>{item.message}</p>
</div>
</div>
}
</div>
))}
</ScrollToBottom>
<footer className="StickyFooter">
<Form className="MessageForm" onSubmit={submitMessage}>
<InputGroup>
<Input type="text" name="message" id="message" placeholder="Enter message here" value={newchat.message} onChange={onChange} />
<InputGroupAddon addonType="append">
<Button variant="primary" type="submit">Send</Button>
</InputGroupAddon>
</InputGroup>
</Form>
</footer>
</Col>
</Row>
</Container>
</div>
);
}
Example #24
| Source File: Apexcharts.js From gedge-platform with Apache License 2.0 | 4 votes |
|
render() {
return (
<React.Fragment>
{/* <div className="page-content">
<Container fluid> */}
<Row>
<Col lg={12}>
<Card>
<CardBody>
<CardTitle className="mb-4">CPU 사용량</CardTitle>
<LineApexChart />
</CardBody>
</Card>
</Col>
</Row>
<Row>
<Col lg={12}>
<Card>
<CardBody>
<CardTitle className="mb-4">메모리 사용량</CardTitle>
<DashedLine />
</CardBody>
</Card>
</Col>
</Row>
{/* <Row>
<Col lg={6}>
<Card>
<CardBody>
<CardTitle className="mb-4"> Spline Area </CardTitle>
<SplineArea />
</CardBody>
</Card>
</Col>
<Col lg={6}>
<Card>
<CardBody>
<CardTitle className="mb-4"> Column Charts </CardTitle>
<Apaexlinecolumn />
</CardBody>
</Card>
</Col>
</Row>
<Row>
<Col lg={6}>
<Card>
<CardBody>
<CardTitle className="mb-4">Column with Data Labels </CardTitle>
<ColumnWithDataLabels />
</CardBody>
</Card>
</Col>
<Col lg={6}>
<Card>
<CardBody>
<CardTitle className="mb-4">Bar Chart</CardTitle>
<BarChart />
</CardBody>
</Card>
</Col>
</Row>
<Row>
<Col lg={6}>
<Card>
<CardBody>
<CardTitle className="mb-4">Line, Column & Area Chart </CardTitle>
<LineColumnArea />
</CardBody>
</Card>
</Col>
<Col lg={6}>
<Card>
<CardBody>
<CardTitle className="mb-4">Radial Chart</CardTitle>
<RadialChart />
</CardBody>
</Card>
</Col>
</Row>
<Row>
<Col lg={6}>
<Card>
<CardBody>
<CardTitle className="mb-4">Pie Chart </CardTitle>
<PieChart />
</CardBody>
</Card>
</Col>
<Col lg={6}>
<Card>
<CardBody>
<CardTitle className="mb-4">Donut Chart</CardTitle>
<DonutChart />
</CardBody>
</Card>
</Col>
</Row> */}
{/* </Container>
</div> */}
</React.Fragment>
);
}
