Lanyard for GitHub Profile

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 [userError, setUserError] = useState(); 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); })(); }, []); useEffect(() => { (async () => { try { await axios.get(`/api/${userId}`); setUserError(undefined); } catch (error: any) { console.log(error.response); if (error.response.status === 404 && error.response.data.code == "user_not_monitored") setUserError(`User not monitored by Lanyard, click to join the discord`); } })(); }, [userId]); 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: start; margin: 0; padding: 0; box-sizing: border-box; max-width: 100vw; min-height: 100vh; background: #010103; background-size: cover; `; const Container = styled.div` border-radius: 7px; margin-top: 60px; width: 80%; max-width: 450px; `; const Title = styled.h1` text-align: left; font-size: 2rem; font-weight: 600; margin: 5px 0; color: #cecece; `; const Paragraph = styled.p` color: #aaabaf; font-size: 1rem; `; const Input = styled.input` text-align: left; border-radius: 8px; border: none; width: 100%; font-size: 0.9rem; padding: 5px 10px; color: #aaabaf; border: solid 1px #333; background: #000; box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.2); transition: all ease-in-out 0.2s; &:focus { outline: 0; border-color: #ccc; } `; const Output = styled.div` margin: 15px 0; color: #aaabaf; word-break: break-word; border-radius: 8px; border: solid 1px #333; padding: 8px; background: #000; box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.2); font-family: Monospace, sans-serif; `; const ActionButton = styled.button` font-size: 0.9rem; padding: 5px 25px; margin-right: 10px; border-radius: 6px; cursor: pointer; color: #888; border: solid 1px #333; background: transparent; transition: all ease-in-out 0.1s; &:hover { color: #e6e6e6; border-color: #e6e6e6; } &:active { color: #fff; border-color: #fff; } `; const Example = styled.img` display: block; margin: 30px auto 0px; // border-radius: 0.7rem; // border: solid 1px #333; max-width: 100%; `; const FooterStat = styled.div` position: absolute; line-height: 1rem; bottom: 1rem; left: 50%; transform: translate(-50%, 0); background: #000; padding: 1rem 1.25rem; color: #fff; border-radius: 0.5rem; text-align: center; box-shadow: 0 2px 15px -10px #a21caf; min-width: 275px; &:before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: 0.35rem; border: 2px solid transparent; background: linear-gradient(45deg, #be123c, #6b21a8, #3730a3) border-box; -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; } `;