{title}

Back to list

form.setData('name', event.target.value) } required className="w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm text-[#0a1530] outline-none focus:border-[#0b7285] dark:border-[#4a3a78] dark:bg-[#160f2d] dark:text-[#efe8ff] dark:focus:border-[#a78bfa]" /> form.setData('slug', event.target.value) } placeholder="Optional" className="w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm text-[#0a1530] outline-none focus:border-[#0b7285] dark:border-[#4a3a78] dark:bg-[#160f2d] dark:text-[#efe8ff] dark:focus:border-[#a78bfa]" />

form.setData('description', event.target.value)
                        }
                        className="h-28 w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm text-[#0a1530] outline-none focus:border-[#0b7285] dark:border-[#4a3a78] dark:bg-[#160f2d] dark:text-[#efe8ff] dark:focus:border-[#a78bfa]"
                    />
                </Field>

<div className="grid gap-4 md:grid-cols-2">
                    <Field label="Sort Order" error={form.errors.sort_order}>
                        <input
                            type="number"
                            min={0}
                            value={form.data.sort_order}
                            onChange={(event) =>
                                form.setData(
                                    'sort_order',
                                    Number(event.target.value) || 0,
                                )
                            }
                            className="w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm text-[#0a1530] outline-none focus:border-[#0b7285] dark:border-[#4a3a78] dark:bg-[#160f2d] dark:text-[#efe8ff] dark:focus:border-[#a78bfa]"
                        />
                    </Field>
                    <div className="flex items-center gap-3 rounded-xl border border-slate-200 p-3 dark:border-[#3c2b68]">
                        <Switch
                            checked={form.data.is_active}
                            onChange={(checked) =>
                                form.setData('is_active', checked)
                            }
                            ariaLabel="Toggle blog category active state"
                        />
                        <span className="text-sm font-medium text-[#0a1530] dark:text-[#e5dcff]">
                            Active
                        </span>
                    </div>
                </div>

<button
                    type="submit"
                    disabled={form.processing}
                    className="rounded-lg bg-[#0b7285] px-4 py-2 text-sm font-semibold text-white hover:bg-[#095f6f] disabled:opacity-50 dark:bg-[#7c3aed] dark:hover:bg-[#8b5cf6]"
                >
                    Save Category
                </button>
            </form>
        </div>
    );
}