modamo.xyz
Update your ATProto bio with what you're currently listening to
Alter buttons and simplify flow
+30
-33
app/page.tsx
+30
-33
app/page.tsx
···
1
1
"use client";
2
2
3
3
import Button from "@/components/Button";
4
+
import { AtSign } from "lucide-react";
4
5
import { useState } from "react";
5
-
import { AtSign, Server, Lock } from "lucide-react";
6
6
7
7
const Home = () => {
8
8
const [atProtoIdentifier, setAtProtoIdentifier] = useState("");
···
55
55
56
56
return (
57
57
<div className="bg-linear-to-r from-red-800 gap-2 grid grid-cols-2 grid-rows-10 h-screen p-2 to-[#6868B6] w-screen">
58
-
<div className="col-span-2 flex justify-center row-span-1">
58
+
<div className="col-span-2 flex items-center justify-center row-span-1">
59
59
<h1 className="font-bold text-3xl">scrobbleToBio</h1>
60
60
</div>
61
61
<div className="border col-span-1 flex flex-col gap-2 items-center justify-center rounded-lg row-span-4">
62
-
<div className="flex gap-2 items-center justify-center w-full">
62
+
<div className="flex flex-col gap-2 items-center justify-center w-full">
63
+
<h2 className="font-semibold text-xl">
64
+
Step 1: Connect Last.fm
65
+
</h2>
63
66
<div className="border flex gap-2 h-12 items-center p-2 rounded-lg w-1/2">
64
67
<AtSign />
65
68
<input
···
69
72
value={usernameInput}
70
73
/>
71
74
</div>
72
-
<Button
73
-
label="Enter"
74
-
onClick={scp}
75
-
width="w-1/4"
76
-
/>
75
+
<div className="flex h-12 items-center justify-center w-full">
76
+
<Button
77
+
label="Enter"
78
+
onClick={scp}
79
+
width="w-1/2"
80
+
/>
81
+
</div>
77
82
</div>
78
-
{lastFMUsername && <p>{lastFMUsername}</p>}
79
-
{currentPlaying && <p>{currentPlaying}</p>}
80
83
</div>
81
-
<div className="border col-span-1 rounded-lg row-span-8"></div>
84
+
<div className="border col-span-1 rounded-lg row-span-7"></div>
82
85
<div className="border col-span-1 flex flex-col gap-2 items-center justify-center rounded-lg row-span-4">
83
-
<div className="border flex gap-2 h-12 items-center p-2 rounded-lg w-1/2">
84
-
<Server />
85
-
<input
86
-
className="flex-1 outline-none"
87
-
onChange={(e) => setHostingProvider(e.target.value)}
88
-
placeholder="Enter your hosting provider"
89
-
type="url"
90
-
value={hostingProvider}
91
-
/>
92
-
</div>
86
+
<h2 className="font-semibold text-xl">
87
+
Step 2: Connect ATProto
88
+
</h2>
93
89
<div className="border flex gap-2 h-12 items-center p-2 rounded-lg w-1/2">
94
90
<AtSign />
95
91
<input
96
92
className="flex-1 outline-none"
97
93
onChange={(e) => setAtProtoIdentifier(e.target.value)}
98
-
placeholder="Enter your ATProto username or email"
94
+
placeholder="Enter your ATProto handle or DID"
99
95
value={atProtoIdentifier}
100
96
/>
101
97
</div>
102
-
<div className="border flex gap-2 h-12 items-center p-2 rounded-lg w-1/2">
103
-
<Lock />
104
-
<input
105
-
className="flex-1 outline-none"
106
-
onChange={(e) => setPassword(e.target.value)}
107
-
placeholder="Enter your password"
108
-
type="password"
109
-
value={password}
98
+
<div className="flex h-12 items-center justify-center w-full">
99
+
<Button
100
+
label={isLoggingIn ? "Logging In..." : "Log In"}
101
+
onClick={loginToATProto}
102
+
width="w-1/2"
110
103
/>
111
104
</div>
105
+
</div>
106
+
<div className="col-span-1 rounded-lg row-span-1">
112
107
<Button
113
-
label={isLoggingIn ? "Logging In..." : "Log In"}
114
-
onClick={loginToATProto}
115
-
width="w-1/2"
108
+
label="Enter"
109
+
onClick={function (): Promise<void> {
110
+
throw new Error("Function not implemented.");
111
+
}}
112
+
width="w-full"
116
113
/>
117
114
</div>
118
115
<div className="col-span-2 flex justify-center row-span-1"></div>
+1
-1
components/Button.tsx
+1
-1
components/Button.tsx