tst

<Field icon={<LayoutList className="h-4 w-4 shrink-0 text-slate-400" />} > <select value={mainCategoryId} onChange={(e) => { setMainCategoryId(e.target.value); setForm({ ...form, categoryId: "" }); // reset sub on main change }} className="min-w-0 flex-1 bg-transparent py-3 text-sm text-slate-800 outline-none" > <option value="">اختر التصنيف الرئيسي</option> {categories .filter((c) => !c.parentId) .map((c) => ( <option key={c.id} value={c.id}> {c.nameAr} </option> ))} </select> </Field> {mainCategoryId && ( <Field icon={<LayoutList className="h-4 w-4 shrink-0 text-slate-400" />} > <select value={form.categoryId} onChange={(e) => setForm({ ...form, categoryId: e.target.value })} className="min-w-0 flex-1 bg-transparent py-3 text-sm text-slate-800 outline-none" > <option value="">اختر التصنيف الفرعي</option> {categories .filter((s) => s.parentId === mainCategoryId) .map((s) => ( <option key={s.id} value={s.id}> {s.nameAr} </option> ))} </select> </Field> )}<Field icon={<LayoutList className="h-4 w-4 shrink-0 text-slate-400" />} > <select value={mainCategoryId} onChange={(e) => { setMainCategoryId(e.target.value); setForm({ ...form, categoryId: "" }); // reset sub on main change }} className="min-w-0 flex-1 bg-transparent py-3 text-sm text-slate-800 outline-none" > <option value="">اختر التصنيف الرئيسي</option> {categories .filter((c) => !c.parentId) .map((c) => ( <option key={c.id} value={c.id}> {c.nameAr} </option> ))} </select> </Field> {mainCategoryId && ( <Field icon={<LayoutList className="h-4 w-4 shrink-0 text-slate-400" />} > <select value={form.categoryId} onChange={(e) => setForm({ ...form, categoryId: e.target.value })} className="min-w-0 flex-1 bg-transparent py-3 text-sm text-slate-800 outline-none" > <option value="">اختر التصنيف الفرعي</option> {categories .filter((s) => s.parentId === mainCategoryId) .map((s) => ( <option key={s.id} value={s.id}> {s.nameAr} </option> ))} </select> </Field> )}<Field icon={<LayoutList className="h-4 w-4 shrink-0 text-slate-400" />} > <select value={mainCategoryId} onChange={(e) => { setMainCategoryId(e.target.value); setForm({ ...form, categoryId: "" }); // reset sub on main change }} className="min-w-0 flex-1 bg-transparent py-3 text-sm text-slate-800 outline-none" > <option value="">اختر التصنيف الرئيسي</option> {categories .filter((c) => !c.parentId) .map((c) => ( <option key={c.id} value={c.id}> {c.nameAr} </option> ))} </select> </Field> {mainCategoryId && ( <Field icon={<LayoutList className="h-4 w-4 shrink-0 text-slate-400" />} > <select value={form.categoryId} onChange={(e) => setForm({ ...form, categoryId: e.target.value })} className="min-w-0 flex-1 bg-transparent py-3 text-sm text-slate-800 outline-none" > <option value="">اختر التصنيف الفرعي</option> {categories .filter((s) => s.parentId === mainCategoryId) .map((s) => ( <option key={s.id} value={s.id}> {s.nameAr} </option> ))} </select> </Field> )}