98 lines
6.6 KiB
JavaScript
98 lines
6.6 KiB
JavaScript
import React from 'react'
|
|
import { useForm, usePage } from '@inertiajs/react'
|
|
import StudioLayout from '../../Layouts/StudioLayout'
|
|
import Checkbox from '../../components/ui/Checkbox'
|
|
import NovaSelect from '../../components/ui/NovaSelect'
|
|
|
|
function toggleItem(list, value) {
|
|
return list.includes(value) ? list.filter((item) => item !== value) : [...list, value]
|
|
}
|
|
|
|
export default function StudioGroupRecruitment() {
|
|
const { props } = usePage()
|
|
const recruitment = props.recruitment || {}
|
|
const form = useForm({
|
|
is_recruiting: Boolean(recruitment.is_recruiting),
|
|
headline: recruitment.headline || '',
|
|
description: recruitment.description || '',
|
|
roles_json: Array.isArray(recruitment.roles) ? recruitment.roles : [],
|
|
skills_json: Array.isArray(recruitment.skills) ? recruitment.skills : [],
|
|
contact_mode: recruitment.contact_mode || 'join_request',
|
|
visibility: recruitment.visibility || 'public',
|
|
})
|
|
|
|
const submit = (event) => {
|
|
event.preventDefault()
|
|
form.patch(props.updateUrl)
|
|
}
|
|
|
|
return (
|
|
<StudioLayout title={props.title} subtitle={props.description}>
|
|
<form onSubmit={submit} className="grid gap-6 xl:grid-cols-[minmax(0,1.1fr)_minmax(0,0.9fr)]">
|
|
<section className="rounded-[28px] border border-white/10 bg-white/[0.03] p-5">
|
|
<div className="flex items-center justify-between gap-3">
|
|
<div>
|
|
<h2 className="text-xl font-semibold text-white">Recruitment profile</h2>
|
|
<p className="mt-1 text-sm text-slate-400">Describe what the group is looking for and how applicants should reach you.</p>
|
|
</div>
|
|
<div className="inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/[0.04] px-4 py-2 text-sm text-white">
|
|
<Checkbox checked={form.data.is_recruiting} onChange={(event) => form.setData('is_recruiting', event.target.checked)} label="Recruiting now" />
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mt-5 grid gap-4">
|
|
<label className="grid gap-2 text-sm text-slate-300">
|
|
<span className="text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-500">Headline</span>
|
|
<input value={form.data.headline} onChange={(event) => form.setData('headline', event.target.value)} className="rounded-2xl border border-white/10 bg-black/20 px-4 py-3 text-white outline-none" />
|
|
</label>
|
|
<label className="grid gap-2 text-sm text-slate-300">
|
|
<span className="text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-500">Description</span>
|
|
<textarea value={form.data.description} onChange={(event) => form.setData('description', event.target.value)} rows={7} className="rounded-[24px] border border-white/10 bg-black/20 px-4 py-3 text-white outline-none" />
|
|
</label>
|
|
<label className="grid gap-2 text-sm text-slate-300">
|
|
<span className="text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-500">Roles</span>
|
|
<div className="flex flex-wrap gap-2 rounded-[24px] border border-white/10 bg-black/20 p-4">
|
|
{(Array.isArray(props.roleOptions) ? props.roleOptions : []).map((option) => {
|
|
const selected = form.data.roles_json.includes(option.value)
|
|
|
|
return <button key={option.value} type="button" onClick={() => form.setData('roles_json', toggleItem(form.data.roles_json, option.value))} className={`rounded-full border px-3 py-1.5 text-xs font-semibold ${selected ? 'border-emerald-300/20 bg-emerald-400/10 text-emerald-100' : 'border-white/10 bg-white/[0.03] text-slate-300'}`}>{option.label}</button>
|
|
})}
|
|
</div>
|
|
</label>
|
|
<label className="grid gap-2 text-sm text-slate-300">
|
|
<span className="text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-500">Skills</span>
|
|
<div className="flex flex-wrap gap-2 rounded-[24px] border border-white/10 bg-black/20 p-4">
|
|
{(Array.isArray(props.skillOptions) ? props.skillOptions : []).map((option) => {
|
|
const selected = form.data.skills_json.includes(option.value)
|
|
|
|
return <button key={option.value} type="button" onClick={() => form.setData('skills_json', toggleItem(form.data.skills_json, option.value))} className={`rounded-full border px-3 py-1.5 text-xs font-semibold ${selected ? 'border-sky-300/20 bg-sky-300/10 text-sky-100' : 'border-white/10 bg-white/[0.03] text-slate-300'}`}>{option.label}</button>
|
|
})}
|
|
</div>
|
|
</label>
|
|
</div>
|
|
</section>
|
|
|
|
<section className="rounded-[28px] border border-white/10 bg-white/[0.03] p-5">
|
|
<h2 className="text-xl font-semibold text-white">Application settings</h2>
|
|
<div className="mt-5 grid gap-4">
|
|
<div className="grid gap-2 text-sm text-slate-300">
|
|
<span className="text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-500">Contact mode</span>
|
|
<NovaSelect value={form.data.contact_mode} onChange={(val) => form.setData('contact_mode', val)} options={Array.isArray(props.contactModes) ? props.contactModes : []} searchable={false} />
|
|
</div>
|
|
<div className="grid gap-2 text-sm text-slate-300">
|
|
<span className="text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-500">Visibility</span>
|
|
<NovaSelect value={form.data.visibility} onChange={(val) => form.setData('visibility', val)} options={Array.isArray(props.visibilityOptions) ? props.visibilityOptions : []} searchable={false} />
|
|
</div>
|
|
<div className="rounded-[24px] border border-white/10 bg-black/20 p-4 text-sm text-slate-300">
|
|
<p className="font-semibold text-white">Public preview</p>
|
|
<p className="mt-2">{form.data.headline || 'No headline yet.'}</p>
|
|
<p className="mt-2 text-slate-400">{form.data.description || 'Recruitment copy will show here once you add it.'}</p>
|
|
{form.data.roles_json.length > 0 ? <div className="mt-3 flex flex-wrap gap-2">{form.data.roles_json.map((role) => <span key={role} className="rounded-full border border-white/10 bg-white/[0.04] px-3 py-1 text-xs font-semibold text-white">{role}</span>)}</div> : null}
|
|
</div>
|
|
<button type="submit" disabled={form.processing} className="rounded-full border border-sky-300/20 bg-sky-300/10 px-4 py-3 text-sm font-semibold text-sky-100 disabled:opacity-60">Save recruitment profile</button>
|
|
</div>
|
|
</section>
|
|
</form>
|
|
</StudioLayout>
|
|
)
|
|
} |