import Head from "next/head"; import styled, { createGlobalStyle } from "styled-components"; import { useState, useEffect } from "react"; import axios from "axios"; export default function Home() { const [userCount, setUserCount] = useState(null); const [userId, setUserId] = useState(null); const [copyState, setCopyState] = useState("Copy"); const copy = () => { navigator.clipboard.writeText(`[![Discord Presence](https://lanyard.cnrad.dev/api/${userId} )](https://discord.com/users/${userId})`); setCopyState("Copied!"); setTimeout(() => setCopyState("Copy"), 1500); }; useEffect(() => { (async () => { let userCount = await axios.get("/api/getUserCount").then(res => res.data); setUserCount(userCount.count); })(); }, []); 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.cnrad.dev/api/{userId} )](https://discord.com/users/{userId}) {copyState} Options ) : null}
Lanyard Profile Readme has {userCount} total users! ); } const GlobalStyle = createGlobalStyle` *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Poppins', sans-serif; } ::-webkit-scrollbar { width: 10px; } ::-webkit-scrollbar-thumb { background: rgb(64 68 78); border-radius: 8px; } ::-webkit-scrollbar-track { background: rgb(24 28 39); } `; const Main = styled.div` display: flex; flex-direction: column; 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` position: relative; 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: #cecece; `; 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; width: 80%; max-width: 250px; 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 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: #191d28; transition: background ease-in-out 0.2s; &:hover { background: #11151f; } &:active { background: #0c0d13; } `; const Options = styled.button` position: absolute; right: 150px; 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: #191d28; transition: background ease-in-out 0.2s; &:hover { background: #11151f; } &:active { background: #0c0d13; } `; const Example = styled.img` display: block; margin: 70px auto 0px; padding: 0 20px 15px; width: 100%; filter: drop-shadow(0px 3px 15px rgba(0, 0, 0, 0.2)); `; const FooterStat = styled.div` position: absolute; line-height: 1rem; bottom: 1rem; left: 50%; transform: translate(-50%, 0); background: rgba(0, 0, 0, 0.5); padding: 1rem 1.25rem; color: #fff; border-radius: 0.5rem; text-align: center; `;