100 lines
3.9 KiB
TypeScript
100 lines
3.9 KiB
TypeScript
"use client";
|
||
|
||
import { useState, useTransition } from "react";
|
||
import { Input } from "@/components/ui/input";
|
||
import { Label } from "@/components/ui/label";
|
||
import { Textarea } from "@/components/ui/textarea";
|
||
import { Button } from "@/components/ui/button";
|
||
import { updateCourse, deleteCourse } from "@/app/admin/courses/actions";
|
||
|
||
interface Course {
|
||
id: string;
|
||
title: string;
|
||
slug: string;
|
||
description: string | null;
|
||
coverImage: string | null;
|
||
published: boolean;
|
||
}
|
||
|
||
export function CourseEditForm({ course }: { course: Course }) {
|
||
const [published, setPublished] = useState(course.published);
|
||
const [coverImage, setCoverImage] = useState(course.coverImage ?? "");
|
||
const [uploading, setUploading] = useState(false);
|
||
const [pending, startTransition] = useTransition();
|
||
|
||
async function handleImageUpload(e: React.ChangeEvent<HTMLInputElement>) {
|
||
const file = e.target.files?.[0];
|
||
if (!file) return;
|
||
setUploading(true);
|
||
const fd = new FormData();
|
||
fd.append("file", file);
|
||
const res = await fetch("/api/admin/upload", { method: "POST", body: fd });
|
||
const data = await res.json();
|
||
if (data.url) setCoverImage(data.url);
|
||
setUploading(false);
|
||
}
|
||
|
||
function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
|
||
e.preventDefault();
|
||
const fd = new FormData(e.currentTarget);
|
||
fd.set("published", String(published));
|
||
fd.set("coverImage", coverImage);
|
||
startTransition(() => updateCourse(course.id, fd));
|
||
}
|
||
|
||
function handleDelete() {
|
||
if (!confirm("Удалить курс? Это действие нельзя отменить.")) return;
|
||
startTransition(() => deleteCourse(course.id));
|
||
}
|
||
|
||
return (
|
||
<form onSubmit={handleSubmit} className="space-y-4">
|
||
<div className="grid grid-cols-2 gap-4">
|
||
<div className="space-y-1.5">
|
||
<Label htmlFor="title">Название</Label>
|
||
<Input id="title" name="title" defaultValue={course.title} required />
|
||
</div>
|
||
<div className="space-y-1.5">
|
||
<Label htmlFor="slug">Slug</Label>
|
||
<Input id="slug" name="slug" defaultValue={course.slug} required />
|
||
</div>
|
||
</div>
|
||
<div className="space-y-1.5">
|
||
<Label htmlFor="description">Описание</Label>
|
||
<Textarea id="description" name="description" defaultValue={course.description ?? ""} rows={3} />
|
||
</div>
|
||
<div className="space-y-1.5">
|
||
<Label>Обложка</Label>
|
||
<div className="flex items-center gap-3">
|
||
{coverImage && (
|
||
// eslint-disable-next-line @next/next/no-img-element
|
||
<img src={coverImage} alt="cover" className="w-16 h-10 object-cover rounded-md border" />
|
||
)}
|
||
<Input type="file" accept="image/*" onChange={handleImageUpload} disabled={uploading} className="max-w-xs" />
|
||
{uploading && <span className="text-sm text-slate-400">Загрузка...</span>}
|
||
</div>
|
||
</div>
|
||
<div className="flex items-center gap-2">
|
||
<button
|
||
type="button"
|
||
role="switch"
|
||
aria-checked={published}
|
||
onClick={() => setPublished(!published)}
|
||
className={`relative w-10 h-6 rounded-full transition-colors ${published ? "bg-green-500" : "bg-slate-300"}`}
|
||
>
|
||
<span className={`absolute top-1 left-1 w-4 h-4 bg-white rounded-full shadow transition-transform ${published ? "translate-x-4" : ""}`} />
|
||
</button>
|
||
<span className="text-sm text-slate-600">{published ? "Опубликован" : "Черновик"}</span>
|
||
</div>
|
||
<div className="flex justify-between pt-2">
|
||
<Button type="button" variant="destructive" onClick={handleDelete} disabled={pending}>
|
||
Удалить курс
|
||
</Button>
|
||
<Button type="submit" disabled={pending || uploading}>
|
||
{pending ? "Сохранение..." : "Сохранить"}
|
||
</Button>
|
||
</div>
|
||
</form>
|
||
);
|
||
}
|