leaflet.pub
a tool for shared writing and social publishing
little styling to the create pub form
cozylittle.house
+44
-22
app/lish/createPub/CreatePubForm.tsx
+44
-22
app/lish/createPub/CreatePubForm.tsx
···
8
8
import { useRouter } from "next/navigation";
9
9
import { useState, useRef, useEffect } from "react";
10
10
import { useDebouncedEffect } from "src/hooks/useDebouncedEffect";
11
+
import { set } from "colorjs.io/fn";
12
+
import { theme } from "tailwind.config";
11
13
12
14
export const CreatePubForm = () => {
13
15
let [nameValue, setNameValue] = useState("");
···
38
40
<div className="flex flex-col items-center mb-4 gap-2">
39
41
<div className="text-center text-secondary flex flex-col ">
40
42
<h3 className="-mb-1">Logo</h3>
41
-
<h3>(optional)</h3>
43
+
<p className="italic text-tertiary">(optional)</p>
42
44
</div>
43
45
<div
44
46
className="w-24 h-24 rounded-full border-2 border-dotted border-accent-1 flex items-center justify-center cursor-pointer hover:border-accent-contrast"
···
82
84
}}
83
85
/>
84
86
85
-
<DomainInput domain={domainValue} setDomain={setDomainValue} />
86
-
87
87
<InputWithLabel
88
88
label="Description (optional)"
89
89
textarea
···
94
94
setDescriptionValue(e.currentTarget.value);
95
95
}}
96
96
/>
97
+
<DomainInput domain={domainValue} setDomain={setDomainValue} />
97
98
98
99
<div className="flex w-full justify-center">
99
100
<ButtonPrimary type="submit">Create Publication!</ButtonPrimary>
···
106
107
domain: string;
107
108
setDomain: (d: string) => void;
108
109
}) {
109
-
let [state, setState] = useState<"normal" | "valid" | "invalid">("normal");
110
+
let [state, setState] = useState<"empty" | "valid" | "invalid" | "pending">(
111
+
"empty",
112
+
);
110
113
useEffect(() => {
111
-
setState("normal");
114
+
if (!props.domain) {
115
+
setState("empty");
116
+
} else {
117
+
setState("pending");
118
+
}
112
119
}, [props.domain]);
113
120
useDebouncedEffect(
114
121
async () => {
115
-
if (!props.domain) return setState("normal");
122
+
if (!props.domain) return setState("empty");
116
123
let status = await callRPC("get_leaflet_subdomain_status", {
117
124
domain: props.domain,
118
125
});
···
124
131
[props.domain],
125
132
);
126
133
return (
127
-
<label className=" input-with-border flex flex-col text-sm text-tertiary font-bold italic leading-tight !py-1 !px-[6px]">
128
-
<div>Domain</div>
129
-
<div className="flex flex-row items-center">
130
-
<Input
131
-
placeholder="domain"
132
-
className="appearance-none w-full font-normal bg-transparent text-base text-primary focus:outline-0 outline-none"
133
-
value={props.domain}
134
-
onChange={(e) => props.setDomain(e.currentTarget.value)}
135
-
/>
136
-
.leaflet.pub
134
+
<div className="flex flex-col gap-1">
135
+
<label className=" input-with-border flex flex-col text-sm text-tertiary font-bold italic leading-tight !py-1 !px-[6px]">
136
+
<div>Domain</div>
137
+
<div className="flex flex-row items-center">
138
+
<Input
139
+
placeholder="domain"
140
+
className="appearance-none w-full font-normal bg-transparent text-base text-primary focus:outline-0 outline-none"
141
+
value={props.domain}
142
+
onChange={(e) => props.setDomain(e.currentTarget.value)}
143
+
/>
144
+
.leaflet.pub
145
+
</div>
146
+
</label>
147
+
<div
148
+
className={"text-sm italic "}
149
+
style={{
150
+
fontWeight: state === "valid" ? "bold" : "normal",
151
+
color:
152
+
state === "valid"
153
+
? theme.colors["accent-contrast"]
154
+
: theme.colors.tertiary,
155
+
}}
156
+
>
157
+
{state === "valid"
158
+
? "Available!"
159
+
: state === "invalid"
160
+
? "Already Taken ):"
161
+
: state === "pending"
162
+
? "Checking Availability..."
163
+
: "Choose a domain!"}
137
164
</div>
138
-
{state === "valid"
139
-
? "Available!"
140
-
: state === "invalid"
141
-
? "Unavailable"
142
-
: null}
143
-
</label>
165
+
</div>
144
166
);
145
167
}