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

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

@@ -96,24 +96,28 @@ 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} className="basic-multi-select"
className="basic-multi-select" placeholder="Select Hubs to Search Against"
placeholder="Select Hubs to Search Against" options={hubList}
options={hubList} />
/>
</div>
</div> </div>
<button <button
type="submit" type="submit"
@@ -135,27 +139,30 @@ 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">
{settings?.data.directConnect?.client.hubs.map( <span className="text-xl text-slate-500 dark:text-slate-200 pr-5">
({ value, label }) => ( Default Hub for Searches
<div key={value}> </span>
<div>{label}</div> <span className="h-px flex-1 bg-slate-200 dark:bg-slate-400"></span>
<span className="is-size-7">{value}</span> </span>
</div> <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(
)} ({ value, label }) => (
<div key={value}>
<div>{label}</div>
<span className="is-size-7">{value}</span>
</div>
),
)}
</div>
</div> </div>
</> </>
) : null} ) : null}