react-icons/bi#BiLinkExternal JavaScript Examples
The following examples show how to use
react-icons/bi#BiLinkExternal.
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: ProjectCards.js From datasciencefolio with MIT License | 6 votes |
function ProjectCards(props) {
return (
<Card className="project-card-view">
<Card.Img variant="top" src={props.imgPath} alt="card-img" />
<Card.Body>
<Card.Title>{props.title}</Card.Title>
<Card.Text style={{ textAlign: "justify" }}>
{props.description}
</Card.Text>
<Button variant="primary" href={props.link} target="_blank">
<BiLinkExternal />
{props.isBlog ? "View Blog" : "View Project"}
</Button>
<Button variant="primary" href={props.link} target="_blank">
<BiLinkExternal />
{props.isBlog ? "View Blog" : "View Project"}
</Button>
</Card.Body>
</Card>
);
}
Example #2
Source File: book.js From Books-Library-using-ReactJs with MIT License | 4 votes |
Book = ({ id, volumeInfo }) => {
const imageVariants = {
hover: {
scale: 1.7,
boxShadow: "0px 0px 8px #000",
transition: {
duration: 0.5,
type: "spring",
delay: 0.15,
},
},
};
let { title, authors, publisher, previewLink, imageLinks } = volumeInfo;
//setting up default values for volume info data
title = title || "Title is not available";
authors = authors || "Author(s) name not available";
publisher = publisher || "Publisher company not available";
previewLink = previewLink || "https://books.google.co.in/";
return (
<section key={id} className="loading-card">
<div>
<div>
<motion.img
src={imageLinks ? imageLinks.thumbnail : defaultBook}
width="100px"
alt="Book-cover"
variants={imageVariants}
whileHover="hover"
/>
</div>
<div>
{title && (
<div>
<h3 className="inline">{title}</h3>
</div>
)}
</div>
<div>
{authors && (
<h4 style={{ paddingBottom: "1rem", color: "black" }}>
{" "}
Author:{" "}
<span
style={{
fontWeight: "bold",
color: "#3B3B3B",
}}
>
{" "}
{authors}{" "}
</span>
</h4>
)}
</div>
<div>
{publisher && (
<h5 style={{ paddingBottom: "1rem", color: "black" }}>
{" "}
Published by:{" "}
<span
style={{
fontWeight: "bold",
color: "#3B3B3B",
}}
>
{" "}
{publisher}{" "}
</span>
</h5>
)}
</div>
<div>
{previewLink && (
<h5
style={{
fontWeight: "bold",
color: "black",
paddingBottom: "1rem",
}}
>
Read more :{" "}
<a href={previewLink} target="_blank" rel="noreferrer">
{" "}
Google Books <BiLinkExternal></BiLinkExternal>{" "}
</a>
</h5>
)}
</div>
{/* <div
style={{
display: "flex",
justifyContent: "center",
alignItems: "center",
paddingTop: "1rem",
}}
> {language && }
<p>
{" "}
<span style={{ fontWeight: "bold", color: "black" }}>
{" "}
Language :{" "}
</span>{" "}
{language}{" "}
</p>
<p>
{" "}
<span
style={{
fontWeight: "bold",
color: "black",
marginLeft: "1rem",
}}
>
{" "}
Average Rating :{" "}
</span>{" "}
{averageRating}
</p>
</div> */}
</div>
</section>
);
}