@fortawesome/free-solid-svg-icons#faCalendar JavaScript Examples
The following examples show how to use
@fortawesome/free-solid-svg-icons#faCalendar.
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: 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 #2
| Source File: Sidebar.jsx From MyHome-Web with Apache License 2.0 | 5 votes |
|
getLinks() {
return [
{
link: '/',
icon: faHome,
text: 'Home',
},
{
link: '/notifications',
icon: faBell,
text: 'Notifications',
},
{
link: '/bookamenity',
icon: faCalendar,
text: 'Book Amenity',
},
{
link: '/payments',
icon: faMoneyBill,
text: 'Payments',
},
{
link: '/settings',
icon: faCogs,
text: 'Settings',
},
{
normal: true,
link: 'https://example.org',
icon: faQuestion,
text: 'Help',
},
{
normal: true,
icon: faComment,
link: 'https://github.com/',
text: 'Feedback',
},
];
}
Example #3
| Source File: jobDetails.js From open-jobboard with Apache License 2.0 | 4 votes |
|
JobDetails = (props) => {
const [firstLoad, setFirstLoad] = useState(true);
const [job, setJob] = useState(null);
useEffect(() => {
props.fetchJob({jobKey: props.jobKey})
},[props.jobKey]);
useEffect(() => {
if(props.job.s) {
setJob(props.job)
}
return () => {
setJob(null)
}
}, [props.job])
useEffect(() => {
if(!firstLoad) {
if(props.profile?.s && props.profile?.put) {
swal({
title: "Merci d’avoir déposé votre candidature!",
text: "L’un de nos consultants va l’étudier et reviendra vers vous.",
icon: "success",
})
}
if(props.profile?.f && props.profile?.put) {
swal(
{
type: 'error',
title: 'Oops...',
text: 'Un problème est survenu, veuillez essayer plus tard',
}
)
}
}
return () => {
setFirstLoad(false)
};
},[props.profile])
const jobData = job?.payload || null
let taggy = ""
if(props.documentParsing.s) {
const text = props.documentParsing.payload.text
const documentParsing = props.documentParsing.payload.ents.filter(item => item.label !== 'JobTitle')
const spans = documentParsing.map(ent => {
switch (ent.label) {
case "FirstName":
return { type: "prénom", start: ent.start, end: ent.end }
case "LastName":
return { type: "nom", start: ent.start, end: ent.end }
case "Date":
return { type: "date", start: ent.start, end: ent.end }
case "Duration":
return { type: "durée", start: ent.start, end: ent.end }
case "Location":
return { type: "localisation", start: ent.start, end: ent.end }
case "Company":
return { type: "entreprise", start: ent.start, end: ent.end }
// case "JobTitle":
// return { type: "poste", start: ent.start, end: ent.end }
case "Task":
return { type: "tâche", start: ent.start, end: ent.end }
case "School":
return { type: "école", start: ent.start, end: ent.end }
case "EduTitle":
return { type: "formation", start: ent.start, end: ent.end }
case "Course":
return { type: "cours", start: ent.start, end: ent.end }
case "HardSkill":
return { type: "savoir-faire", start: ent.start, end: ent.end }
case "SoftSkill":
return { type: "savoir-être", start: ent.start, end: ent.end }
case "Certification":
return { type: "certification", start: ent.start, end: ent.end }
case "Language":
return { type: "langue", start: ent.start, end: ent.end }
case "Interest":
return { type: "interêt", start: ent.start, end: ent.end }
case "Email":
return { type: "email", start: ent.start, end: ent.end }
case "Phone":
return { type: "téléphone", start: ent.start, end: ent.end }
case "URL":
return { type: "site-web", start: ent.start, end: ent.end }
default:
return { type: ent.label.toLowerCase(), start: ent.start, end: ent.end }
}
})
const ents = [
{ type: 'prénom', color: {h: 303, s: 98.1, l: 42.2, a: 1}},
{ type: 'nom', color: {h: 191, s: 95, l: 23, a: 1}},
{ type: 'date', color: {h: 229, s: 51.9, l: 54.3, a: 1}},
{ type: 'durée', color: {h: 321, s: 70.9, l: 67.6, a: 1}},
{ type: 'localisation', color: {h: 94, s: 48.6, l: 50.4, a: 1}},
{ type: 'entreprise', color: {h: 71, s: 59.5, l: 51.6, a: 1}},
// { type: 'poste', color: {h: 52, s: 62.5, l: 43.9, a: 1}},
{ type: 'tâche', color: {h: 80, s: 75.5, l: 53.1, a: 1}},
{ type: 'école', color: {h: 282, s: 98.6, l: 71, a: 1}},
{ type: 'formation', color: {h: 291, s: 98.9, l: 36.1, a: 1}},
{ type: 'cours', color: {h: 274, s: 64.9, l: 19, a: 1}},
{ type: 'savoir-faire', color: {h: 203, s: 79.9, l: 61, a: 1}},
{ type: 'savoir-être', color: {h: 200, s: 6, l: 80.4, a: 1}},
{ type: 'certification', color: {h: 285, s: 55.7, l: 53.9, a: 1}},
{ type: 'langue', color: {h: 168, s: 82, l: 52.2, a: 1}},
{ type: 'interêt', color: {h: 272, s: 32.7, l: 43.7, a: 1}},
{ type: 'email', color: {h: 351, s: 70.3, l: 61.8, a: 1}},
{ type: 'téléphone', color: {h: 90, s: 23.7, l: 53.7, a: 1}},
{ type: 'site-web', color: {h: 204, s: 93.9, l: 44.9, a: 1}}
]
taggy = (<Taggy text={text} spans={spans} ents={ents} />)
}
if(jobData) {
const name = jobData?.name;
const descriptionContent = jobData?.sections?.filter(section => section.title === 'description')?.[0]?.description || ''
const profileContent = jobData?.sections?.filter(section => section.title === 'profile')?.[0]?.description || ''
const location = jobData?.location?.text || ''
const company = jobData?.tags?.filter(tag => tag.name === 'company')?.[0]?.value || ''
const category = jobData?.tags?.filter(tag => tag.name === 'category')?.[0]?.value || ''
const contract = jobData?.tags?.filter(tag => tag.name === 'type')?.[0]?.value || ''
// const activity = jobData?.tags?.filter(tag => tag.name === 'field_of_activity')?.[0]?.value || ''
const creationDate = moment(jobData?.created_at).format('DD MMM YYYY')
const profileJobTag = { name: 'application_board_job_key', value: `${process.env.SOURCE_KEY}-${jobData.key}` }
return (
<>
<div className="col-20 col-offer sticky col-33">
{/* <Link to="/jobs" className="button button--light large">
<FontAwesomeIcon className="icon-left" icon={faArrowLeft} /> Retour aux offres
</Link> */}
<div className="card jobDetails">
<div className="tags search-box">
{props.score && (
<div className="score-wrapper">
<Score
score={props.score}
/>
</div>
)}
{company && (
<div className="job-tag">
<div className="icon-fixed-width"><FontAwesomeIcon className="icon-left" icon={faBriefcase} /></div>{company}
</div>
)}
<h3 style={{marginBottom: '1rem'}}>Le poste</h3>
{contract && (
<div className="job-tag">
<div className="icon-fixed-width"><FontAwesomeIcon className="icon-left" icon={faFileAlt} /></div>{contract}
</div>
)}
{category && (
<div className="job-tag">
<div className="icon-fixed-width"><FontAwesomeIcon className="icon-left" icon={faIndustry} /></div>{category}
</div>
)}
{creationDate && (
<div className="job-tag">
<div className="icon-fixed-width"><FontAwesomeIcon className="icon-left" icon={faCalendar} /></div>{creationDate}
</div>
)}
{location && (
<div className="job-tag">
<div className="icon-fixed-width"><FontAwesomeIcon className="icon-left" icon={faMapMarkerAlt} /></div>{location}
</div>
)}
</div>
<div className="details__drop">
{props.file?.fileName ? (
<div className="apply">
{props.profile?.payload?.tags?.filter(tag => JSON.stringify(tag) === JSON.stringify(profileJobTag)).length > 0 ? (
<h3 className="text-center">Vous avez candidaté à cette offre.</h3>
):(
<button
className="button button-large drop-button"
onClick={() => props.putProfile({profile: props.profile.payload, jobKey: jobData.key})}
disabled={props.profile?.r}
>
{props.profile?.r ? <span className="loader"></span> : 'POSTULER'}
</button>
)}
</div>
)
:
(
<div>
<Dropzone
addProfile={props.addProfile}
profile={props.profile}
redirectTojobs={false}
removeProfile={props.removeProfile}
file={props.file}
details
/>
</div>
)
}
</div>
</div>
{props.documentRevealing.s && (
<Revealing revealing={props.documentRevealing} />
)}
</div>
<div className="col-60 col-67">
{props.documentParsing.s && (
<div className="jobs details">
<h3>Description du poste</h3>
<div className="details__description">
{taggy}
</div>
<Share
socialConfig={{
twitterHandle: 'hrflowai',
config: {
url: `https://demo.cvbox.com/?job_key=${jobData.key}&board_key=49348f504e997c501e45a3634dce5a865370ff90`,
title: name,
},
}}
/>
</div>
)}
{props.documentParsing.r && (
<div className="loader" style={{margin: 'auto'}}></div>
)}
</div>
<div className="col-20 col-33 col-offer">
{props.jobs?.payload?.jobs?.length ? (
<div>
<h3>{props.file?.fileName ? 'Offres recommandées' : 'Autres offres'}</h3>
<RelatedJobs jobs={props.jobs.payload.jobs.filter(job => job.key !== jobData.key).splice(0, 3)} />
</div>
)
:
(
''
)
}
</div>
</>
)
}
if(props.job.f) {
return (
<div style={{display: 'flex', justifyContent: 'center', width: '100%'}}>
<ErrorMessage message="Aucun résultat trouvé" />
</div>
)
}
return (
<>
<div className="loader" style={{margin: 'auto'}}></div>
</>
)
}
Example #4
| 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 #5
| Source File: blogList.component.js From blogApp with MIT License | 4 votes |
|
render() {
const blog = this.props.blog;
return (
<div
className='col-12 col-md-6 col-lg-4 col-xl-3 mb-5'
key={blog._id}>
<Card className='p-1 m-1 h-100' id='cards'>
<Card>
<CardImg
top
width='100%'
src={blog.image}
alt='Card image cap'
className='img-fluid'
/>
<CardImgOverlay>
<h3>
<FontAwesomeIcon
className='text-danger'
icon={faHeart}
/>{" "}
{this.state.likes}
</h3>
</CardImgOverlay>
</Card>
<CardBody className='d-flex flex-column'>
<CardTitle className='text-primary'>
<h5>
{blog.title}
{this.state.liked ? (
<span
className='float-right '
style={{ cursor: "pointer" }}
onClick={this.toggleLike}>
<FontAwesomeIcon
icon={faHeart}
className='text-danger'
/>
</span>
) : (
<span
className='float-right '
onClick={this.toggleLike}>
<FontAwesomeIcon
style={{
color: "rgba(0,0,0,0.2)",
cursor: "pointer",
}}
icon={faHeart}
className=''
/>
</span>
)}
</h5>
</CardTitle>
<CardSubtitle>
{"-"}
<em>@{blog.author.username}</em>
</CardSubtitle>
<br />
<CardText className=''>
{blog.body.substring(0, 70)}
{" ..."}
</CardText>
<Link
to={{
pathname: `/blog/${blog._id}`,
blog: { blog },
}}
className='text-decoration-none mt-auto'>
<Button className='btn btn-sm' color='success'>
Read More
</Button>
</Link>
</CardBody>
{blog.date && (
<CardFooter className='small '>
<FontAwesomeIcon
icon={faCalendar}
className='mr-2'
/>
{new Intl.DateTimeFormat("en-US", {
month: "long",
day: "numeric",
year: "numeric",
hour: "numeric",
minute: "numeric",
}).format(Date.parse(blog.date))}
{/* {blog.date} */}
</CardFooter>
)}
</Card>
</div>
);
}
Example #6
| Source File: myBlog.component.js From blogApp with MIT License | 4 votes |
|
render() {
const blog = this.props.blog;
return (
<div
className='col-12 col-md-6 col-lg-4 col-xl-3 mb-5'
key={blog._id}>
<Card className='p-1 m-1' id='cards'>
<Card>
<CardImg
top
width='100%'
src={blog.image}
alt='Card image cap'
className='img-fluid'
/>
<CardImgOverlay>
<h3>
<FontAwesomeIcon
className='text-danger'
icon={faHeart}
/>{" "}
{blog.likes.length}
</h3>
</CardImgOverlay>
</Card>
<CardBody>
<CardTitle className='text-primary'>
<h5>
{blog.title}
{this.state.liked ? (
<span
className='float-right '
style={{ cursor: "pointer" }}
onClick={this.toggleLike}
/>
) : (
<span
className='float-right '
onClick={this.toggleLike}>
{/* <FontAwesomeIcon
style={{
color: "rgba(0,0,0,0.2)",
cursor: "pointer",
}}
icon={faHeart}
className=''
/> */}
</span>
)}
</h5>
</CardTitle>
<CardSubtitle>
{"-"}
<em>@{blog.author.username}</em>
</CardSubtitle>
<br />
<CardText className=''>
{blog.body.substring(0, 50)}
{" ..."}
</CardText>
<div className='row justify-content-center'>
<Button
className='btn btn-sm col-5 mr-1'
color='success'>
<Link
to={{
pathname: `/blog/${blog._id}`,
blog: { blog },
}}
className='text-decoration-none text-white'>
Read More
</Link>
</Button>
<Button
className='col-5 btn btn-sm ml-1'
color='danger'
onClick={this.showLikes}>
Likes
</Button>
</div>
</CardBody>
{blog.date && (
<CardFooter className='small '>
<FontAwesomeIcon
icon={faCalendar}
className='mr-2'
/>
{new Intl.DateTimeFormat("en-US", {
month: "long",
day: "numeric",
year: "numeric",
hour: "numeric",
minute: "numeric",
}).format(Date.parse(blog.date))}
{/* {blog.date} */}
{this.state.isOpen && (
<div className='likes m-3'>
<h6>
<FontAwesomeIcon
className='text-danger'
icon={faHeart}
/>{" "}
{this.state.likes.length} Likes
</h6>
<ul className='list-group list-group-flush'>
{this.state.likes.map((user) => (
<li className='list-group-item py-2 pl-0'>
<FontAwesomeIcon
icon={faUserCircle}
// className='text-danger'
/>
{" "}
{user.username}
</li>
))}
</ul>
</div>
)}
</CardFooter>
)}
</Card>
</div>
);
}
Example #7
| Source File: Navigation.jsx From jitsi-party with MIT License | 4 votes |
|
render() {
const onClick = this.props.onClick;
const { north, south, east, west } = this.props.directions || {};
const mapButtonClass = this.props.showMapTooltip
? "map-button animated"
: "map-button";
const pokeButtonClass = this.state.showPokeOptions
? "poke-button focused"
: "poke-button";
const room = this.props.currentRoom.room;
const audio = this.props.rooms[room].audio;
const roomType = this.props.rooms[room].type;
const events = this.props.events;
const users = _.flatten(Object.values(this.props.users));
const handleClickMap = () => this.props.handleOpenModal("map");
const handleClickEvents = () => this.props.handleOpenModal("events");
const handleClickEmail = () => this.props.handleOpenModal("email");
return (
<div className="navigation-container">
<div className="column settings-container">
<div className="map-button-container">
{this.props.showMapButton && !this.props.hideSettings && (
<button
className={mapButtonClass}
title={Config.tooltips.map}
disabled={false}
onClick={handleClickMap}
>
<FontAwesomeIcon icon={faMap} />
</button>
)}
{/* {this.props.showMapTooltip &&
<div className="map-tooltip">you have unlocked the party map!</div>
} */}
</div>
<div className="events-button-container">
{events && events.length > 0 && !this.props.hideSettings && (
<button
className="events-button"
title={Config.tooltips.events}
onClick={handleClickEvents}
>
<FontAwesomeIcon icon={faCalendar} />
</button>
)}
</div>
<div className="email-button-container">
{Config.moderation &&
!_.isEmpty(Config.moderation.moderatorEmails) && (
<button
className="email-button"
title={Config.tooltips.moderator}
onClick={handleClickEmail}
>
<FontAwesomeIcon icon={faEnvelope} />
</button>
)}
</div>
{roomType.toUpperCase() === "CHATSTREAM" &&
this.props.currentRoom.entered &&
!this.props.hideSettings ? (
<div className="chat-button-container">
<button
className={mapButtonClass}
title={Config.tooltips.chat}
disabled={false}
onClick={() =>
this.setState({ hideChat: !this.state.hideChat })
}
>
<FontAwesomeIcon icon={faCommentAlt} />
</button>
</div>
) : null}
<div className="poke-button-container">
{Config.poke &&
this.props.isPokingUnlocked &&
!this.props.hideSettings && (
<button
className={pokeButtonClass}
title={Config.tooltips.poke}
onClick={this.handleClickPokeButton.bind(this)}
>
<FontAwesomeIcon icon={Config.poke.fontAwesomeIcon} />
</button>
)}
{this.state.showPokeOptions && (
<PokeOptions
users={users}
handlePoke={this.handlePoke.bind(this)}
/>
)}
</div>
<div className="audio-button-container">
{audio && (
<AudioPlayer
src={audio.path}
autoPlay={audio.autoPlay}
hide={audio.hideControls}
onChange={this.handleAudioChanged.bind(this)}
></AudioPlayer>
)}
</div>
</div>
<div className="column">
<button
className="west"
disabled={!west}
onClick={() => onClick(west)}
>
<FontAwesomeIcon icon={faArrowLeft} />
<span className="navigation-room-name">
{_.get(this.props.rooms[west], "name")}
</span>
</button>
</div>
<div className="column">
<button
className="north"
disabled={!north}
onClick={() => onClick(north)}
>
<FontAwesomeIcon icon={faArrowUp} />
<span className="navigation-room-name">
{_.get(this.props.rooms[north], "name")}
</span>
</button>
<button
className="south"
disabled={!south}
onClick={() => onClick(south)}
>
<FontAwesomeIcon icon={faArrowDown} />
<span className="navigation-room-name">
{_.get(this.props.rooms[south], "name")}
</span>
</button>
</div>
<div className="column">
<button
className="east"
disabled={!east}
onClick={() => onClick(east)}
>
<FontAwesomeIcon icon={faArrowRight} />
<span className="navigation-room-name">
{_.get(this.props.rooms[east], "name")}
</span>
</button>
</div>
<div className="column column-avatar">
<div className="puck-wrapper">
<img
src={
Config.avatars[this.props.user.avatar.type].images[
this.props.user.avatar.color
]
}
/>
</div>
</div>
</div>
);
}
Example #8
| Source File: content.js From yezz.me with MIT License | 4 votes |
|
render() {
return (
<StaticQuery
query={graphql`
query projectsQuery {
allProjectsJson {
edges {
node {
project
link
description
language
}
}
}
allLanguagesJson {
edges {
node {
id
language
}
}
}
allArticlesJson {
edges {
node {
article
link
description
language
}
}
}
allCommunityJson {
edges {
node {
communityName
communityLink
Stack
Year
Description
}
}
}
allTalkJson {
edges {
node {
subject
link
Description
}
}
}
}
`}
render={data => (
<>
<section className="content" id="content">
<div className="container">
<div className="subsection">
<h2 className="mt-5">
<span className="dot"></span>Last{" "}
<span className="word">Articles</span>
</h2>
<div className="row">
{data.allArticlesJson.edges.map(({ node }, index) => (
<div className="col-lg-4" key={index}>
<div className="card mb-4">
<div className="card-body">
<div className="card-title">
<h3>{node.article}</h3>
<h4>
<FontAwesomeIcon
icon={faTag}
className="mr-2"
/>
{node.language}
</h4>
</div>
<div className="card-text">{node.description}</div>
</div>
<div className="card-footer">
<a
href={node.link}
target="_blank"
rel="noreferrer"
>
View
</a>
</div>
</div>
</div>
))}
</div>
</div>
{/* + Technologies subsection */}
<div className="subsection">
<h2 className="mt-5">
<span className="dot"></span>Language &{" "}
<span className="word">Technology</span>
</h2>
<div className="row">
{data.allLanguagesJson.edges.map(({ node }, index) => (
<div className="col-lg-4 col-md-6" key={index}>
<div className="card">
<div className="card-text">
<div className="card-item">
<FontAwesomeIcon
icon={faCode}
className="mr-2 item-icon"
/>{" "}
{node.language}
</div>
</div>
</div>
</div>
))}
</div>
</div>
{/* - Technologies subsection */}
<br />
{/* - Community subsection */}
<div className="subsection">
<h2>
<span className="dot"></span>Community{" "}
</h2>
{data.allCommunityJson.edges.map(({ node }, index) => (
<div className="card">
<div className="card-body" key={index}>
<div className="card-title">
<a
href={node.communityLink}
target="_blank"
rel="noreferrer"
>
<h3>{node.communityName}</h3>
</a>
<h4>
<FontAwesomeIcon
icon={faUserNinja}
className="mr-2"
/>{" "}
{node.Stack}
</h4>
<h4>
<FontAwesomeIcon
icon={faCalendar}
className="mr-2"
/>{" "}
{node.Year}
</h4>
</div>
<div className="card-text">
<span>⭐</span> {node.Description}
</div>
</div>
</div>
))}
</div>
{/* + Projects subsection */}
<div className="subsection">
<h2 className="mt-5">
<a
href="https://github.com/yezz123"
target="_blank"
rel="noreferrer"
>
<span className="dot"></span>OpenSource
</a>{" "}
</h2>
<div className="row">
{data.allProjectsJson.edges.map(({ node }, index) => (
<div className="col-lg-4" key={index}>
<div className="card mb-4">
<div className="card-body">
<div className="card-title">
<h3>{node.project}</h3>
<h4>
<FontAwesomeIcon
icon={faCode}
className="mr-2"
/>
{node.language}
</h4>
</div>
<div className="card-text">{node.description}</div>
</div>
<div className="card-footer">
<a
href={node.link}
target="_blank"
rel="noreferrer"
>
View
</a>
</div>
</div>
</div>
))}
</div>
</div>
{/* + Talk subsection */}
<div className="subsection">
<h2>
<span className="dot"></span>Talks{" "}
</h2>
{data.allTalkJson.edges.map(({ node }, index) => (
<div className="card">
<div className="card-body" key={index}>
<div className="card-title">
<a href={node.link} target="_blank" rel="noreferrer">
<h4>{node.subject}</h4>
</a>
</div>
<div className="card-text">
<span>⭐</span> {node.Description}
</div>
</div>
</div>
))}
</div>
</div>
</section>
</>
)}
/>
)
}
