Create Category

Back to list

form.setData('name', event.target.value) } 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]" required /> form.setData('slug', event.target.value) } 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]" placeholder="Optional" />

form.setData( 'sort_order', event.target.value, ) } 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="space-y-4 rounded-2xl border border-slate-200 bg-slate-50/70 p-4 dark:border-[#3c2b68] dark:bg-[#2a1d50]/35">
                        <div>
                            <h2 className="text-base font-semibold text-[#0a1530] dark:text-[#efe8ff]">
                                SEO Metadata
                            </h2>
                            <p className="text-sm text-slate-600 dark:text-[#c7bde8]">
                                Optional metadata used when this category is
                                selected in the catalog.
                            </p>
                        </div>

<Field label="SEO Title" error={form.errors.seo_title}>
                            <input
                                value={form.data.seo_title}
                                onChange={(event) =>
                                    form.setData(
                                        'seo_title',
                                        event.target.value,
                                    )
                                }
                                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]"
                                placeholder="Optional, defaults to category name"
                            />
                        </Field>

<Field
                            label="Meta Description"
                            error={form.errors.meta_description}
                        >
                            <textarea
                                value={form.data.meta_description}
                                onChange={(event) =>
                                    form.setData(
                                        'meta_description',
                                        event.target.value,
                                    )
                                }
                                className="h-24 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]"
                                placeholder="Optional search result summary"
                            />
                        </Field>

<Field
                            label="Meta Keywords"
                            error={form.errors.meta_keywords}
                        >
                            <input
                                value={form.data.meta_keywords}
                                onChange={(event) =>
                                    form.setData(
                                        'meta_keywords',
                                        event.target.value,
                                    )
                                }
                                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]"
                                placeholder="Optional comma-separated keywords"
                            />
                        </Field>
                    </div>

<div className="mt-2 rounded-xl border border-slate-200 bg-slate-50/80 p-4 dark:border-[#3c2b68] dark:bg-[#2a1d50]/40">
                        <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
                            <div className="inline-flex items-center gap-3 text-sm text-slate-700 dark:text-[#d7c7ff]">
                                <Switch
                                    checked={form.data.is_active}
                                    onChange={(checked) =>
                                        form.setData('is_active', checked)
                                    }
                                    ariaLabel="Active category"
                                />
                                Active category
                            </div>

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