Buat Course Baru

Setelah dibuat, tambahkan chapter dan lesson, lalu submit untuk review admin.

{({ errors, processing }) => (

{/* Thumbnail */}

Gambar Cover Kelas {preview ? (

) : ( )} {errors.thumbnail &&

{errors.thumbnail}

}

Judul Course * {errors.title &&

{errors.title}

}

Deskripsi

</div>

<div className="grid grid-cols-2 gap-4">
                                <div>
                                    <label className="mb-1.5 block text-sm font-medium">Kategori</label>
                                    <select
                                        name="category_id"
                                        className="border-input focus-visible:border-ring w-full rounded-md border bg-transparent px-3 py-2 text-sm outline-none"
                                    >
                                        <option value="">-- Pilih Kategori --</option>
                                        {categories.map((c) => (
                                            <option key={c.id} value={c.id}>{c.name}</option>
                                        ))}
                                    </select>
                                </div>

<div>
                                    <label className="mb-1.5 block text-sm font-medium">Level *</label>
                                    <select
                                        name="level"
                                        required
                                        className="border-input focus-visible:border-ring w-full rounded-md border bg-transparent px-3 py-2 text-sm outline-none"
                                    >
                                        <option value="beginner">Pemula</option>
                                        <option value="intermediate">Menengah</option>
                                        <option value="advanced">Lanjutan</option>
                                    </select>
                                </div>
                            </div>

<div>
                                <label className="mb-1.5 block text-sm font-medium">Tipe Harga *</label>
                                <div className="flex gap-4">
                                    <label className="flex items-center gap-2 text-sm cursor-pointer">
                                        <input type="radio" name="price_type" value="free" checked={priceType === 'free'} onChange={() => setPriceType('free')} />
                                        Gratis
                                    </label>
                                    <label className="flex items-center gap-2 text-sm cursor-pointer">
                                        <input type="radio" name="price_type" value="paid" checked={priceType === 'paid'} onChange={() => setPriceType('paid')} />
                                        Berbayar
                                    </label>
                                </div>
                            </div>

{priceType === 'paid' && (
                                <div className="grid gap-1.5">
                                    <label htmlFor="price" className="text-sm font-medium">Harga (Rp) *</label>
                                    <input
                                        id="price"
                                        name="price"
                                        type="number"
                                        min="0"
                                        required
                                        className="border-input focus-visible:border-ring w-full rounded-md border bg-transparent px-3 py-1.5 text-sm outline-none"
                                        placeholder="150000"
                                    />
                                    {errors.price && <p className="mt-1 text-xs text-destructive">{errors.price}</p>}
                                </div>
                            )}

<div className="flex gap-2 pt-2">
                                <Button type="submit" disabled={processing}>
                                    Buat Course
                                </Button>
                            </div>
                        </div>
                    )}
                </Form>
            </div>
        </>
    );
}

InstructorCourseCreate.layout = (page: React.ReactNode) => (
    <AppLayout breadcrumbs={breadcrumbs}>{page}</AppLayout>
);