react-icons/fi#FiLink JavaScript Examples
The following examples show how to use
react-icons/fi#FiLink.
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: index.js From react-motion-layout with MIT License | 6 votes |
|
features = [
{
title: 'Declarative',
icon: <FiCode size="45" />,
description: (
<div className="mt-6 leading-relaxed sm:text-lg md:text-xl xl:text-lg text-gray-600">
Easy as wraping your text or images with our SharedElement component.
</div>
),
},
{
title: 'Isolated',
icon: <FiArchive size="45" />,
description: (
<div className="mt-6 leading-relaxed sm:text-lg md:text-xl xl:text-lg text-gray-600">
It does not require external state management libs.
</div>
),
},
{
title: 'Router Ready',
icon: <FiLink size="45" />,
description: (
<div className="mt-6 leading-relaxed sm:text-lg md:text-xl xl:text-lg text-gray-600">
Dispatch animations when changing routes using our React-Router Link component.
</div>
),
},
]
Example #2
| Source File: ContactMe.js From tuliofaria.dev with MIT License | 6 votes |
|
ContactMe = () => {
return (
<div className='mx-8 px-8 relative border-orange border rounded md:mx-0 md:px-16 pb-4 pt-10 mt-6'>
<h3 className='absolute bg-orange text-white py-2 px-6 top-0 -mt-5 text-2xl font-bold uppercase'>Contact me</h3>
<p className='text-center md:text-left'>
<a href='https://linkedin.com/in/tuliofaria' title='LinkedIn Profile'>
<FaLinkedin className='text-5xl md:text-6xl inline-block md:mr-6' />
</a>
<a href='https://github.com/tuliofaria' title='GitHub Profile'>
<FaGithub className='text-5xl md:text-6xl inline-block md:mr-6' />
</a>
<a href='https://youtube.com/devplenocom' title='Youtube Channel'>
<FaYoutube className='text-5xl md:text-6xl inline-block md:mr-6' />
</a>
<a href='https://devpleno.com' title='Blog'>
<FiLink className='text-5xl md:text-6xl inline-block' />
</a>
<br />
<span className='inline-block mt-4'>or drop a line: [email protected]</span>
</p>
</div>
)
}
Example #3
| Source File: index.js From chat-e2ee with Apache License 2.0 | 5 votes |
|
LinkDisplay = ({ content }) => {
const chatLink = content.absoluteLink
? content.absoluteLink
: `${window.location.protocol}//${window.location.host}${content.link}`;
const textAreaRef = useRef(null);
const [buttonText, setButtonText] = useState('Copy');
const [darkMode] = useContext(ThemeContext);
const copyCodeToClipboard = () => {
textAreaRef.current.select();
document.execCommand('copy');
setButtonText('Copied');
};
const selectText = () => {
textAreaRef.current.select();
};
return (
<div className={styles.fullWidth}>
<div className={styles.divider} />
<span className={styles.pinDisplayMsg}>
Anyone with the PIN or the Link can join your chat
</span>
<div
className={`${styles.copyToClipboardContainer}
${!darkMode && styles.lightModeContainer}`}
>
<span className={styles.labelLinkTextArea}>Share chat link: </span>
<FiLink className={styles.linkIcon} />
<div className={styles.textAreaContainer}>
<input
ref={textAreaRef}
value={chatLink}
onClick={selectText}
className={`${styles.linkTextArea}
${!darkMode && styles.lightTextArea}`}
readOnly
/>
</div>
<div>
<button
className={`${styles.copyButton}
${!darkMode && styles.lightModeButton}`}
onClick={copyCodeToClipboard}
>
<FiCopy className={styles.copyIcon} /> {buttonText}
</button>
</div>
</div>
<div
className={`${styles.pinDisplay} ${darkMode ? styles.darkOpenLink : styles.lightOpenLink}`}
>
<span className={styles.pinValidMsg}>PIN (valid for 30 minutes)</span>
<PinDisplay content={content.pin} />
</div>
<div className={styles.divider} />
<div
className={`${styles.openLink}
${darkMode ? styles.darkOpenLink : styles.lightOpenLink}`}
>
<a href={`${chatLink}`} target="_blank" rel="noopener noreferrer">
Open chat <FiExternalLink />
</a>
</div>
</div>
);
}
Example #4
| Source File: Profile.js From react-portal with MIT License | 4 votes |
|
Profile = () => {
const [showSkeleton, setShowSkeleton] = useState(false);
const Creds = getRole();
const [user, setUser] = useState(null);
const [profileDrawer, setProfileDrawer] = useState(false);
const [passwordDrawer, setPasswordDrawer] = useState(false);
const [refresh, setRefresh] = useState(false);
const Image = styled.img`
width: 120px;
height: 120px;
border-radius: 50%;
padding: 4px;
border: 2px solid #d5d5d5;
transition: 0.2s all ease-out;
&:hover {
transition: 0.2s all ease-in;
border: 4px solid #4285f4;
}
`;
const LogoStyle = styled.span`
font-size: 28px;
color: #595959;
&:hover {
transition: 0.2s all ease-in;
color: #4285f4;
}
`;
const handleUpdateUser = () => {
setProfileDrawer(false);
};
const Refresh = () => {
setRefresh(!refresh);
};
const handleUpdatePassword = () => {
setPasswordDrawer(false);
};
useEffect(() => {
(async () => {
setShowSkeleton(true);
try {
if (true) {
const res = await getUserService(Creds.id);
if (res.message === "success") {
setUser(res.data);
setShowSkeleton(false);
} else {
_notification("warning", "Error", res.message);
}
}
} catch (err) {
_notification("error", "Error", err.message);
setShowSkeleton(false);
}
})();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [refresh]);
return (
<>
<PageTitle title="Profile" bgColor="#DB4437" />
<Skeleton loading={showSkeleton} active>
<>
<Row gutter={16}>
<Col xs={0} sm={0} md={4} lg={6}></Col>
<Col
xs={24}
sm={24}
md={8}
lg={6}
className="profile-image-container"
>
<Image
src={
user && user.image
? user.image
: "https://avatars.dicebear.com/v2/identicon/16042.svg"
}
alt="Profilepic"
/>
</Col>
<Col xs={24} sm={24} md={9} lg={6}>
<Row className="name center-align-row">
{user && user.name
? user.name
: "Not Available"}
</Row>
<Row className="center-align-row tag">
<Tag
color={
user && user.role === "lead"
? "red"
: user && user.role === "core"
? "geekblue"
: "orange"
}
style={{
textTransform: "capitalize",
fontSize: "14px",
textAlign: "center"
}}
>
{user && user.role ? user.role : "member"}
</Tag>
</Row>
<Row className="branch center-align-row">
<Col xs={0} sm={3} md={0}></Col>
<Col
xs={3}
sm={2}
md={4}
lg={3}
className="icon"
>
<FaUserGraduate />
</Col>
<Col
xs={5}
sm={3}
md={6}
lg={6}
className="text"
>
{user && user.branch ? user.branch : "N/A"}
</Col>
<Col
xs={3}
sm={2}
md={4}
lg={3}
className="icon"
>
<AiFillCalendar />
</Col>
<Col
xs={5}
sm={5}
md={6}
lg={6}
className="text"
>
{user && user.year ? user.year : "N/A"}
</Col>
<Col xs={0} sm={0}></Col>
</Row>
</Col>
<Col xs={0} sm={0} md={3} lg={6}></Col>
</Row>
<Divider style={{ color: "rgba(0,0,0,.25)" }}>
Personal Information
</Divider>
<Row>
<Col xs={0} sm={0} md={2} lg={6}></Col>
<Col xs={24} sm={12} md={10} lg={6}>
<Row
style={{ justifyContent: "center" }}
className="contact-container"
>
<Col
xs={6}
sm={6}
md={6}
lg={8}
className="logos"
>
<AiFillPhone style={{ fontSize: "26px" }} />
</Col>
<Col
xs={10}
sm={10}
md={12}
lg={16}
className="info"
>
{user && user.contact
? user.contact
: "Not Provided"}
</Col>
</Row>
</Col>
<Col xs={24} sm={12} md={10} lg={6}>
<Row
style={{
justifyContent: "center"
}}
className="dob-container"
>
<Col xs={6} sm={6} lg={8} className="logos">
<FaBirthdayCake
style={{ fontSize: "24px" }}
/>
</Col>
<Col xs={10} sm={12} lg={12} className="info">
{user && user.dob
? user.dob.split("T")[0]
: "Not Provided"}
</Col>
</Row>
</Col>
<Col xs={0} sm={0} md={2} lg={6}></Col>
</Row>
<Divider style={{ color: "rgba(0,0,0,.25)" }}>
Contact Information
</Divider>
<Row className="social-links-container">
{user ? (
<>
{user.linkedin ? (
<Col xs={4} sm={4} md={3} lg={2}>
<a
href={user.linkedin}
target="_blank"
rel="noopener noreferrer"
>
<LogoStyle>
<AiFillLinkedin />
</LogoStyle>
</a>
</Col>
) : null}
{user.twitter ? (
<Col xs={4} sm={4} md={3} lg={2}>
<a
href={user.twitter}
target="_blank"
rel="noopener noreferrer"
>
<LogoStyle>
<FaTwitterSquare />
</LogoStyle>
</a>
</Col>
) : null}
<Col xs={4} sm={4} md={3} lg={2}>
<a
href={`mailto:${user.email}`}
target="_blank"
rel="noopener noreferrer"
>
<LogoStyle>
<MdEmail />
</LogoStyle>
</a>
</Col>
{user.portfolio ? (
<Col xs={4} sm={4} md={3} lg={2}>
<a
href={user.portfolio}
target="_blank"
rel="noopener noreferrer"
>
<LogoStyle>
<FiLink />
</LogoStyle>
</a>
</Col>
) : null}
{user.github ? (
<Col xs={4} sm={4} md={3} lg={2}>
<a
href={user.github}
target="_blank"
rel="noopener noreferrer"
>
<LogoStyle>
<FaGithubSquare />
</LogoStyle>
</a>
</Col>
) : null}
</>
) : null}
</Row>
<Divider
style={{
color: "rgba(0,0,0,.25)"
}}
>
Bio
</Divider>
<Row
style={{
justifyContent: "center",
textAlign: "center"
}}
>
<Col sm={0} md={4} lg={6}></Col>
<Col sm={24} md={16} lg={12}>
{user && user.bio ? user.bio : "No Bio Available"}
</Col>
<Col sm={0} md={4} lg={6}></Col>
</Row>
<Divider style={{ color: "rgba(0,0,0,.25)" }}>
Update Details
</Divider>
<Row>
<Col sm={0} md={4} lg={6}></Col>
<Col
xs={24}
sm={12}
md={8}
lg={6}
className="button-container"
>
<Button
type="primary"
className="login-form-button"
onClick={() => {
setProfileDrawer(true);
}}
>
Update Details
</Button>
</Col>
<Col
xs={24}
sm={12}
md={8}
lg={6}
className="button-container"
>
<Button
type="primary"
className="login-form-button"
onClick={() => {
setPasswordDrawer(true);
}}
>
Change Password
</Button>
</Col>
<Col sm={0} md={4} lg={6}></Col>
</Row>
</>
<UpdateOptions
profileDrawer={profileDrawer}
setProfileDrawer={setProfileDrawer}
userData={Creds}
handleUpdateUser={handleUpdateUser}
Refresh={Refresh}
/>
<UpdateOptions
passwordDrawer={passwordDrawer}
setPasswordDrawer={setPasswordDrawer}
userData={Creds}
handleUpdatePassword={handleUpdatePassword}
/>
</Skeleton>
</>
);
}
Example #5
| Source File: UserProfile.js From react-portal with MIT License | 4 votes |
|
UserProfile = ({ visible, openProfile, uid }) => {
const [user, setUser] = useState(null);
const [showSkeleton, setShowSkeleton] = useState(false);
useEffect(() => {
(async () => {
setShowSkeleton(true);
try {
if (uid) {
const res = await getUserService(uid);
if (res.message === "success") {
setUser(res.data);
setShowSkeleton(false);
} else {
_notification("warning", "Error", res.message);
}
}
} catch (err) {
_notification("error", "Error", err.message);
}
})();
}, [uid]);
return (
<div>
<Modal
visible={visible}
footer={null}
closable={false}
onCancel={() => openProfile(false)}
style={{ top: "20px" }}
>
<IoIosArrowRoundBack
onClick={() => openProfile(false)}
style={{ fontSize: "28px", cursor: "pointer" }}
/>
<Skeleton loading={showSkeleton} active>
{user ? (
<Wrapper>
<Row gutter={16}>
<Col span={10}>
<Avatar
size={120}
src={
<Image
src={user.image}
alt="Profilepic"
/>
}
/>
</Col>
<Col span={14}>
<NameContainer>
<Name>
{user.name} <br />
<Row style={{ paddingTop: "10px" }}>
<Col span={12}>
<Tag
color={
user.role === "lead"
? "red"
: user.role ===
"core"
? "geekblue"
: "orange"
}
style={{
marginBottom: "5px",
textTransform:
"capitalize",
fontSize: "14px",
width: "75%",
textAlign: "center"
}}
>
{user.role}
</Tag>
</Col>
<Designation span="12">
{user.designation}
</Designation>
</Row>
</Name>
<Branch>
<Row gutter={12}>
<Col
span={2}
style={{
paddingTop: "2px"
}}
>
<FaUserGraduate />
</Col>
<Col span={6}>
{user.branch
? user.branch
: "N/A"}
</Col>
<Col
span={3}
style={{
marginTop: "2px"
}}
>
<AiFillCalendar />
</Col>
<Col>
{user.year
? user.year
: "N/A"}
</Col>
</Row>
</Branch>
</NameContainer>
</Col>
</Row>
<Divider style={{ color: "rgba(0,0,0,.25)" }}>
Personal Information
</Divider>
<Row>
<Col span={12}>
<Row>
<Col span={6}>
<Logo>
<AiFillPhone
style={{ fontSize: "26px" }}
/>
</Logo>
</Col>
<Col span={218}>
<Info>
{user.contact
? user.contact
: "Not Provided"}
</Info>
</Col>
</Row>
</Col>
<Col span={12}>
<Row>
<Col span={6}>
<Logo>
<FaBirthdayCake
style={{ fontSize: "24px" }}
/>
</Logo>
</Col>
<Col span={18}>
<Info>
{user.dob
? user.dob.split("T")[0]
: "Not Provided"}
</Info>
</Col>
</Row>
</Col>
</Row>
<Divider style={{ color: "rgba(0,0,0,.25)" }}>
Bio
</Divider>
<Row
style={{
textAlign: "center",
marginRight: "auto !important",
marginLeft: "auto !important",
justifyContent: "center",
display: "flex"
}}
>
<Col span={24}>
{user.bio ? user.bio : "No Bio Available"}
</Col>
</Row>
<Divider style={{ color: "rgba(0,0,0,.25)" }}>
Contact Me
</Divider>
<Row
style={{
textAlign: "center",
marginRight: "auto !important",
marginLeft: "auto !important",
justifyContent: "center",
display: "flex"
}}
>
<Col span={2}></Col>
{user.linkedin ? (
<Col span={4}>
<a
href={user.linkedin}
target="_blank"
rel="noopener noreferrer"
>
<LogoStyle>
<AiFillLinkedin />
</LogoStyle>
</a>
</Col>
) : null}
{user.twitter ? (
<Col span={4}>
<a
href={user.twitter}
target="_blank"
rel="noopener noreferrer"
>
<LogoStyle>
<FaTwitterSquare />
</LogoStyle>
</a>
</Col>
) : null}
<Col span={4}>
<a
href={`mailto:${user.email}`}
target="_blank"
rel="noopener noreferrer"
>
<LogoStyle>
<MdEmail />
</LogoStyle>
</a>
</Col>
{user.portfolio ? (
<Col span={4}>
<a
href={user.portfolio}
target="_blank"
rel="noopener noreferrer"
>
<LogoStyle>
<FiLink />
</LogoStyle>
</a>
</Col>
) : null}
{user.github ? (
<Col span={4}>
<a
href={user.github}
target="_blank"
rel="noopener noreferrer"
>
<LogoStyle>
<FaGithubSquare />
</LogoStyle>
</a>
</Col>
) : null}
<Col span={2}></Col>
</Row>
<Row
style={{
float: "right",
paddingBottom: "10px"
}}
>
<span style={{ paddingRight: "10px" }}>
Last active
</span>
<Tag color="green">
{user.lastActiveAt
? moment(user.lastActiveAt).format(
"DD MMM YYYY hh:mm"
)
: "never"}
</Tag>
</Row>
</Wrapper>
) : null}
</Skeleton>
</Modal>
</div>
);
}
