@fortawesome/free-solid-svg-icons#faHeart JavaScript Examples
The following examples show how to use
@fortawesome/free-solid-svg-icons#faHeart.
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: Footer.js From gsocanalyzer with MIT License | 6 votes |
|
Footer = () => {
return (
<Container id='footer' fluid textAlign='center'>
<h3>
Made with <FontAwesomeIcon color='red' icon={faHeart} /> by Sparsh
Agrawal and Rishabh Dugaye |{' '}
<a href='https://github.com/Sparsh1212' target='_blank'>
<img
alt="Sparsh's Github Link"
src='data:image/png;base64,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'
height='15'
width='15'
/>{' '}
Sparsh
</a>
{' '}|{' '}
<a href='https://github.com/rishabhd786' target='_blank'>
<img
alt="Rishabh's Github Link"
src='data:image/png;base64,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'
height='15'
width='15'
/>{' '}
Rishabh
</a>
{' '}|{' '}
<button className="clear-storage-btn" onClick={() => {localStorage.clear(); window.location.reload()}}>Reset Bookmarks</button>
</h3>
</Container>
);
}
Example #2
| Source File: organization.js From climatescape.org with MIT License | 6 votes |
|
CapitalSection = ({
capitalProfile: { type, stage, checkSize, strategic, impactSpecific },
className,
}) => (
<SidebarSectionList title="Capital" className={className}>
{type && (
<SidebarSectionList.Item icon={faHandHoldingUsd} text={type.join(", ")} />
)}
{stage && (
<SidebarSectionList.Item
icon={faSearchDollar}
text={summarizeCapitalStages(stage)}
/>
)}
{checkSize && (
<SidebarSectionList.Item
icon={faMoneyCheck}
text={summarizeCapitalCheckSizes(checkSize)}
/>
)}
{strategic && (
<SidebarSectionList.Item icon={faHandshake} text="Strategic" />
)}
{impactSpecific && (
<SidebarSectionList.Item icon={faHeart} text="Impact-specific" />
)}
</SidebarSectionList>
)
Example #3
| Source File: organization.js From goodhere with MIT License | 6 votes |
|
CapitalSection = ({
capitalProfile: { type, stage, checkSize, strategic, impactSpecific },
className,
}) => (
<SidebarSectionList title="Capital" className={className}>
{type && (
<SidebarSectionList.Item icon={faHandHoldingUsd} text={type.join(", ")} />
)}
{stage && (
<SidebarSectionList.Item
icon={faSearchDollar}
text={summarizeCapitalStages(stage)}
/>
)}
{checkSize && (
<SidebarSectionList.Item
icon={faMoneyCheck}
text={summarizeCapitalCheckSizes(checkSize)}
/>
)}
{strategic && (
<SidebarSectionList.Item icon={faHandshake} text="Strategic" />
)}
{impactSpecific && (
<SidebarSectionList.Item icon={faHeart} text="Impact-specific" />
)}
</SidebarSectionList>
)
Example #4
| Source File: Footer.js From foodies with MIT License | 6 votes |
|
function Footer() {
return (
<div className="bg-background-tertiary text-copy-primary flex flex-row sm:flex-col sm:text-center sm:justify-around justify-between bg-gray-800 h-32">
<div className="container flex flex-col justify-center ml-12 sm:ml-0">
<p className="text-gray-100 text-sm sm:text-xs mb-1">
Powered by MealDB
</p>
<p className="text-gray-500 text-lg sm:text-sm">
Proudly built with ⚛
</p>
</div>
<div className="container flex flex-col justify-center mr-12 sm:text-center text-right text-gray-500 text-lg">
<p className="text-sm sm:text-xs text-white mb-1">
<FontAwesomeIcon icon={faCode} size="1x" /> by{" "}
<a href="https://twitter.com/heytulsiprasad">
@heytulsiprasad
</a>
</p>
<p className="text-md sm:text-sm">
Made possible by
<span className="text-gray-400 mx-2">
<FontAwesomeIcon icon={faCoffee} size="1x" />
</span>
and
<span className="text-gray-400 ml-2">
<FontAwesomeIcon icon={faHeart} size="1x" />
</span>
</p>
</div>
</div>
);
}
Example #5
| Source File: icons_library.js From official-website-backend with MIT License | 5 votes |
|
// Adding all the icons we need in the project
library.add(faHeart, faFire, faPalette, faMapPin, faMapMarker, faPhone, faMailBulk);
Example #6
| Source File: Footer.js From amazon-next with MIT License | 5 votes |
|
export default function Footer() {
return (
<footer className="lg:hidden bg-white fixed bottom-0 right-0 w-full shadow-lg py-4 px-5">
<nav>
<ul className="flex flex-row w-full justify-between">
<li>
<Link href="/">
<>
<FontAwesomeIcon
icon={faClipboardList}
size="lg"
className="text-gray-800"
/>
</>
</Link>
</li>{' '}
<li>
<Link href="/cart">
<>
<FontAwesomeIcon
icon={faShoppingBag}
size="lg"
className="text-gray-800"
/>
</>
</Link>
</li>
<li>
<Link href="/likes">
<>
<FontAwesomeIcon
icon={faHeart}
size="lg"
className="text-gray-800"
/>
</>
</Link>
</li>
</ul>
</nav>
</footer>
);
}
Example #7
| Source File: LateralMenu.js From amazon-next with MIT License | 5 votes |
|
export default function LateralMenu() {
const productsAmount = useSelector(state => state.cart.products.length);
const likesAmount = useSelector(state => state.user.likedProducts.length);
return (
<div className="hidden py-8 lg:flex flex-col justify-between items-center h-full shadow-lg">
<Link href="/">
<img
src="/static/amazon.png"
alt="Amazon"
aria-label="Amazon"
className="w-8 h-8 mb-8 rounded-full cursor-pointer"
/>
</Link>
<nav>
<ul>
<nav>
<ul>
<li className="mb-8">
<Link href="/">
<div>
<FontAwesomeIcon
icon={faClipboardList}
size="lg"
className="text-gray-500 cursor-pointer transition-colors hover:text-gray-600 duration-500 ease-in-out"
/>
</div>
</Link>
</li>{' '}
<li className="mb-8 relative">
<Link href="/cart">
<div>
<FontAwesomeIcon
icon={faShoppingBag}
size="lg"
className="text-gray-500 cursor-pointer transition-colors hover:text-gray-600 duration-500 ease-in-out"
/>
</div>
</Link>
<div className="bg-yellow-burn flex items-center text-white font-bold w-4 h-4 rounded-full p-1 absolute top-0 left-60p text-2xs">
{productsAmount}
</div>
</li>
<li className="mt-8 relative">
<Link href="/likes">
<div>
<FontAwesomeIcon
icon={faHeart}
size="lg"
className="text-gray-500 cursor-pointer transition-colors hover:text-gray-600 duration-500 ease-in-out"
/>
</div>
</Link>
<div className="bg-yellow-burn flex items-center text-white font-bold w-4 h-4 rounded-full p-1 absolute top-0 left-60p text-2xs">
{likesAmount}
</div>
</li>
</ul>
</nav>
</ul>
</nav>
<img
src="/static/user.jpg"
alt="Profile"
className="w-8 h-8 rounded-full"
/>
</div>
);
}
Example #8
| Source File: likes.js From amazon-next with MIT License | 5 votes |
|
export default function Likes() {
const { likedProducts } = useSelector(state => state.user);
return (
<Layout>
<motion.h1
variants={slide}
initial="initial"
animate="slidein"
className="font-bold text-3xl text-gray-500 mb-10"
>
Products that you like{' '}
<FontAwesomeIcon icon={faHeart} size="1x" />
</motion.h1>
{likedProducts.length > 0 ? (
<motion.ul
variants={stagger}
animate="animate"
className="flex flex-col w-full"
>
{likedProducts.map(product => (
<motion.div
variants={slide}
initial="initial"
animate="slidein"
key={product.id}
>
<Link href={`/details?productId=${product.id}`}>
<motion.li className="flex flex-row items-center mb-3 cursor-pointer">
<img
className="w-80 p-2 rounded"
src={product.image}
alt={product.name}
aria-label={product.name}
title={product.name}
/>
<strong className="ml-2 transition-colors duration-300 text-gray-700 hover:text-gray-800 hover:underline">
{product.name}
</strong>
</motion.li>
</Link>
</motion.div>
))}
</motion.ul>
) : (
<strong className="text-gray-700 text-2xl">
{' '}
There's no liked product yet{' '}
</strong>
)}
</Layout>
);
}
Example #9
| Source File: Footer.js From Anime-Tracker-Web-App with MIT License | 5 votes |
|
CustomFooter = () => {
return (
<div className={styles.footer}>
<a
href="https://www.facebook.com/mrabdullahch/"
target="_blank"
rel="noopener noreferrer"
>
<span size="30px" className="icon">
<FaFacebook />
</span>
</a>
<a
href="https://www.instagram.com/mrabdullahch/"
target="_blank"
rel="noopener noreferrer"
>
<span className="icon">
<GrInstagram />
</span>
</a>
<a
href="https://www.linkedin.com/in/abdullah-ch/"
target="_blank"
rel="noopener noreferrer"
>
<span className="icon">
<AiFillLinkedin />
</span>
</a>
<a
href="https://github.com/abdullah-ch"
target="_blank"
rel="noopener noreferrer"
>
<span className="icon">
<AiFillGithub />
</span>
</a>
<p className="love">
Made with <FontAwesomeIcon color="red" icon={faHeart} /> by
<span
className={styles.spann}
onClick={() =>
(window.location.href = "https://github.com/abdullah-ch")
}
>
Abdullah Ch
</span>
</p>
</div>
);
}
Example #10
| 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 #11
| Source File: details.js From amazon-next with MIT License | 4 votes |
|
export default function Details({ product, error }) {
const dispatch = useDispatch();
const isSelected = useSelector(state =>
state.cart.products.find(
selectedProduct => selectedProduct.id === product.id
)
);
const stars = useMemo(() => {
const initial = [];
for (let i = 1; i < product.stars; i += 1) {
initial.push(
<FontAwesomeIcon
key={i}
size="lg"
className="w-5"
icon={faStar}
color="#e69d3f"
/>
);
}
return initial;
}, [product.stars]);
const liked = useSelector(state =>
state.user.likedProducts.find(
likedProduct => likedProduct.id === product.id
)
);
function handleCart() {
if (isSelected) return dispatch(removeFromCartRequest(product.id));
return dispatch(addToCartRequest(product));
}
function handleLike() {
dispatch(likeProductRequest(product));
}
return (
<Layout>
<motion.div
className={`product-details h-screen px-12 py-8 flex flex-col ${error &&
'justify-center items-center'}`}
exit={{ opacity: 0 }}
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
>
{error ? (
<span className="text-xl text-center">
{' '}
<FontAwesomeIcon
icon={faExclamationTriangle}
color="red"
/>{' '}
There was an error while consulting the products{' '}
</span>
) : (
<motion.div className="flex flex-col lg:grid grid-cols-2 h-full py-12 lg:py-0">
<div className="h-full flex flex-col">
<Link href="/">
<div className="cursor-pointer transition-shadows duration-300 hover:shadow shadow-lg mb-5 lg:mb-0 rounded-full text-gray-500 w-12 h-12 flex items-center justify-center p-8">
<FontAwesomeIcon
icon={faArrowLeft}
size="lg"
/>
</div>
</Link>
<motion.img
src={product.image}
alt={product.name}
aria-label={product.name}
title={product.name}
initial={{ opacity: 0, x: -40 }}
animate={{ opacity: 1, x: 0 }}
exit={{ opacity: 0, x: -40 }}
transition={{ delay: 0.2 }}
className="lg:my-12 mx-0 h-300 max-w-480 self-center"
/>
</div>
<motion.div
variants={stagger}
className="h-full flex flex-col justify-between pr-8"
>
<motion.header
initial="fadeup"
animate="normal"
exit="exit"
>
<motion.h1
variants={fadeUp}
className="text-2xl mb-2 text-gray-800 font-bold"
>
{product.name}
</motion.h1>
<motion.div
variants={fadeUp}
className="flex flex-row"
>
{stars}{' '}
<span className="ml-2 font-light text-yellow-burn">
1540 reviews
</span>
</motion.div>
<motion.p
variants={fadeUp}
className="text-md text-gray-500 mt-8"
>
<DangerousHTML html={product.description} />
</motion.p>
</motion.header>
<motion.footer
variants={fadeUp}
initial="fadeup"
animate="normal"
exit="exit"
className="flex flex-col lg:flex-row w-full justify-between pt-5 pb-8"
>
<div className="flex flex-col">
<span className="text-gray-500">
Best price
</span>
<strong className="text-3xl text-gray-800">
${product.price / 100}
</strong>
</div>
<div className="flex flex-row items-center mt-5 lg:mt-0">
<Button
className="font-bold text-xl px-12 flex items-center justify-center lg:w-300 box-border"
title="Add to cart"
handleClick={handleCart}
>
{' '}
{isSelected
? 'Remove from cart'
: 'Add to cart'}
</Button>
<motion.button
className="ml-5 border-none bg-none outline-none"
type="button"
title="Save to my list"
onClick={handleLike}
whileTap={{ y: -10 }}
>
{liked ? (
<FontAwesomeIcon
size="lg"
icon={faHeart}
className="text-blue-500 hover:text-blue-600 transition-colors duration-500"
/>
) : (
<FontAwesomeIcon
size="lg"
icon={faHeartRegular}
className="text-blue-500 hover:text-blue-600 transition-colors duration-500"
/>
)}
</motion.button>
</div>
</motion.footer>
</motion.div>
</motion.div>
)}
</motion.div>
</Layout>
);
}
Example #12
| 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 #13
| 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 #14
| 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 #15
| Source File: home.jsx From codeinterview-frontend with Apache License 2.0 | 4 votes |
|
Home = () => {
const roomService = getRoomService();
let clicked = false;
toast.info(
`Hi! I'm currently hosting the backend for this site on Heroku and AWS free tiers so you might experience some failed requests and errors from time to time due to max connection limits. Sorry for being broke. (T▽T) Enjoy!`,
{ position: 'bottom-right', autoClose: false }
);
return (
<Container fluid className="p-4 wrapper text-center">
<Row className="d-flex flex-column justify-content-center">
<Card className="p-4 align-self-center mt-4 text-center welcome-card">
<Card.Body>
<Card.Title as="h3">Welcome to CodeInterview!</Card.Title>
<Card.Text>
CodeInterview is a home made solution and personal
self-learning project for online coding interviews by{' '}
<a
href="https://github.com/areebbeigh"
target="_blank"
rel="noopener noreferrer"
>
@areebbeigh
</a>
. No sign-ups, just create a room and share the URL.
<br />
You can also check it out on{' '}
<a
href="https://github.com/areebbeigh/codeinterview-backend"
target="_blank"
rel="noopener noreferrer"
>
GitHub
</a>
.
</Card.Text>
</Card.Body>
</Card>
</Row>
<Row className="d-flex flex-column justify-content-center">
<img
className="demo-image align-self-center"
src={DemoImage}
alt="demo"
/>
<Button
className="align-self-center mb-4 p-2"
size="sm"
variant="primary"
href="#"
onClick={() => {
if (clicked) return;
clicked = true;
toast.dark('Creating new room...');
roomService
.createNewRoom()
.then(room => {
toast.dark('Redirecting...');
window.location.href = `/room/${room.data.room_id}`;
})
.catch(err => {
toast.error(
`Failed to create new room: ${err.message}`
);
clicked = false;
});
}}
>
Try It Out!
</Button>
<Button
className="align-self-center p-2"
size="sm"
variant="light"
href="https://donorbox.org/donate-to-codeinterview?default_interval=o"
target="_blank"
>
<FontAwesomeIcon icon={faHeart} /> Donate
</Button>
</Row>
<MobileOnlyView>
<Dialog
ref={dialog => {
dialog.show({
body: `Hey. CodeInterview works best on desktops. Head on to your desktop browser. I'll wait :)`,
actions: [Dialog.OKAction()],
onHide: () => null,
});
}}
/>
</MobileOnlyView>
</Container>
);
}
Example #16
| Source File: footer.js From Girscript-Community-Website with MIT License | 4 votes |
|
Footer = () => {
return (
<React.Fragment>
<footer className={style["footer"]}>
<div className={style["footer-addr"]}>
<img src={images} alt="img" height="60px" width="260px" />
<address>
<div style={{color:"#da6d28"}}><b>MAILING ADDRESS </b></div>
<i className="fas fa-map-marker-alt"></i> 123 Anywhere St., Any City, State, Country 12345
<br />
</address>
<div style={{color:"#da6d28"}}><b>EMAIL ADDRESS </b></div>
[email protected]
</div>
<ul className={style["footer-nav"]}>
<li className={style["nav-item"]}>
<h2 className={style["nav-title"]}>NAVIGATION</h2>
<ul className={style["nav-ul"]}>
<li>
<Link to="/">About Us</Link>
</li>
<li>
<Link to="/">Contact</Link>
</li>
<li>
<Link to="/">Event</Link>
</li>
<li>
<Link to="/faqs">FAQs</Link>
</li>
</ul>
</li>
<li className={style["nav-item"]}>
<h2 className={style["nav-title"]}>OTHER</h2>
<ul className={style["nav-ul"]}>
<li>
<Link to="/">Privacy Policy</Link>
</li>
<li>
<Link to="/">Terms of Use</Link>
</li>
<li>
<Link to="/">Code of Conduct</Link>
</li>
</ul>
</li>
<li className={style["nav-item"]}>
<h2 className={style["nav-title"]}>SOCIAL</h2>
<ul className={style["nav-ul"]}>
<li>Be sure to give us a follow on the below social links</li>
</ul>
<div className={`col ${style["col"]}`}>
<ul className={style["social"]}>
<li>
<a
href="https://www.facebook.com/Girlscript"
target="_blank"
rel="noopener noreferrer"
><FontAwesomeIcon icon={faFacebook} size="lg" style={{ color: "#fff" }}/>
</a>
</li>
<li>
<a
href="https://twitter.com/girlscript1"
target="_blank"
rel="noopener noreferrer"
><FontAwesomeIcon icon={faTwitter} size="lg" style={{ color: "#fff" }}/>
</a>
</li>
<li>
<a
href="mailto:[email protected]"
target="_blank"
rel="noopener noreferrer"
><FontAwesomeIcon icon={faEnvelope} size="lg" style={{ color: "#fff" }}/>
</a>
</li>
</ul>
</div>
</li>
</ul>
<div className={style["footer-dash"]}>
<div className={style["footer-text"]}>
<p>
<b>Made with <FontAwesomeIcon icon={faHeart} style={{ color: "#DB3328" }}/> by
GirlScript Community</b>
</p>
</div>
</div>
</footer>
</React.Fragment>
);
}
