The weeb for the next gen discord boat - Wamellow
wamellow.com
bot
discord
add image v2
+23
-21
+1
-1
app/dashboard/[guildId]/greeting/farewell/page.tsx
+1
-1
app/dashboard/[guildId]/greeting/farewell/page.tsx
···
88
88
defaultMessage={data.message}
89
89
messageAttachmentComponent={(guild!.flags & GuildFlags.FarewellCard) !== 0 && (
90
90
<Image
91
-
src={`https://image-api.wamellow.com/?type=leave&username=${encodeURIComponent(user!.username)}&members=1090&hash=${encodeURIComponent(user!.id)}/${encodeURIComponent(user!.avatar!)}${data.card.background ? `&background=${encodeURIComponent(data.card.background)}` : ""}`}
91
+
src={`https://images-v2.wamellow.com/api/greet?type=leave&username=${encodeURIComponent(user!.username)}&member_count=${guild!.memberCount}&avatar_url=${encodeURIComponent(`https://cdn.discordapp.com/avatars/${user!.id}/${user!.avatar!}.png`)}${data.card.background ? `&background_url=${encodeURIComponent(data.card.background)}` : ""}`}
92
92
width={1_024 / 2}
93
93
height={(256 + 16) / 2}
94
94
loading="lazy"
+1
-1
app/dashboard/[guildId]/greeting/welcome/page.tsx
+1
-1
app/dashboard/[guildId]/greeting/welcome/page.tsx
···
181
181
defaultMessage={data.message}
182
182
messageAttachmentComponent={(guild!.flags & GuildFlags.WelcomeCard) !== 0 && (
183
183
<Image
184
-
src={`https://image-api.wamellow.com/?type=join&username=${encodeURIComponent(user!.username)}&members=1090&hash=${encodeURIComponent(user!.id)}/${encodeURIComponent(user!.avatar!)}${data.card.background ? `&background=${encodeURIComponent(data.card.background)}` : ""}`}
184
+
src={`https://images-v2.wamellow.com/api/greet?type=join&username=${encodeURIComponent(user!.username)}&member_count=${guild!.memberCount}&avatar_url=${encodeURIComponent(`https://cdn.discordapp.com/avatars/${user!.id}/${user!.avatar!}.png`)}${data.card.background ? `&background_url=${encodeURIComponent(data.card.background)}` : ""}`}
185
185
width={1_024 / 2}
186
186
height={(256 + 16) / 2}
187
187
loading="lazy"
+21
-19
components/inputs/image-url-input.tsx
+21
-19
components/inputs/image-url-input.tsx
···
11
11
Success = 2
12
12
}
13
13
14
+
enum ImageState {
15
+
Errored = 1,
16
+
Success = 2
17
+
}
18
+
14
19
interface Props {
15
20
name: string;
16
21
url: string;
···
38
43
39
44
const [value, setValue] = useState<string>("");
40
45
const [defaultStatealue, setdefaultStatealue] = useState<string>("");
41
-
const [imagestate, setImagestate] = useState<"ERRORED" | "SUCCESS" | undefined>(undefined);
46
+
const [imagestate, setImagestate] = useState<ImageState | undefined>(undefined);
42
47
43
48
useEffect(() => {
44
49
if (!defaultStatealue) setdefaultStatealue(defaultState);
···
46
51
}, [defaultState]);
47
52
48
53
useEffect(() => {
49
-
if (!value?.length) setImagestate("SUCCESS");
50
-
// else setImagestate(undefind);
54
+
if (!value?.length) setImagestate(ImageState.Success);
51
55
}, [value]);
52
56
53
57
useEffect(() => {
54
-
if (imagestate !== "SUCCESS" || defaultStatealue === value) return;
58
+
if (imagestate !== ImageState.Success || defaultStatealue === value) return;
55
59
setError(null);
56
60
setState(State.Loading);
57
61
···
101
105
102
106
<div className="flex items-center gap-2">
103
107
<span className="text-lg dark:text-neutral-300 text-neutral-700 font-medium">{name}</span>
104
-
{state === State.Success && <TailSpin stroke="#d4d4d4" strokeWidth={8} className="relative h-3 w-3 overflow-visible" />}
108
+
{state === State.Loading && <TailSpin stroke="#d4d4d4" strokeWidth={8} className="relative h-3 w-3 overflow-visible" />}
105
109
</div>
106
110
107
111
<div className="lg:flex mt-1 w-full gap-4">
···
111
115
setValue={(v) => {
112
116
setValue(v);
113
117
setState(State.Idle);
114
-
if (imagestate === "SUCCESS") setImagestate(undefined);
118
+
if (imagestate === ImageState.Success) setImagestate(undefined);
115
119
}}
116
120
disabled={disabled}
117
121
placeholder="Paste a direct image url..."
···
121
125
122
126
<div className="max-w-1/2 w-full">
123
127
124
-
{value && imagestate !== "ERRORED" ?
128
+
{value && imagestate !== ImageState.Errored ?
125
129
/* eslint-disable-next-line @next/next/no-img-element */
126
130
<img
127
131
src={value}
128
132
alt="upload"
129
-
className={cn("w-full", "rounded-md", "aspect-4/1")}
130
-
onError={() => setImagestate("ERRORED")}
131
-
onLoad={() => setImagestate("SUCCESS")}
133
+
className={cn("rounded-lg w-full h-full object-cover aspect-906/256", ratio)}
134
+
onError={() => setImagestate(ImageState.Errored)}
135
+
onLoad={() => setImagestate(ImageState.Success)}
132
136
/>
133
137
:
134
138
<div className={cn(
135
139
"w-full border-2 rounded-md flex items-center justify-center dark:border-wamellow border-wamellow-100",
136
-
imagestate === "ERRORED" && "dark:border-red-500 border-red-300",
140
+
imagestate === ImageState.Errored && "dark:border-red-500 border-red-300",
137
141
ratio
138
142
)}>
139
-
{imagestate === "ERRORED" ?
143
+
{imagestate === ImageState.Errored ?
140
144
<div className="text-red-400 m-4">
141
-
<div className="font-medium">Enter a <span className="underline underline-red-400">valid</span> image url!</div>
145
+
<div className="font-medium">Enter a valid image url!</div>
142
146
<div className="text-xs">
143
147
<div>Recommended resolution: 1024x256</div>
144
-
<div>Recommended type: .png</div>
148
+
<div>Supported types: .png, .jpg, .jpeg, .webp</div>
145
149
</div>
146
150
{/* eslint-disable-next-line @next/next/no-img-element */}
147
151
<img
148
152
src={value}
149
-
alt="upload"
150
153
className="w-0 h-0"
151
-
onLoad={() => setImagestate("SUCCESS")}
154
+
onLoad={() => setImagestate(ImageState.Success)}
152
155
/>
153
156
</div>
154
157
:
···
162
165
</div>
163
166
164
167
<div className="flex">
165
-
{error &&
168
+
{error && (
166
169
<div className="ml-auto text-red-500 text-sm">
167
170
{error}
168
171
</div>
169
-
}
172
+
)}
170
173
</div>
171
-
172
174
</div>
173
175
);
174
176
}