\n \n \n {title ? title : \"Find me on val.town\"}\n \n \n

\n );\n}\n\nfunction App() {\n const [username, setUsername] = React.useState(\"\");\n const [title, setTitle] = React.useState(\"\");\n const [embedCode, setEmbedCode] = React.useState(\"\");\n\n const generateEmbedCode = () => {\n if (username) {\n const badgeHTML = renderToString();\n setEmbedCode(`

${badgeHTML}

`);\n }\n };\n\n return (\n \n

Val Town Badge Generator

\n setUsername(e.target.value)}\n placeholder=\"val.town username\"\n required\n style={{\n flex: 1,\n padding: \"10px\",\n fontSize: \"16px\",\n border: \"2px solid #e5e7eb\",\n borderRadius: \"5px\",\n outline: \"none\",\n }}\n />\n setTitle(e.target.value)}\n placeholder=\"Enter Title\"\n style={{\n flex: 1,\n padding: \"10px\",\n fontSize: \"16px\",\n border: \"2px solid #e5e7eb\",\n borderRadius: \"5px\",\n outline: \"none\",\n }}\n />\n \n Generate\n \n

\n {embedCode && (\n

Embed Code:

\n \n

Preview:

\n )}\n

\n );\n}\n\nexport default async function server(request: Request): Promise {\n return new Response(\n `\n \n \n \n \n \n \n Val Town Badge Generator\n \n \n \n

\n \n \n \n `,\n {\n headers: { \"Content-Type\": \"text/html\" },\n },\n );\n}\n\nconst css = `\n body {\n font-family: 'Inter', sans-serif;\n line-height: 1.6;\n margin: 0;\n padding: 0;\n }\n h1, h3 {\n font-weight: 600;\n }\n input:focus, textarea:focus {\n border-color: #3b82f6;\n box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);\n }\n button:hover {\n background-color: #2563eb;\n }\n a {\n color: #3b82f6;\n text-decoration: none;\n }\n a:hover {\n text-decoration: underline;\n }\n`;\n\nif (typeof document !== \"undefined\") {\n createRoot(document.getElementById(\"root\")).render();\n}","deleted","label",[99],"permalink","https://www.val.town/x/muhammad_owais_warsi/Badge_Generator/code/main.tsx","extension","actionData","errors"]