import Head from 'next/head' import styled from 'styled-components'; import { useState, useEffect } from 'react'; export default function Home() { let [userId, setUserId] = useState('') 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}) For further customization, check out the repo!

Preview

{ userId.length < 17 ?

Please provide a valid user ID!

: } ) } 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: center; padding: 10px; background: rgba(0, 0, 0, 0.5); color: #fff; &::placeholder { text-align: center; } ` const Link = styled.div` margin: 10px 0 20px 0; width: calc(100% - 40px); height: auto; font-size: 1.1rem; border: solid 1px #ccc; border-radius: 3px; padding: 5px; background-color: #222; scrollbar-width: thin; ` const Example = styled.div` @media(max-height: 800px){ display: none; } @media(max-width: 1000px){ display: none; } `