add copy button for feeds URL

This commit is contained in:
Will Webberley 2021-02-03 00:09:52 +00:00
parent aee7e97cf2
commit 515ed8e035

View File

@ -1,6 +1,6 @@
import React from 'react'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faRssSquare } from '@fortawesome/free-solid-svg-icons'
import { faRssSquare, faCopy } from '@fortawesome/free-solid-svg-icons'
import Helmet from 'react-helmet'
import styled from 'styled-components';
@ -17,6 +17,10 @@ const StyledButton = styled(ExternalLink)`
background: wheat;
color: black;
`;
const StyledCopyButton = styled.span`
cursor:pointer;
padding: 0px 2px 2px 2px;
`;
const FeedsPage = () => {
const feeds = [
@ -46,6 +50,10 @@ const FeedsPage = () => {
description: 'This feed includes all notes and articles only about life updates.',
},
];
const copyFeedsUrl = () =>
navigator && navigator.clipboard && navigator.clipboard.writeText &&
navigator.clipboard.writeText('https://wilw.dev');
return (
<Layout>
@ -62,8 +70,8 @@ const FeedsPage = () => {
I use <ExternalLink href="https://www.reederapp.com/">Reeder 5</ExternalLink> on my <ExternalLink href="https://itunes.apple.com/app/id1529448980">Mac</ExternalLink> and <ExternalLink href="https://apps.apple.com/app/id1529445840">iPhone</ExternalLink>.</p>
</div>
<h3><Emoji e='🌍' /> Recommended: enter <code>wilw.dev</code> into your RSS reader &amp; it should list the available feeds</h3>
<p>Alternatively you can manually subscribe from the options below.</p>
<h3><Emoji e='🌍' /> Recommended: enter <code>wilw.dev <StyledCopyButton onClick={copyFeedsUrl}><FontAwesomeIcon icon={faCopy} /></StyledCopyButton></code> into your RSS reader &amp; it should list the available feeds</h3>
<p>Alternatively you can choose a feed from the options below.</p>
<div style={{marginTop: 20}}>
{feeds.map(feed =>