import Head from "next/head"; import styled from "styled-components"; import { useState } from "react"; export default function Home() { const [userId, setUserId] = useState(":id"); 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 ! ); } 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.img` margin-top: 1.5rem; @media (max-height: 800px) { display: none; } @media (max-width: 1000px) { display: none; } `;