import Head from "next/head"; import styled from "styled-components"; import { useState } from "react"; export default function Home() { const [userId, setUserId] = useState(":id"); const [copyState, setCopyState] = useState("Copy"); const copy = () => { navigator.clipboard.writeText(`[![Discord Presence](https://lanyard-profile-readme.vercel.app/api/${userId} )](https://discord.com/users/${userId})`); setCopyState("Copied!"); setTimeout(() => setCopyState("Copy"), 1500); }; return ( <> Lanyard for GitHub Profile
🏷️ lanyard-profile-readme

Make sure you're in the{" "} Discord {" "} for this to work.

setUserId(e.target.value)} /> Copy the following and paste it into your README.md [![Discord Presence](https://lanyard-profile-readme.vercel.app/api/{userId} )](https://discord.com/users/{userId}) {copyState} For further customization, check out the{" "} repo ! ); } const Background = styled.div` position: fixed; width: 100%; height: 100%; margin: 0; inset: 0; background: url(/background.png) 60% 50%; background-size: cover; color: #fff; font-size: 20px; font-family: Poppins, sans-serif; display: flex; flex-direction: column; justify-content: center; align-items: center; `; const Header = styled.h1` font-size: 2rem; text-align: center; width: 100%; white-space: nowrap; `; const Container = styled.div` min-width: 300px; width: 40%; height: auto; padding: 2rem; display: flex; flex-direction: column; justify-content: center; align-items: center; background-color: rgba(0, 0, 0, 0.3); backdrop-filter: blur(7px); text-align: center; border: solid 0.5px #fff; border-radius: 0.5rem; margin-bottom: 1rem; `; const Input = styled.input` margin: 10px 0 20px 0; width: 60%; border: solid 2px #ccc; font-size: 1.1rem; border-radius: 3px; text-align: left; padding: 10px; background: rgba(0, 0, 0, 0.5); color: #fff; &::placeholder { text-align: left; } `; const Link = styled.div` margin: 10px 0 20px 0; width: calc(100% - 40px); height: auto; font-size: 1.1rem; border: solid 1px #ccc; text-align: left; border-radius: 3px; padding: 5px; background-color: #222; overflow: hidden; overflow-wrap: break-word; scrollbar-width: thin; margin: 0 auto 10px auto; `; const Example = styled.img` margin-top: 1.5rem; @media (max-height: 800px) { display: none; } @media (max-width: 1000px) { display: none; } `; const LinkContainer = styled.div` position: relative; margin-bottom: 18px; `; const StupidBtn = styled.button` position: absolute; right: 1em; background: #222; padding: 5px 18px; border: none; cursor: pointer; border: #fff solid 1px; border-radius: 4px; color: #fff; min-width: 90px; &:active { opacity: 0.5; } `;