frishi/threetwo
1
0
Fork 0
Code Issues 9 Pull Requests 6 Actions Packages Projects Releases 2 Wiki Activity

🖌️ Prettifying the form

Browse Source
This commit is contained in:
Rishi Ghan
2024-07-14 09:45:07 -04:00
parent f4c498bce3
commit 628e1f72e2
1 changed files with 37 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
src/client/components/Settings/AirDCPPSettings/AirDCPPHubsForm.tsx
View File

@@ -96,16 +96,21 @@ export const AirDCPPHubsForm = (): ReactElement => {
}} }}
validate={validate} validate={validate}
render={({ handleSubmit }) => ( render={({ handleSubmit }) => (
<form onSubmit={handleSubmit}> <form onSubmit={handleSubmit} className="mt-10">
<div> <h2 className="text-xl">Configure DC++ Hubs</h2>
<h3 className="title">Hubs</h3> <article
role="alert"
className="mt-4 rounded-lg max-w-screen-md border-s-4 border-blue-500 bg-blue-50 p-4 dark:border-s-4 dark:border-blue-600 dark:bg-blue-300 dark:text-slate-600"
>
<h6 className="subtitle has-text-grey-light"> <h6 className="subtitle has-text-grey-light">
Select the hubs you want to perform searches against. Select the hubs you want to perform searches against. Your
selection in the dropdown <strong>will replace</strong> the
existing selection.
</h6> </h6>
</div> </article>
<div className="field"> <div className="field">
<label className="label">AirDC++ Host</label> <label className="block py-1 mt-3">AirDC++ Host</label>
<div className="control">
<Field <Field
name="hubs" name="hubs"
component={SelectAdapter} component={SelectAdapter}
@@ -114,7 +119,6 @@ export const AirDCPPHubsForm = (): ReactElement => {
options={hubList} options={hubList}
/> />
</div> </div>
</div>
<button <button
type="submit" type="submit"
className="flex space-x-1 sm:mt-5 sm:flex-row sm:items-center rounded-lg border border-green-400 dark:border-green-200 bg-green-200 px-4 py-2 text-gray-500 hover:bg-transparent hover:text-green-600 focus:outline-none focus:ring active:text-indigo-500" className="flex space-x-1 sm:mt-5 sm:flex-row sm:items-center rounded-lg border border-green-400 dark:border-green-200 bg-green-200 px-4 py-2 text-gray-500 hover:bg-transparent hover:text-green-600 focus:outline-none focus:ring active:text-indigo-500"
@@ -135,19 +139,21 @@ export const AirDCPPHubsForm = (): ReactElement => {
</div> </div>
</article> </article>
)} )}
{JSON.stringify(settings?.data.directConnect?.client?.hubs, null, 4)}
{!isEmpty(settings?.data.directConnect?.client.hubs) ? ( {!isEmpty(settings?.data.directConnect?.client.hubs) ? (
<> <>
<div className="mt-4"> <div className="mt-4">
<article className="message is-warning"> <article className="message is-warning">
<div className="message-body is-size-6 is-family-secondary"> <div className="message-body is-size-6 is-family-secondary"></div>
Your selection in the dropdown <strong>will replace</strong> the
existing selection.
</div>
</article> </article>
</div> </div>
<div className="box mt-3"> <div>
<h6>Default Hub For Searches:</h6> <span className="flex items-center mt-10 mb-4">
<span className="text-xl text-slate-500 dark:text-slate-200 pr-5">
Default Hub for Searches
</span>
<span className="h-px flex-1 bg-slate-200 dark:bg-slate-400"></span>
</span>
<div className="block max-w-sm p-6 bg-white border border-gray-200 rounded-lg shadow dark:bg-slate-400 dark:border-gray-700">
{settings?.data.directConnect?.client.hubs.map( {settings?.data.directConnect?.client.hubs.map(
({ value, label }) => ( ({ value, label }) => (
<div key={value}> <div key={value}>
@@ -157,6 +163,7 @@ export const AirDCPPHubsForm = (): ReactElement => {
), ),
)} )}
</div> </div>
</div>
</> </>
) : null} ) : null}
</> </>