import Head from "next/head"; import styled, { createGlobalStyle, GlobalStyleComponent } from "styled-components"; import { useState } from "react"; export default function Home() { const [userId, setUserId] = useState(null); 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 Utilize Lanyard to display your Discord Presence in your GitHub Profile
setUserId(el.target.value)} placeholder="Enter your Discord ID" /> {userId ? ( <> [![Discord Presence](https://lanyard-profile-readme.vercel.app/api/{userId} )](https://discord.com/users/{userId}) ) : null}
); } const GlobalStyle = createGlobalStyle` *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Poppins', sans-serif; } `; const Main = styled.div` display: flex; align-items: center; justify-content: center; margin: 0; padding: 0; box-sizing: border-box; max-width: 100vw; min-height: 100vh; background: url(./background.jpg) 50% no-repeat fixed; background-size: cover; `; const Container = styled.div` backdrop-filter: blur(50px); background: rgb(0, 0, 0, 0.18); border-radius: 10px; margin: 50px; padding: 10px; width: 80%; max-width: 500px; `; const Icon = styled.h1` font-size: 2.5em; position: absolute; top: -27px; left: -21px; `; const Title = styled.h1` text-align: left; font-size: 2.25em; font-weight: 600; margin: 5px 25px; color: #191d28; `; const Paragraph = styled.p` padding: 0 25px; color: #aaabaf; font-size: 1.12em; `; const Input = styled.input` text-align: left; border-radius: 8px; border: none; margin: 0 25px 15px; font-size: 1em; padding: 5px 10px; color: #aaabaf; background: #191d28; box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.2); transition: background ease-in-out 0.2s; &:focus { outline: 0; background: #11151f; } `; const Output = styled.div` margin: 15px 25px; color: #aaabaf; word-break: break-word; border-radius: 8px; padding: 8px; backdrop-filter: blur(50px); background: rgb(0, 0, 0, 0.1); box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.2); `; const Example = styled.img` display: block; margin: 0 auto; padding: 15px 20px; width: 100%; filter: drop-shadow(0px 3px 15px rgba(0, 0, 0, 0.2)); `;