first commit

ui/forms/CourseSection.tsx

@@ -0,0 +1,67 @@
+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>
+  );
+}