@fortawesome/free-solid-svg-icons#faBell JavaScript Examples
The following examples show how to use
@fortawesome/free-solid-svg-icons#faBell.
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: 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 #2
| Source File: Header.js From Postman-Clone with MIT License | 5 votes |
|
Header = () => {
return (
<div className="header">
<div className="header__row">
{/* Left Side Buttons */}
<div className="header__column">
<button className="header__newButton">
<FontAwesomeIcon icon={faPlusSquare} className="icon" />
New
</button>
<button className="header__button">Import</button>
<button className="header__button">Runner</button>
<button className="header__button">
<FontAwesomeIcon icon={faFileImport} className="icon" />
</button>
</div>
{/* Center Content */}
<div className="header__column">
<div className="header__titleWrapper">
<FontAwesomeIcon icon={faThLarge} id="header__titleIcon" />
<span className="header__titleText">My workspace</span>
<FontAwesomeIcon
icon={faChevronDown}
className="header_titleDropDownIcon"
/>
<button className="header__button" id="header__inviteButton">
<FontAwesomeIcon icon={faUserPlus} className="icon" />
Invite
</button>
</div>
</div>
{/* Right Side Content */}
<div className="header__column">
<div className="header__iconWrapper">
<FontAwesomeIcon
icon={faSyncAlt}
className="header__iconButton active"
/>
<FontAwesomeIcon
icon={faSatelliteDish}
className="header__iconButton"
/>
<FontAwesomeIcon icon={faWrench} className="header__iconButton" />
<FontAwesomeIcon icon={faBell} className="header__iconButton" />
<FontAwesomeIcon icon={faHeart} className="header__iconButton" />
<FontAwesomeIcon
icon={faMicrochip}
className="header__iconButton"
/>
<button className="header__button" id="header__upgradeButton">
Upgrade
<FontAwesomeIcon icon={faChevronDown} style={{ marginLeft: 5 }} />
</button>
</div>
</div>
</div>
</div>
);
}
Example #3
| Source File: CovidApp.js From covid-19-tracker with MIT License | 4 votes |
|
render() {
const { classes, setDarkMode, isDarkMode } = this.props;
const { mapData, isLoading, data, districtLevel, expanded, updates } =
this.state;
if (isLoading) {
return (
<div className={classes.loadingIcon}>
<Lottie options={defaultOptions} height={500} width={500} />
</div>
);
}
let displayUpdates;
try {
displayUpdates = updates
.slice(-5)
.reverse()
.map(({ update, timestamp }, i) => {
update = update.replace('\n', '<br/>');
return (
<div className={classes.updateBox} key={i}>
<h5 className={classes.updateHeading}>
{`${formatDistance(
new Date(timestamp * 1000),
new Date()
)} ago`}
</h5>
<h4
className={classes.updateText}
dangerouslySetInnerHTML={{
__html: update,
}}
></h4>
</div>
);
});
} catch (err) {}
return (
<>
<div className={classes.header}>
<h1 className={classes.heading}>
<span>Covid-19</span> India Trend
</h1>
<div className={classes.btnBox}>
<FontAwesomeIcon
icon={faSyncAlt}
className={classes.button}
onClick={this.fetchData}
/>
</div>
<div className={classes.lastUpdatedTime}>
Last Updated:{' '}
{this.formatDate(this.state.todayData.lastupdatedtime)}
</div>
<div className={classes.updates}>
<div className={classes.notification}>
{expanded ? (
<FontAwesomeIcon
icon={faBellSlash}
onClick={this.handleNotification}
/>
) : (
<div className={classes.notificationBell}>
<FontAwesomeIcon
icon={faBell}
onClick={this.handleNotification}
/>
</div>
)}
</div>
{expanded && <div className={classes.update}>{displayUpdates}</div>}
</div>
<div className="darkModeButton">
<label className="switch">
<input
type="checkbox"
onChange={setDarkMode}
checked={isDarkMode}
/>
<span className="slider round"></span>
</label>
</div>
</div>
<div>
<Overview
isDarkMode={isDarkMode}
data={this.state.todayData}
loadingStatus={this.loadingStatus}
/>
</div>
<div className={classes.content}>
<div className={classes.contentArea}>
<div className={classes.mapArea}>
<MapSection
data={data}
mapData={mapData}
isDarkMode={isDarkMode}
/>
</div>
</div>
<div className={classes.chartArea}>
<div className={classes.chartRes}>
<Charts
data={this.state.casesTimeline}
isLoading={this.state.isLoading}
/>
</div>
<div className={classes.tinyChartArea}>
<div className={classes.tinyChart}>
<div
className={classes.tinych}
style={{ background: 'rgba(249, 52, 94,.1)' }}
>
<h3 style={{ color: colors.red }}>confirmed</h3>
<Barchart
data={this.state.casesTimeline}
isLoading={this.state.isLoading}
dataKey="totalconfirmed"
stroke={colors.red}
/>
</div>
</div>
<div className={classes.tinyChart}>
<div
className={classes.tinych}
style={{ background: 'rgba(250, 100, 0,.1)' }}
>
<h3 style={{ color: colors.orange }}>active</h3>
<Barchart
data={this.state.casesTimeline}
isLoading={this.state.isLoading}
dataKey="totalactive"
stroke={colors.orange}
/>
</div>
</div>
<div className={classes.tinyChart}>
<div
className={classes.tinych}
style={{ background: 'rgba(28, 177, 66,.1)' }}
>
<h3 style={{ color: colors.green }}>Recovered</h3>
<Barchart
data={this.state.casesTimeline}
isLoading={this.state.isLoading}
dataKey="totalrecovered"
stroke={colors.green}
/>
</div>
</div>
<div className={classes.tinyChart}>
<div
className={classes.tinych}
style={{ background: 'rgba(98, 54, 255,.1)' }}
>
<h3 style={{ color: colors.purple }}>Deceased</h3>
<Barchart
data={this.state.casesTimeline}
isLoading={this.state.isLoading}
dataKey="totaldeceased"
stroke={colors.purple}
/>
</div>
</div>
</div>
</div>
<div className={classes.tableContainer}>
<h2 className={classes.tableHeading}>
State/UT Wise Data (Sortable){' '}
</h2>
<DisplayTable
tableData={data}
districtLevel={districtLevel}
isDarkMode={isDarkMode}
/>
</div>
</div>
<Footer />
</>
);
}
