\n Setup Your Bridge\n

\n Connect your Bluesky account to Mastodon for automatic cross-posting\n

\n\n {state.error && (\n

\n {state.error}\n {state.error.includes(\"/login\") && (\n \n {\" \"}\n \n Click here to login\n \n \n )}\n

\n )}\n\n {state.step === \"start\" && (\n

\n \n {state.loading ? \"Starting...\" : \"Get Started\"}\n \n

\n )}\n\n {state.step === \"connecting-bluesky\" && (\n

Step 1: Connect Bluesky

\n Enter your Bluesky handle to connect your account\n

\n \n Bluesky Handle\n \n setBlueskyHandle(e.target.value)}\n placeholder=\"your-handle.bsky.social\"\n className=\"w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500\"\n />\n

\n \n {state.loading ? \"Connecting...\" : \"Connect Bluesky Account\"}\n \n

\n )}\n\n {state.step === \"connecting-mastodon\" && (\n

\n Step 2: Connect Mastodon\n

\n Enter your Mastodon instance to connect your account\n

\n \n Mastodon Instance\n \n setMastodonInstance(e.target.value)}\n placeholder=\"mastodon.social\"\n className=\"w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500\"\n />\n

\n \n {state.loading ? \"Connecting...\" : \"Connect Mastodon Account\"}\n \n

\n )}\n\n {state.step === \"complete\" && (\n

Setup Complete!

\n ✓ Both accounts connected successfully\n

\n Your bridge is ready to start syncing posts from Bluesky to\n Mastodon.\n

\n \n {state.loading ? \"Completing...\" : \"Go to Dashboard\"}\n \n

\n )}\n

\n );\n}\n\n// Initialize React app\nconst root = ReactDOM.createRoot(document.getElementById(\"root\")!);\nroot.render();\n","deleted","label",[170,153],"frontend","permalink","https://www.val.town/x/index/atproto-to-fediverse/code/frontend/setup.tsx","extension","actionData","errors"]