modamo.xyz
fork
Configure Feed
Select the types of activity you want to include in your feed.
Update your ATProto bio with what you're currently listening to
fork
Configure Feed
Select the types of activity you want to include in your feed.
Alter buttons and simplify flow
+31
-34
+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