noham/lanyard-profile-readme
1
0
Fork 0
mirror of https://github.com/NohamR/lanyard-profile-readme.git synced 2026-05-26 13:41:32 +00:00
Code Issues Packages Projects Releases Wiki Activity

Feat: Copy button

Browse Source
This commit is contained in:
looskie
2021-06-25 21:49:42 -04:00
parent be28b93ef2
commit 98b475c51d
1 changed files with 23 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
pages/index.tsx
View File

@@ -37,6 +37,7 @@ export default function Home() {
[![Discord Presence](https://lanyard-profile-readme.vercel.app/api/{userId} [![Discord Presence](https://lanyard-profile-readme.vercel.app/api/{userId}
)](https://discord.com/users/{userId}) )](https://discord.com/users/{userId})
</Output> </Output>
<Copy onClick={copy}>{copyState}</Copy>
<Example <Example
src={`https://lanyard-profile-readme.vercel.app/api/${userId}`} src={`https://lanyard-profile-readme.vercel.app/api/${userId}`}
alt="[Please provide a valid user ID!]" alt="[Please provide a valid user ID!]"
@@ -132,10 +133,30 @@ const Output = styled.div`
box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.2); box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.2);
`; `;
const Copy = styled.button`
position: absolute;
right: 35px;
font-size: 0.9em;
padding: 5px 25px;
width: 103px;
border-radius: 6px;
cursor: pointer;
border: none;
color: #aaabaf;
backdrop-filter: blur(50px);
box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.2);
background: rgb(0, 0, 0, 0.1);
transition: background ease-in-out 0.2s;
&:hover {
background: rgb(0, 0, 0, 0.4);
}
`;
const Example = styled.img` const Example = styled.img`
display: block; display: block;
margin: 0 auto; margin: 70px auto 0px;
padding: 15px 20px; padding: 0 20px 15px;
width: 100%; width: 100%;
filter: drop-shadow(0px 3px 15px rgba(0, 0, 0, 0.2)); filter: drop-shadow(0px 3px 15px rgba(0, 0, 0, 0.2));
`; `;