574 lines
24 KiB
TypeScript
574 lines
24 KiB
TypeScript
import { useEffect, useState, useRef } from "react"
|
|
import { Link, useParams, useNavigate } from "react-router-dom"
|
|
import { ArrowLeft, ToggleLeft, ToggleRight, MoreVertical, X, Trash2, AlertCircle, Edit } from "lucide-react"
|
|
import practiceSrc from "../../assets/Practice.svg"
|
|
import spinnerSrc from "../../assets/Circular-indeterminate progress indicator.svg"
|
|
import { Card, CardContent } from "../../components/ui/card"
|
|
import alertSrc from "../../assets/Alert.svg"
|
|
import { Badge } from "../../components/ui/badge"
|
|
import { Button } from "../../components/ui/button"
|
|
import { getSubCoursesByCourse, getCoursesByCategory, getCourseCategories, createSubCourse, updateSubCourse, updateSubCourseStatus, deleteSubCourse } from "../../api/courses.api"
|
|
import { Input } from "../../components/ui/input"
|
|
import type { SubCourse, Course, CourseCategory } from "../../types/course.types"
|
|
|
|
export function SubCoursesPage() {
|
|
const { categoryId, courseId } = useParams<{ categoryId: string; courseId: string }>()
|
|
const navigate = useNavigate()
|
|
const [subCourses, setSubCourses] = useState<SubCourse[]>([])
|
|
const [course, setCourse] = useState<Course | null>(null)
|
|
const [category, setCategory] = useState<CourseCategory | null>(null)
|
|
const [loading, setLoading] = useState(true)
|
|
const [error, setError] = useState<string | null>(null)
|
|
|
|
const [openMenuId, setOpenMenuId] = useState<number | null>(null)
|
|
const [togglingId, setTogglingId] = useState<number | null>(null)
|
|
const [showDeleteModal, setShowDeleteModal] = useState(false)
|
|
const [subCourseToDelete, setSubCourseToDelete] = useState<SubCourse | null>(null)
|
|
const [deleting, setDeleting] = useState(false)
|
|
const menuRef = useRef<HTMLDivElement>(null)
|
|
|
|
const [showAddModal, setShowAddModal] = useState(false)
|
|
const [showEditModal, setShowEditModal] = useState(false)
|
|
const [subCourseToEdit, setSubCourseToEdit] = useState<SubCourse | null>(null)
|
|
const [title, setTitle] = useState("")
|
|
const [description, setDescription] = useState("")
|
|
const [level, setLevel] = useState("")
|
|
const [saving, setSaving] = useState(false)
|
|
const [saveError, setSaveError] = useState<string | null>(null)
|
|
|
|
useEffect(() => {
|
|
const handleClickOutside = (event: MouseEvent) => {
|
|
if (menuRef.current && !menuRef.current.contains(event.target as Node)) {
|
|
setOpenMenuId(null)
|
|
}
|
|
}
|
|
|
|
if (openMenuId !== null) {
|
|
document.addEventListener("mousedown", handleClickOutside)
|
|
}
|
|
return () => document.removeEventListener("mousedown", handleClickOutside)
|
|
}, [openMenuId])
|
|
|
|
const fetchSubCourses = async () => {
|
|
if (!courseId) return
|
|
|
|
try {
|
|
const subCoursesRes = await getSubCoursesByCourse(Number(courseId))
|
|
setSubCourses(subCoursesRes.data.data.sub_courses ?? [])
|
|
} catch (err) {
|
|
console.error("Failed to fetch sub-courses:", err)
|
|
}
|
|
}
|
|
|
|
useEffect(() => {
|
|
const fetchData = async () => {
|
|
if (!courseId || !categoryId) return
|
|
|
|
try {
|
|
const [subCoursesRes, coursesRes, categoriesRes] = await Promise.all([
|
|
getSubCoursesByCourse(Number(courseId)),
|
|
getCoursesByCategory(Number(categoryId)),
|
|
getCourseCategories(),
|
|
])
|
|
|
|
setSubCourses(subCoursesRes.data.data.sub_courses ?? [])
|
|
|
|
const foundCourse = coursesRes.data.data.courses?.find(
|
|
(c) => c.id === Number(courseId)
|
|
)
|
|
setCourse(foundCourse ?? null)
|
|
|
|
const foundCategory = categoriesRes.data.data.categories?.find(
|
|
(c) => c.id === Number(categoryId)
|
|
)
|
|
setCategory(foundCategory ?? null)
|
|
} catch (err) {
|
|
console.error("Failed to fetch sub-courses:", err)
|
|
setError("Failed to load sub-courses")
|
|
} finally {
|
|
setLoading(false)
|
|
}
|
|
}
|
|
|
|
fetchData()
|
|
}, [courseId, categoryId])
|
|
|
|
const handleToggleStatus = async (subCourse: SubCourse) => {
|
|
setTogglingId(subCourse.id)
|
|
try {
|
|
await updateSubCourseStatus(subCourse.id, {
|
|
is_active: !subCourse.is_active,
|
|
level: subCourse.level,
|
|
title: subCourse.title,
|
|
})
|
|
await fetchSubCourses()
|
|
} catch (err) {
|
|
console.error("Failed to update sub-course status:", err)
|
|
} finally {
|
|
setTogglingId(null)
|
|
}
|
|
}
|
|
|
|
const handleDeleteClick = (subCourse: SubCourse) => {
|
|
setSubCourseToDelete(subCourse)
|
|
setShowDeleteModal(true)
|
|
}
|
|
|
|
const handleConfirmDelete = async () => {
|
|
if (!subCourseToDelete) return
|
|
|
|
setDeleting(true)
|
|
try {
|
|
await deleteSubCourse(subCourseToDelete.id)
|
|
setShowDeleteModal(false)
|
|
setSubCourseToDelete(null)
|
|
await fetchSubCourses()
|
|
} catch (err) {
|
|
console.error("Failed to delete sub-course:", err)
|
|
} finally {
|
|
setDeleting(false)
|
|
}
|
|
}
|
|
|
|
const handleAddSubCourse = () => {
|
|
setTitle("")
|
|
setDescription("")
|
|
setLevel("")
|
|
setSaveError(null)
|
|
setShowAddModal(true)
|
|
}
|
|
|
|
const handleSaveNewSubCourse = async () => {
|
|
if (!courseId) return
|
|
setSaving(true)
|
|
setSaveError(null)
|
|
try {
|
|
await createSubCourse({
|
|
course_id: Number(courseId),
|
|
title,
|
|
description,
|
|
level,
|
|
})
|
|
setShowAddModal(false)
|
|
setTitle("")
|
|
setDescription("")
|
|
setLevel("")
|
|
await fetchSubCourses()
|
|
} catch (err) {
|
|
console.error("Failed to create sub-course:", err)
|
|
setSaveError("Failed to create sub-course")
|
|
} finally {
|
|
setSaving(false)
|
|
}
|
|
}
|
|
|
|
const handleEditClick = (subCourse: SubCourse) => {
|
|
setSubCourseToEdit(subCourse)
|
|
setTitle(subCourse.title)
|
|
setDescription(subCourse.description)
|
|
setLevel(subCourse.level)
|
|
setSaveError(null)
|
|
setShowEditModal(true)
|
|
}
|
|
|
|
const handleSaveEditSubCourse = async () => {
|
|
if (!subCourseToEdit) return
|
|
setSaving(true)
|
|
setSaveError(null)
|
|
try {
|
|
await updateSubCourse(subCourseToEdit.id, {
|
|
title,
|
|
description,
|
|
level,
|
|
})
|
|
setShowEditModal(false)
|
|
setSubCourseToEdit(null)
|
|
setTitle("")
|
|
setDescription("")
|
|
setLevel("")
|
|
await fetchSubCourses()
|
|
} catch (err) {
|
|
console.error("Failed to update sub-course:", err)
|
|
setSaveError("Failed to update sub-course")
|
|
} finally {
|
|
setSaving(false)
|
|
}
|
|
}
|
|
|
|
const handleSubCourseClick = (subCourseId: number) => {
|
|
navigate(`/content/category/${categoryId}/courses/${courseId}/sub-courses/${subCourseId}`)
|
|
}
|
|
|
|
if (loading) {
|
|
return (
|
|
<div className="flex flex-col items-center justify-center py-24">
|
|
<img src={spinnerSrc} alt="" className="h-10 w-10 animate-spin" />
|
|
{/* <div className="rounded-full bg-white shadow-sm p-4">
|
|
<RefreshCw className="h-8 w-8 animate-spin text-brand-600" />
|
|
</div>
|
|
<p className="mt-4 text-sm font-medium text-grayScale-400">Loading sub-courses...</p> */}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
if (error) {
|
|
return (
|
|
<div className="flex items-center justify-center py-24">
|
|
<div className="mx-4 flex w-full max-w-md items-center gap-3 rounded-xl border border-red-100 bg-red-50 px-5 py-4 shadow-md">
|
|
<img src={alertSrc} alt="" className="h-10 w-10 shrink-0" />
|
|
<p className="text-sm font-medium text-red-600">{error}</p>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
{/* Header */}
|
|
<div className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
|
|
<div className="flex items-start gap-3 min-w-0">
|
|
<Link
|
|
to={`/content/category/${categoryId}/courses`}
|
|
className="mt-1 grid h-9 w-9 shrink-0 place-items-center rounded-xl border border-grayScale-200 bg-white text-grayScale-500 shadow-sm transition-all hover:border-brand-200 hover:bg-brand-50 hover:text-brand-600 hover:shadow-md"
|
|
>
|
|
<ArrowLeft className="h-4 w-4" />
|
|
</Link>
|
|
<div className="min-w-0">
|
|
<div className="mb-1 flex items-center gap-1.5 text-xs font-medium text-grayScale-400">
|
|
<span className="truncate max-w-[100px] rounded bg-grayScale-50 px-1.5 py-0.5 sm:max-w-none">{category?.name}</span>
|
|
<span className="shrink-0 text-grayScale-300">→</span>
|
|
<span className="truncate max-w-[100px] rounded bg-grayScale-50 px-1.5 py-0.5 sm:max-w-none">{course?.title}</span>
|
|
</div>
|
|
<h1 className="text-2xl font-bold tracking-tight text-grayScale-700">Sub-courses</h1>
|
|
<p className="mt-0.5 text-sm text-grayScale-400">{subCourses.length} sub-course{subCourses.length !== 1 ? "s" : ""} available</p>
|
|
</div>
|
|
</div>
|
|
<Button className="w-full rounded-xl bg-brand-500 px-5 shadow-sm transition-all hover:bg-brand-600 hover:shadow-md sm:w-auto" onClick={handleAddSubCourse}>
|
|
Add New Sub-course
|
|
</Button>
|
|
</div>
|
|
|
|
{/* Sub-course grid or empty state */}
|
|
{subCourses.length === 0 ? (
|
|
<Card className="border border-dashed border-grayScale-200 shadow-none">
|
|
<CardContent className="flex flex-col items-center justify-center py-16">
|
|
<img src={practiceSrc} alt="" className="h-20 w-20" />
|
|
<h3 className="mt-5 text-base font-semibold text-grayScale-600">No sub-courses yet</h3>
|
|
<p className="mt-1.5 max-w-xs text-center text-sm text-grayScale-400">Get started by adding your first sub-course to this course</p>
|
|
<Button className="mt-5 rounded-xl bg-brand-500 px-5 shadow-sm hover:bg-brand-600 hover:shadow-md" onClick={handleAddSubCourse}>
|
|
Add your first sub-course
|
|
</Button>
|
|
</CardContent>
|
|
</Card>
|
|
) : (
|
|
<div className="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
|
|
{subCourses.map((subCourse, index) => {
|
|
const gradients = [
|
|
"bg-gradient-to-br from-blue-100 to-blue-200",
|
|
"bg-gradient-to-br from-purple-100 to-purple-200",
|
|
"bg-gradient-to-br from-green-100 to-green-200",
|
|
"bg-gradient-to-br from-yellow-100 to-yellow-200",
|
|
]
|
|
return (
|
|
<Card
|
|
key={subCourse.id}
|
|
className="group cursor-pointer overflow-hidden border border-grayScale-100 bg-white shadow-sm transition-all duration-200 hover:shadow-soft hover:-translate-y-1 hover:border-brand-100"
|
|
onClick={() => handleSubCourseClick(subCourse.id)}
|
|
>
|
|
{/* Thumbnail with level badge */}
|
|
<div className="relative aspect-video w-full overflow-hidden">
|
|
{subCourse.thumbnail ? (
|
|
<img
|
|
src={subCourse.thumbnail}
|
|
alt={subCourse.title}
|
|
className="h-full w-full object-cover rounded-t-lg transition-transform duration-300 group-hover:scale-105"
|
|
/>
|
|
) : (
|
|
<div className={`h-full w-full rounded-t-lg transition-transform duration-300 group-hover:scale-105 ${gradients[index % gradients.length]}`} />
|
|
)}
|
|
{subCourse.level && (
|
|
<div className="absolute bottom-2.5 right-2.5 rounded-md bg-brand-600/90 px-2.5 py-1 text-xs font-semibold tracking-wide text-white shadow-sm backdrop-blur-sm">
|
|
{subCourse.level}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Content */}
|
|
<div className="flex flex-col gap-3 p-4">
|
|
{/* Status and menu */}
|
|
<div className="flex items-center justify-between">
|
|
<Badge
|
|
className={`rounded-full px-2.5 py-0.5 text-[11px] font-semibold uppercase tracking-wider ${
|
|
subCourse.is_active
|
|
? "border border-green-200 bg-green-50 text-green-700"
|
|
: "border border-grayScale-200 bg-grayScale-50 text-grayScale-500"
|
|
}`}
|
|
>
|
|
<span className={`mr-1.5 inline-block h-1.5 w-1.5 rounded-full ${subCourse.is_active ? "bg-green-500" : "bg-grayScale-400"}`} />
|
|
{subCourse.is_active ? "Active" : "Inactive"}
|
|
</Badge>
|
|
<div
|
|
className="relative"
|
|
ref={openMenuId === subCourse.id ? menuRef : undefined}
|
|
onClick={(e) => e.stopPropagation()}
|
|
>
|
|
<button
|
|
onClick={() => setOpenMenuId(openMenuId === subCourse.id ? null : subCourse.id)}
|
|
className="grid h-7 w-7 place-items-center rounded-lg text-grayScale-400 transition-colors hover:bg-grayScale-100 hover:text-grayScale-600"
|
|
>
|
|
<MoreVertical className="h-4 w-4" />
|
|
</button>
|
|
{openMenuId === subCourse.id && (
|
|
<div className="absolute right-0 top-full z-10 mt-1.5 w-44 overflow-hidden rounded-xl border border-grayScale-100 bg-white py-1 shadow-lg">
|
|
<button
|
|
onClick={() => {
|
|
handleToggleStatus(subCourse)
|
|
setOpenMenuId(null)
|
|
}}
|
|
disabled={togglingId === subCourse.id}
|
|
className="flex w-full items-center gap-2.5 px-4 py-2.5 text-sm text-grayScale-600 transition-colors hover:bg-grayScale-50 disabled:opacity-50"
|
|
>
|
|
{subCourse.is_active ? (
|
|
<>
|
|
<ToggleLeft className="h-4 w-4" />
|
|
Deactivate
|
|
</>
|
|
) : (
|
|
<>
|
|
<ToggleRight className="h-4 w-4" />
|
|
Activate
|
|
</>
|
|
)}
|
|
</button>
|
|
<div className="mx-3 border-t border-grayScale-100" />
|
|
<button
|
|
onClick={() => {
|
|
handleDeleteClick(subCourse)
|
|
setOpenMenuId(null)
|
|
}}
|
|
className="flex w-full items-center gap-2.5 px-4 py-2.5 text-sm text-red-500 transition-colors hover:bg-red-50"
|
|
>
|
|
<Trash2 className="h-4 w-4" />
|
|
Delete
|
|
</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Title */}
|
|
<div>
|
|
<h3 className="font-semibold text-grayScale-700 group-hover:text-brand-600 transition-colors">{subCourse.title}</h3>
|
|
<p className="mt-1 text-sm leading-relaxed text-grayScale-400 line-clamp-2">
|
|
{subCourse.description || "No description available"}
|
|
</p>
|
|
</div>
|
|
|
|
{/* Edit button */}
|
|
<Button
|
|
variant="outline"
|
|
className="mt-auto w-full rounded-lg border-grayScale-200 text-grayScale-500 transition-all hover:border-brand-200 hover:bg-brand-50 hover:text-brand-600"
|
|
onClick={(e) => {
|
|
e.stopPropagation()
|
|
handleEditClick(subCourse)
|
|
}}
|
|
>
|
|
<Edit className="mr-2 h-3.5 w-3.5" />
|
|
Edit
|
|
</Button>
|
|
</div>
|
|
</Card>
|
|
)
|
|
})}
|
|
</div>
|
|
)}
|
|
|
|
{/* Delete Modal */}
|
|
{showDeleteModal && subCourseToDelete && (
|
|
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 backdrop-blur-sm">
|
|
<div className="mx-4 w-full max-w-sm rounded-2xl bg-white shadow-2xl">
|
|
<div className="flex items-center justify-between border-b border-grayScale-100 px-6 py-4">
|
|
<h2 className="text-lg font-semibold text-grayScale-700">Delete Sub-course</h2>
|
|
<button
|
|
onClick={() => setShowDeleteModal(false)}
|
|
className="grid h-8 w-8 place-items-center rounded-lg text-grayScale-400 transition-colors hover:bg-grayScale-100 hover:text-grayScale-600"
|
|
>
|
|
<X className="h-5 w-5" />
|
|
</button>
|
|
</div>
|
|
|
|
<div className="px-6 py-6">
|
|
<div className="mx-auto mb-4 grid h-12 w-12 place-items-center rounded-full bg-red-50">
|
|
<Trash2 className="h-5 w-5 text-red-500" />
|
|
</div>
|
|
<p className="text-center text-sm leading-relaxed text-grayScale-600">
|
|
Are you sure you want to delete{" "}
|
|
<span className="font-semibold text-grayScale-700">{subCourseToDelete.title}</span>? This action cannot
|
|
be undone.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="flex flex-col-reverse gap-3 border-t border-grayScale-100 px-6 py-4 sm:flex-row sm:justify-end">
|
|
<Button
|
|
variant="outline"
|
|
onClick={() => setShowDeleteModal(false)}
|
|
disabled={deleting}
|
|
className="w-full rounded-lg sm:w-auto"
|
|
>
|
|
Cancel
|
|
</Button>
|
|
<Button
|
|
className="w-full rounded-lg bg-red-500 shadow-sm hover:bg-red-600 sm:w-auto"
|
|
onClick={handleConfirmDelete}
|
|
disabled={deleting}
|
|
>
|
|
{deleting ? "Deleting..." : "Delete"}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Add Sub-course Modal */}
|
|
{showAddModal && (
|
|
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 backdrop-blur-sm">
|
|
<div className="mx-4 w-full max-w-md rounded-2xl bg-white shadow-2xl">
|
|
<div className="flex items-center justify-between border-b border-grayScale-100 px-6 py-4">
|
|
<h2 className="text-lg font-semibold text-grayScale-700">Add New Sub-course</h2>
|
|
<button
|
|
onClick={() => setShowAddModal(false)}
|
|
className="grid h-8 w-8 place-items-center rounded-lg text-grayScale-400 transition-colors hover:bg-grayScale-100 hover:text-grayScale-600"
|
|
>
|
|
<X className="h-5 w-5" />
|
|
</button>
|
|
</div>
|
|
|
|
<div className="space-y-5 px-6 py-6">
|
|
<div className="space-y-1.5">
|
|
<label className="text-sm font-semibold text-grayScale-600">Title</label>
|
|
<Input
|
|
value={title}
|
|
onChange={(e) => setTitle(e.target.value)}
|
|
placeholder="Enter sub-course title"
|
|
/>
|
|
</div>
|
|
<div className="space-y-1.5">
|
|
<label className="text-sm font-semibold text-grayScale-600">Description</label>
|
|
<textarea
|
|
value={description}
|
|
onChange={(e) => setDescription(e.target.value)}
|
|
placeholder="Enter sub-course description"
|
|
className="w-full rounded-lg border border-grayScale-200 px-3 py-2.5 text-sm transition-colors focus:border-brand-500 focus:outline-none focus:ring-2 focus:ring-brand-500/20"
|
|
rows={3}
|
|
/>
|
|
</div>
|
|
<div className="space-y-1.5">
|
|
<label className="text-sm font-semibold text-grayScale-600">Level</label>
|
|
<Input
|
|
value={level}
|
|
onChange={(e) => setLevel(e.target.value)}
|
|
placeholder="e.g., Beginner, Intermediate, Advanced"
|
|
/>
|
|
</div>
|
|
{saveError && (
|
|
<div className="flex items-center gap-2 rounded-lg border border-red-100 bg-red-50 px-4 py-2.5 text-sm font-medium text-red-600">
|
|
<AlertCircle className="h-4 w-4 shrink-0" />
|
|
{saveError}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div className="flex flex-col-reverse gap-3 border-t border-grayScale-100 px-6 py-4 sm:flex-row sm:justify-end">
|
|
<Button
|
|
variant="outline"
|
|
onClick={() => setShowAddModal(false)}
|
|
disabled={saving}
|
|
className="w-full rounded-lg sm:w-auto"
|
|
>
|
|
Cancel
|
|
</Button>
|
|
<Button
|
|
className="w-full rounded-lg bg-brand-500 shadow-sm hover:bg-brand-600 sm:w-auto"
|
|
onClick={handleSaveNewSubCourse}
|
|
disabled={saving || !title.trim()}
|
|
>
|
|
{saving ? "Saving..." : "Save"}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Edit Sub-course Modal */}
|
|
{showEditModal && subCourseToEdit && (
|
|
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 backdrop-blur-sm">
|
|
<div className="mx-4 w-full max-w-md rounded-2xl bg-white shadow-2xl">
|
|
<div className="flex items-center justify-between border-b border-grayScale-100 px-6 py-4">
|
|
<h2 className="text-lg font-semibold text-grayScale-700">Edit Sub-course</h2>
|
|
<button
|
|
onClick={() => setShowEditModal(false)}
|
|
className="grid h-8 w-8 place-items-center rounded-lg text-grayScale-400 transition-colors hover:bg-grayScale-100 hover:text-grayScale-600"
|
|
>
|
|
<X className="h-5 w-5" />
|
|
</button>
|
|
</div>
|
|
|
|
<div className="space-y-5 px-6 py-6">
|
|
<div className="space-y-1.5">
|
|
<label className="text-sm font-semibold text-grayScale-600">Title</label>
|
|
<Input
|
|
value={title}
|
|
onChange={(e) => setTitle(e.target.value)}
|
|
placeholder="Enter sub-course title"
|
|
/>
|
|
</div>
|
|
<div className="space-y-1.5">
|
|
<label className="text-sm font-semibold text-grayScale-600">Description</label>
|
|
<textarea
|
|
value={description}
|
|
onChange={(e) => setDescription(e.target.value)}
|
|
placeholder="Enter sub-course description"
|
|
className="w-full rounded-lg border border-grayScale-200 px-3 py-2.5 text-sm transition-colors focus:border-brand-500 focus:outline-none focus:ring-2 focus:ring-brand-500/20"
|
|
rows={3}
|
|
/>
|
|
</div>
|
|
<div className="space-y-1.5">
|
|
<label className="text-sm font-semibold text-grayScale-600">Level</label>
|
|
<Input
|
|
value={level}
|
|
onChange={(e) => setLevel(e.target.value)}
|
|
placeholder="e.g., Beginner, Intermediate, Advanced"
|
|
/>
|
|
</div>
|
|
{saveError && (
|
|
<div className="flex items-center gap-2 rounded-lg border border-red-100 bg-red-50 px-4 py-2.5 text-sm font-medium text-red-600">
|
|
<AlertCircle className="h-4 w-4 shrink-0" />
|
|
{saveError}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div className="flex flex-col-reverse gap-3 border-t border-grayScale-100 px-6 py-4 sm:flex-row sm:justify-end">
|
|
<Button
|
|
variant="outline"
|
|
onClick={() => setShowEditModal(false)}
|
|
disabled={saving}
|
|
className="w-full rounded-lg sm:w-auto"
|
|
>
|
|
Cancel
|
|
</Button>
|
|
<Button
|
|
className="w-full rounded-lg bg-brand-500 shadow-sm hover:bg-brand-600 sm:w-auto"
|
|
onClick={handleSaveEditSubCourse}
|
|
disabled={saving || !title.trim()}
|
|
>
|
|
{saving ? "Saving..." : "Save"}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|