react-feather#Mail JavaScript Examples
The following examples show how to use
react-feather#Mail.
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: ContactPage.js From ecomloop.github.io with MIT License | 5 votes |
|
ContactPageTemplate = ({
body,
title,
subtitle,
featuredImage,
address,
phone,
email,
locations
}) => (
<main className="Contact">
<PageHeader
title={title}
subtitle={subtitle}
backgroundImage={featuredImage}
/>
<section className="section Contact--Section1">
<div className="container Contact--Section1--Container">
<div>
<Content source={body} />
<div className="Contact--Details">
{address && (
<a
className="Contact--Details--Item"
href={`https://www.google.com/maps/search/${encodeURI(
address
)}`}
target="_blank"
rel="noopener noreferrer"
>
<MapPin /> {address}
</a>
)}
{phone && (
<a className="Contact--Details--Item" href={`tel:${phone}`}>
<Smartphone /> {phone}
</a>
)}
{email && (
<a className="Contact--Details--Item" href={`mailto:${email}`}>
<Mail /> {email}
</a>
)}
</div>
</div>
<div>
<FormSimpleAjax name="contact_form" />
</div>
</div>
</section>
<GoogleMap locations={locations} />
</main>
)
Example #2
| 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 #3
| Source File: Footer.js From covid19india-react with MIT License | 5 votes |
|
function Footer() {
const {t} = useTranslation();
return (
<footer>
<div className="link">
<a
href="https://github.com/covid19india"
target="_blank"
rel="noopener noreferrer"
>
covid19india
</a>
</div>
<h5>{t('We stand with everyone fighting on the frontlines')}</h5>
<div className="links">
<a
href="https://github.com/covid19india/covid19india-react"
className="github"
target="_blank"
rel="noopener noreferrer"
>
<GitHub />
</a>
<a
className="api"
href={API_DOMAIN}
target="_blank"
rel="noopener noreferrer"
>
<Database />
</a>
<a
href="https://t.me/covid19indiaorg"
className="telegram"
target="_blank"
rel="noopener noreferrer"
>
<Send />
</a>
<a
href="https://twitter.com/covid19indiaorg"
target="_blank"
rel="noopener noreferrer"
className="twitter"
>
<Twitter />
</a>
<a
href="https://instagram.com/covid19indiaorg"
target="_blank"
rel="noopener noreferrer"
className="instagram"
>
<Instagram />
</a>
<a
href="mailto:[email protected]"
className="mail"
target="_blank"
rel="noopener noreferrer"
>
<Mail />
</a>
</div>
</footer>
);
}
Example #4
| Source File: Logos.jsx From vertx-web-site.github.io with Apache License 2.0 | 5 votes |
|
Logos = () => {
const refRow1a = useRef()
const refRow1b = useRef()
const refRow2a = useRef()
const refRow2b = useRef()
useEffect(() => {
let newChildren1 = shuffleChildren(refRow1a.current)
refRow1a.current.innerHTML = ""
refRow1b.current.innerHTML = ""
for (let c of newChildren1) {
refRow1a.current.appendChild(c)
refRow1b.current.appendChild(c.cloneNode(true))
}
let newChildren2 = shuffleChildren(refRow2a.current)
refRow2a.current.innerHTML = ""
refRow2b.current.innerHTML = ""
for (let c of newChildren2) {
refRow2a.current.appendChild(c)
refRow2b.current.appendChild(c.cloneNode(true))
}
}, [])
return (
<div className="logos">
<hr/>
<h3>Who’s using Eclipse Vert.x?</h3>
<div className="logos-row" style={{ animationDuration: `${DURATION1}s` }}>
<div className="logos-row-half" ref={refRow1a}>{LOGO_ELEMENTS1}</div>
<div className="logos-row-half" ref={refRow1b}>{LOGO_ELEMENTS1}</div>
</div>
<div className="logos-row-divider"></div>
<div className="logos-row" style={{ animationDuration: `${DURATION2}s` }}>
<div className="logos-row-half" ref={refRow2a}>{LOGO_ELEMENTS2}</div>
<div className="logos-row-half" ref={refRow2b}>{LOGO_ELEMENTS2}</div>
</div>
<div className="logos-contact-us">
<span className="logos-contact-us-question">Want to be listed here?</span>
<a href="mailto:[email protected]"><Button primary icon={<Mail />}>
Contact us!
</Button></a>
</div>
<style jsx>{styles}</style>
</div>
)
}
Example #5
| 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>
)
}
