68 lines
1.5 KiB
TypeScript
68 lines
1.5 KiB
TypeScript
import React, { useState } from "react";
|
||
import { Button, Box } from "@mui/material";
|
||
import CourseForm from "./CourseForm";
|
||
import { AddCircleOutlineOutlined } from "@mui/icons-material";
|
||
|
||
export default function CourseSection() {
|
||
const [courses, setCourses] = useState([
|
||
{
|
||
id: Date.now(),
|
||
title: "",
|
||
institution: "",
|
||
year: "",
|
||
duration: "",
|
||
description: "",
|
||
},
|
||
]);
|
||
|
||
const handleAdd = () => {
|
||
setCourses([
|
||
...courses,
|
||
{
|
||
id: Date.now(),
|
||
title: "",
|
||
institution: "",
|
||
year: "",
|
||
duration: "",
|
||
description: "",
|
||
},
|
||
]);
|
||
};
|
||
|
||
const handleUpdate = (id: number | string, updatedData: any) => {
|
||
setCourses(courses.map((c) => (c.id === id ? updatedData : c)));
|
||
};
|
||
|
||
const handleRemove = (id: number | string) => {
|
||
setCourses(courses.filter((c) => c.id !== id));
|
||
};
|
||
|
||
return (
|
||
<Box>
|
||
{courses.map((course) => (
|
||
<CourseForm
|
||
key={course.id}
|
||
data={course}
|
||
onChange={(data) => handleUpdate(course.id, data)}
|
||
onRemove={() => handleRemove(course.id)}
|
||
isDeletable={courses.length > 1}
|
||
/>
|
||
))}
|
||
|
||
<Button
|
||
variant="contained"
|
||
startIcon={<AddCircleOutlineOutlined />}
|
||
onClick={handleAdd}
|
||
sx={{
|
||
backgroundColor: "#4caf50",
|
||
"&:hover": { backgroundColor: "#388e3c" },
|
||
borderRadius: "12px",
|
||
mt: 1,
|
||
}}
|
||
>
|
||
افزودن دوره آموزشی جدید
|
||
</Button>
|
||
</Box>
|
||
);
|
||
}
|