react-feather#Linkedin JavaScript Examples
The following examples show how to use
react-feather#Linkedin.
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 website with GNU General Public License v3.0 | 5 votes |
|
export default function Footer() {
const initialDiscordText = 'Roberto#1762';
const [discordText, setDiscordText] = useState(initialDiscordText);
function handleDiscordClick() {
navigator.clipboard.writeText("Roberto#1762").then(r => {
setDiscordText('Copied to clipboard!');
setTimeout(() => {
setDiscordText(initialDiscordText);
}, 1000);
});
}
return (
<>
<footer className="container px-5 py-8 mx-auto flex items-center sm:flex-row flex-col">
<p className="text-xl">
© {RomanNumerals(new Date().getFullYear())}
{" "}
<Link href="/">
<a>Robert S.</a>
</Link>
</p>
<span className="inline-flex sm:ml-auto sm:mt-0 mt-4 justify-center sm:justify-start gap-x-4 md:gap-2.5">
<a href="mailto:[email protected]" className="text-gray-400">
<Mail className="w-5 h-5" />
</a>
<a href="https://github.com/Wallvon" className="text-gray-400" target="_blank" rel="noopener noreferrer">
<svg
fill="currentColor"
className="w-5 h-5"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg">
<title>{siGithub.title}</title>
<path d={siGithub.path} />
</svg>
</a>
<button onClick={handleDiscordClick} className="text-gray-400 has-tooltip cursor-pointer hover:text-rose-600 duration-200">
<svg
fill="currentColor"
className="w-5 h-5"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg">
<title>{siDiscord.title}</title>
<path d={siDiscord.path} />
</svg>
<span className='tooltip bg-gray-800 text-white rounded shadow-lg p-1 -mt-14'>{discordText}</span>
</button>
<a href="https://www.linkedin.com/in/robert-stokreef/" className="text-gray-400" target="_blank" rel="noopener noreferrer">
<Linkedin fill="currentColor" strokeWidth="0" className="w-5 h-5" />
</a>
<a href="https://twitter.com/ThatGuy5275" className="text-gray-400" target="_blank" rel="noopener noreferrer">
<svg
fill="currentColor"
className="w-5 h-5"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg">
<title>{siTwitter.title}</title>
<path d={siTwitter.path} />
</svg>
</a>
<a href="https://instagram.com/robert.__.s" className="text-gray-400" target="_blank" rel="noopener noreferrer">
<svg
fill="currentColor"
className="w-5 h-5"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg">
<title>{siInstagram.title}</title>
<path d={siInstagram.path} />
</svg>
</a>
</span>
</footer>
</>
)
}
Example #2
| Source File: Footer.js From webDevsCom with MIT License | 5 votes |
|
Footer = () => {
return (
<footer className='footer'>
<ReactTooltip type='light' />
<p className='has-text-centered is-size-4 has-text-grey-light'>• • •</p>
<div className='column'>
<div className='buttons is-centered'>
<a
href='https://www.facebook.com/binu.kumar.90857'
target='_blank'
rel='noopener noreferrer'
className='button button-special is-rounded box-shadow-lift'
data-tip='connect on Facebook ?♂'
>
<Facebook color='blue' className='icon' />
</a>
<a
href='https://www.instagram.com/krbinu42/'
target='_blank'
rel='noopener noreferrer'
className='button button-special is-rounded box-shadow-lift'
data-tip='connect on Instagram ?'
>
<Instagram color='#C74B91' className='icon' />
</a>
<a
href='https://github.com/Binu42'
target='_blank'
rel='noopener noreferrer'
className='button button-special is-rounded box-shadow-lift'
data-tip='connect on Github ❤️'
>
<GitHub className='icon' />
</a>
<a
href='https://twitter.com/kbinu42'
target='_blank'
rel='noopener noreferrer'
className='button button-special is-rounded box-shadow-lift'
data-tip='connect on Twitter ?♂️'
>
<Twitter color='#1DA1F2' className='icon' />
</a>
<a
href='https://www.linkedin.com/in/binukumar/'
target='_blank'
rel='noopener noreferrer'
className='is-hidden-touch button button-special is-rounded box-shadow-lift'
data-tip='connect on Linkedin ?⚖️'
>
<Linkedin color='#0077B5' className='icon' />
</a>
</div>
</div>
{/* <div className='column has-text-centered'>
<p className='subtitle is-7 is-capitalized has-text-danger'>
This Project is just for Learning and teaching purposes.
</p>
</div> */}
<div className='column has-text-centered'>
<p className='menu-label'>
Made with <Heart color='red' fill='red' size='15px' />{' '}
<a
href='https://binu42.netlify.com'
target='_blank'
rel='noopener noreferrer'
>
By Binu Kumar
</a>{' '}
<br />
©{new Date().getFullYear()}
</p>
</div>
</footer>
);
}
Example #3
| Source File: Volunteers.js From covid19india-react with MIT License | 5 votes |
|
function Member({className, style, name, bio, link, image, socials = {}}) {
const [loaded, setLoaded] = useState(false);
const socialIcons = useMemo(
() => ({
github: <GitHub size={16} />,
linkedin: <Linkedin size={16} />,
twitter: <Twitter size={16} />,
instagram: <Instagram size={16} />,
}),
[]
);
return (
<animated.div className={classnames('Member', className)} {...{style}}>
{link && <a href={link} target="_blank" rel="noopener noreferrer"></a>}
{!loaded && (
<div className="image">
<ContentLoader
backgroundColor="#888"
foregroundColor="#888"
backgroundOpacity={0.2}
foregroundOpacity={0.4}
>
<rect x="0" y="0" width="256" height="256" />
</ContentLoader>
</div>
)}
<img
className="image"
src={`${VOLUNTEERS_DOMAIN}/images/${image ? image : PLACEHOLDER_IMG}`}
alt={name}
onLoad={setLoaded.bind(this, true)}
style={{display: loaded ? 'block' : 'none'}}
/>
<div className="details">
<h2 className="name">{name}</h2>
<p className="bio">{bio}</p>
<div className="socials">
{Object.entries(socialIcons).map(
([social, icon]) =>
socials[social] && (
<a
key={social}
className={classnames('icon', social)}
href={socials[social]}
target="_blank"
rel="noopener noreferrer"
>
{icon}
</a>
)
)}
</div>
</div>
{link && (
<div className="link-external">
<ExternalLink size={16} />
</div>
)}
</animated.div>
);
}
Example #4
| Source File: contact.js From website with GNU General Public License v3.0 | 4 votes |
|
export default function Contact() {
const initialDiscordText = 'Roberto#1762';
const [discordText, setDiscordText] = useState(initialDiscordText);
function handleDiscordClick() {
navigator.clipboard.writeText("Roberto#1762").then(r => {
setDiscordText('Copied to clipboard!');
setTimeout(() => {
setDiscordText(initialDiscordText);
}, 1000);
});
}
return (
<Layout title="Contact me">
<div className="flex flex-grow items-center">
<div className="w-full">
<div className="container flex mx-auto justify-center">
<motion.div initial={{ opacity: 0 }} animate={{ opacity: [0, 1] }} transition={{ duration: 0.5 }}>
<div className="text-center">
<h1 className="md:text-6xl text-3xl font-bold">
Contact <span className="text-rose-500">me</span>
</h1>
<p className="text-gray-200 text-lg font-medium px-4">
Want to get in touch, or just want to have a chat? Well, here's your chance! (╹◡╹)
</p>
</div>
<div className="mx-auto overflow-auto mt-4">
<div className="grid gap-8 px-4 md:px-0 grid-cols-1 md:grid-cols-2 xl:grid-cols-3">
<a href="mailto:[email protected]" className="bg-gray-800 text-white p-4 text-center rounded space-y-0.5">
<Mail className="mx-auto max-h-12" size={48} />
<p className="text-white text-xl overflow-ellipsis">[email protected]</p>
</a>
<a href="https://github.com/Wallvon" className="bg-gray-800 text-white p-4 text-center rounded space-y-0.5" target="_blank" rel="noopener noreferrer">
<svg
fill="currentColor"
className="mx-auto max-h-12"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg">
<title>{siGithub.title}</title>
<path d={siGithub.path} />
</svg>
<p className="text-white text-xl overflow-ellipsis">Wallvon</p>
</a>
<button onClick={handleDiscordClick} className="bg-gray-800 text-white p-4 text-center rounded space-y-0.5 has-tooltip hover:text-rose-600 duration-200">
<svg
fill="currentColor"
className="mx-auto max-h-12"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg">
<title>{siDiscord.title}</title>
<path d={siDiscord.path} />
</svg>
<span className='tooltip bg-gray-800 text-white rounded shadow-lg'>{discordText}</span>
<p className="text-white text-xl overflow-ellipsis">Roberto#1762</p>
</button>
<a href="https://www.linkedin.com/in/robert-stokreef/" className="bg-gray-800 text-white p-4 text-center rounded space-y-0.5" target="_blank" rel="noopener noreferrer">
<Linkedin fill="currentColor" strokeWidth="0" className="mx-auto max-h-12" size={48} />
<p className="text-white text-xl overflow-ellipsis">Robert Stokreef</p>
</a>
<a href="https://twitter.com/ThatGuy5275" className="bg-gray-800 text-white p-4 text-center rounded space-y-0.5" target="_blank" rel="noopener noreferrer">
<svg
fill="currentColor"
className="mx-auto max-h-12"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg">
<title>{siTwitter.title}</title>
<path d={siTwitter.path} />
</svg>
<p className="text-white text-xl overflow-ellipsis">ThatGuy5275</p>
</a>
<a href="https://instagram.com/robert.__.s" className="bg-gray-800 text-white p-4 text-center rounded space-y-0.5" target="_blank" rel="noopener noreferrer">
<svg
fill="currentColor"
className="mx-auto max-h-12"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg">
<title>{siInstagram.title}</title>
<path d={siInstagram.path} />
</svg>
<p className="text-white text-xl overflow-ellipsis">robert.__.s</p>
</a>
</div>
</div>
</motion.div>
</div>
</div>
</div>
</Layout>
)
}
