···22import { guildStore } from "@/common/guilds";
33import { DiscordMarkdown } from "@/components/discord/markdown";
44import DiscordMessage from "@/components/discord/message";
55-import DumbTextInput from "@/components/inputs/dumb-text-input";
55+import { ControlledInput } from "@/components/inputs/controlled-input";
66import Modal from "@/components/modal";
77import { Section } from "@/components/section";
88import { UserAvatar } from "@/components/ui/avatar";
···200200 }}
201201 isDisabled={!name || Boolean(error)}
202202 >
203203- <DumbTextInput
204204- name="Username"
203203+ <ControlledInput
204204+ label="Username"
205205 placeholder="DarkViperAU"
206206 value={name}
207207 setValue={setName}
+2-2
app/dashboard/[guildId]/page.tsx
···11"use client";
2233import { guildStore } from "@/common/guilds";
44-import Switch from "@/components/inputs/switch";
44+import { InputSwitch } from "@/components/inputs/switch";
55import { Section } from "@/components/section";
66import { GuildFlags } from "@/typings";
77import { transformer } from "@/utils/bitfields";
···4545 Small tools that improve chatting to insanity.
4646 </Section>
47474848- <Switch
4848+ <InputSwitch
4949 label="Embed message links"
5050 description="Reply with the original content of a message if a message link is sent."
5151 endpoint={`/guilds/${params.guildId}`}
+33-34
app/dashboard/[guildId]/starboard/page.tsx
···44import { DiscordMarkdown } from "@/components/discord/markdown";
55import DiscordMessage from "@/components/discord/message";
66import DiscordMessageEmbed from "@/components/discord/message-embed";
77-import MultiSelectMenu from "@/components/inputs/multi-select-menu";
88-import NumberInput from "@/components/inputs/number-input";
99-import SelectMenu from "@/components/inputs/select-menu";
1010-import Switch from "@/components/inputs/switch";
1111-import TextInput from "@/components/inputs/text-input";
77+import { InputColor } from "@/components/inputs/color-input";
88+import { InputMultiSelect } from "@/components/inputs/multi-select-menu";
99+import { InputNumber } from "@/components/inputs/number-input";
1010+import { InputSelect } from "@/components/inputs/select-menu";
1111+import { InputSwitch } from "@/components/inputs/switch";
1212import Notice from "@/components/notice";
1313import { Button } from "@/components/ui/button";
1414import { useApi } from "@/lib/api/hook";
···6060 </Button>
6161 </div>
62626363- <Switch
6363+ <InputSwitch
6464 label="Enable Starboard"
6565 endpoint={`/guilds/${guild?.id}`}
6666 k="flags"
···6969 onSave={(value) => guildStore.setState({ flags: transformer(value, guild!.flags, GuildFlags.StarboardEnabled) })}
7070 />
71717272- <Switch
7272+ <InputSwitch
7373 label="Allow bots, apps and webhooks"
7474 endpoint={`/guilds/${guild?.id}`}
7575 k="flags"
···7878 onSave={(value) => guildStore.setState({ flags: transformer(value, guild!.flags, GuildFlags.StarboardAllowBots) })}
7979 />
80808181- <Switch
8181+ <InputSwitch
8282 label="Allow NSFW channels"
8383 endpoint={`/guilds/${guild?.id}`}
8484 k="flags"
···8787 onSave={(value) => guildStore.setState({ flags: transformer(value, guild!.flags, GuildFlags.StarboardAllowNSFW) })}
8888 />
89899090- <Switch
9090+ <InputSwitch
9191 label="Allow message edits"
9292 description="If a message is being edited, update it in the data."
9393 endpoint={`/guilds/${guild?.id}`}
···9797 onSave={(value) => guildStore.setState({ flags: transformer(value, guild!.flags, GuildFlags.StarboardAllowEdits) })}
9898 />
9999100100- <Switch
100100+ <InputSwitch
101101 label="Allow author reaction"
102102 description="Lets the message author star their own messages."
103103 endpoint={`/guilds/${guild?.id}`}
···107107 onSave={(value) => guildStore.setState({ flags: transformer(value, guild!.flags, GuildFlags.StarboardAllowSelf) })}
108108 />
109109110110- <Switch
111111- label="Display stared message reference"
110110+ <InputSwitch
111111+ label="Display starred message reference"
112112 description="Repost the message reply in the data."
113113 endpoint={`/guilds/${guild?.id}`}
114114 k="flags"
···117117 onSave={(value) => guildStore.setState({ flags: transformer(value, guild!.flags, GuildFlags.StarboardDisplayReference) })}
118118 />
119119120120- <Switch
120120+ <InputSwitch
121121 label="Delete message from starboard upon losing reactions"
122122 description="If a message in the starboard looses the required reactions, it gets deleted."
123123 endpoint={`/guilds/${guild?.id}`}
···127127 onSave={(value) => guildStore.setState({ flags: transformer(value, guild!.flags, GuildFlags.StarboardDeleteOnLoss) })}
128128 />
129129130130- <NumberInput
131131- name="Number of reactions required"
130130+ <InputNumber
131131+ label="Number of reactions required"
132132 description="Sets the number of reactions needed to get a message onto the data."
133133 url={url}
134134 dataName="requiredEmojis"
···138138 onSave={(v) => edit("requiredEmojis", v)}
139139 />
140140141141- <SelectMenu
142142- name="Channel"
141141+ <InputSelect
142142+ label="Channel"
143143 url={url}
144144 dataName="channelId"
145145 items={createSelectableItems(guild?.channels)}
146146 description="Select the channel where the starboard messages should be send into."
147147 defaultState={data.channelId}
148148 disabled={!enabled}
149149- onSave={(o) => edit("channelId", o.value as string)}
149149+ onSave={(o) => edit("channelId", o as string)}
150150 />
151151152152 <div className="lg:flex gap-3">
153153 <div className="lg:w-1/2">
154154- <SelectMenu
155155- name="Emoji"
154154+ <InputSelect
155155+ label="Emoji"
156156 url={url}
157157 dataName="emoji"
158158 items={[
···175175 description="Select the emoji that needs to be reacted with."
176176 defaultState={data.emoji}
177177 disabled={!enabled}
178178- onSave={(o) => edit("emoji", o.value as string)}
178178+ onSave={(o) => edit("emoji", o as string)}
179179 />
180180 </div>
181181 <div className="lg:w-1/2">
182182- <SelectMenu
183183- name="Profile display style"
182182+ <InputSelect
183183+ label="Profile display style"
184184 url={url}
185185 dataName="style"
186186 items={[
···208208 description="The style members profile gets displayed."
209209 defaultState={data.style}
210210 disabled={!enabled}
211211- onSave={(o) => edit("style", o.value as number)}
211211+ onSave={(o) => edit("style", o as number)}
212212 />
213213 </div>
214214 </div>
215215216216 <div className="lg:flex gap-3">
217217 <div className="lg:w-1/2">
218218- <MultiSelectMenu
219219- name="Blacklisted channels"
218218+ <InputMultiSelect
219219+ label="Blacklisted channels"
220220 url={url}
221221 dataName="blacklistChannelIds"
222222 items={createSelectableItems(guild?.channels)}
···224224 defaultState={data.blacklistChannelIds || []}
225225 max={500}
226226 disabled={!enabled}
227227- onSave={(o) => edit("blacklistChannelIds", o.map(({ value }) => value))}
227227+ onSave={(o) => edit("blacklistChannelIds", o)}
228228 />
229229 </div>
230230 <div className="lg:w-1/2">
231231- <MultiSelectMenu
232232- name="Blacklisted roles"
231231+ <InputMultiSelect
232232+ label="Blacklisted roles"
233233 url={url}
234234 dataName="blacklistRoleIds"
235235 items={createSelectableItems(guild?.roles)}
···237237 defaultState={data.blacklistRoleIds || []}
238238 max={500}
239239 disabled={!enabled}
240240- onSave={(o) => edit("blacklistRoleIds", o.map(({ value }) => value))}
240240+ onSave={(o) => edit("blacklistRoleIds", o)}
241241 />
242242 </div>
243243 </div>
244244245245 <div className="lg:flex gap-3">
246246 <div className="w-1/2">
247247- <TextInput
248248- name="Color"
247247+ <InputColor
248248+ label="Color"
249249 url={url}
250250 dataName="embedColor"
251251 description="Color used for the side of the embed."
252252- type="color"
253252 defaultState={data.embedColor ?? 0}
254254- onSave={(o) => edit("embedColor", o as number)}
253253+ onSave={(o) => edit("embedColor", o)}
255254 />
256255 </div>
257256 </div>