forked from coracle/caravel
Jon Staab
105 lines
3.4 KiB
TypeScript
105 lines
3.4 KiB
TypeScript
import { createEffect, createSignal } from "solid-js"
|
|
import type { Relay } from "@/lib/hooks"
|
|
import { slugify } from "@/lib/slugify"
|
|
|
|
export type RelayFormValues = {
|
|
info_name: string
|
|
subdomain: string
|
|
info_icon: string
|
|
info_description: string
|
|
}
|
|
|
|
type RelayFormProps = {
|
|
initialValues: Pick<Relay, "info_name" | "subdomain" | "info_icon" | "info_description">
|
|
syncSubdomainWithName?: boolean
|
|
onSubmit: (values: RelayFormValues, e: Event) => void | Promise<void>
|
|
submitting: boolean
|
|
error?: string
|
|
submitLabel: string
|
|
submittingLabel: string
|
|
}
|
|
|
|
export default function RelayForm(props: RelayFormProps) {
|
|
const [name, setName] = createSignal(props.initialValues.info_name)
|
|
const [subdomain, setSubdomain] = createSignal(props.initialValues.subdomain)
|
|
const [icon, setIcon] = createSignal(props.initialValues.info_icon)
|
|
const [description, setDescription] = createSignal(props.initialValues.info_description)
|
|
|
|
createEffect(() => {
|
|
setName(props.initialValues.info_name)
|
|
setSubdomain(props.initialValues.subdomain)
|
|
setIcon(props.initialValues.info_icon)
|
|
setDescription(props.initialValues.info_description)
|
|
})
|
|
|
|
function handleSubmit(e: Event) {
|
|
e.preventDefault()
|
|
void props.onSubmit(
|
|
{
|
|
info_name: name(),
|
|
subdomain: subdomain(),
|
|
info_icon: icon(),
|
|
info_description: description(),
|
|
},
|
|
e,
|
|
)
|
|
}
|
|
|
|
return (
|
|
<form onSubmit={handleSubmit} class="space-y-6">
|
|
{/* Basic info */}
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Relay Name</label>
|
|
<input
|
|
value={name()}
|
|
onInput={e => {
|
|
const value = e.currentTarget.value
|
|
setName(value)
|
|
if (props.syncSubdomainWithName) setSubdomain(slugify(value))
|
|
}}
|
|
required
|
|
class="w-full border border-gray-300 rounded-lg px-3 py-2"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Subdomain</label>
|
|
<div class="flex items-center border border-gray-300 rounded-lg overflow-hidden">
|
|
<input
|
|
value={subdomain()}
|
|
onInput={e => setSubdomain(e.currentTarget.value)}
|
|
required
|
|
class="flex-1 px-3 py-2"
|
|
/>
|
|
<span class="px-3 py-2 bg-gray-50 text-gray-500 text-sm border-l border-gray-300">.spaces.coracle.social</span>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Icon URL</label>
|
|
<input
|
|
type="url"
|
|
value={icon()}
|
|
onInput={e => setIcon(e.currentTarget.value)}
|
|
class="w-full border border-gray-300 rounded-lg px-3 py-2"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Description</label>
|
|
<textarea
|
|
value={description()}
|
|
onInput={e => setDescription(e.currentTarget.value)}
|
|
rows={3}
|
|
class="w-full border border-gray-300 rounded-lg px-3 py-2"
|
|
/>
|
|
</div>
|
|
{props.error && <p class="text-sm text-red-600">{props.error}</p>}
|
|
<button
|
|
type="submit"
|
|
disabled={props.submitting}
|
|
class="w-full py-2 px-4 bg-blue-600 text-white font-medium rounded-lg hover:bg-blue-700 disabled:opacity-50"
|
|
>
|
|
{props.submitting ? props.submittingLabel : props.submitLabel}
|
|
</button>
|
|
</form>
|
|
)
|
|
}
|