89 lines
2.3 KiB
TypeScript
89 lines
2.3 KiB
TypeScript
import React from "react";
|
|
import { Box, TextField, IconButton } from "@mui/material";
|
|
import DeleteOutlineOutlinedIcon from "@mui/icons-material/DeleteOutlineOutlined";
|
|
|
|
interface CourseAttributes {
|
|
id: string | number;
|
|
title: string;
|
|
institution: string;
|
|
year: number | string;
|
|
duration: string;
|
|
description?: string;
|
|
}
|
|
|
|
interface Props {
|
|
data: CourseAttributes;
|
|
onChange: (data: CourseAttributes) => void;
|
|
onRemove: () => void;
|
|
isDeletable: boolean;
|
|
}
|
|
|
|
export default function CourseForm({ data, onChange, onRemove, isDeletable }: Props) {
|
|
const handleChange = (field: keyof CourseAttributes, value: any) => {
|
|
onChange({ ...data, [field]: value });
|
|
};
|
|
|
|
return (
|
|
<Box sx={{ mb: 2, position: "relative" }}>
|
|
{isDeletable && (
|
|
<IconButton
|
|
onClick={onRemove}
|
|
color="error"
|
|
sx={{ position: "absolute", top: 8, right: 8, zIndex: 2 }}
|
|
aria-label="remove-course"
|
|
>
|
|
<DeleteOutlineOutlinedIcon />
|
|
</IconButton>
|
|
)}
|
|
|
|
<Box
|
|
sx={{
|
|
display: "grid",
|
|
gridTemplateColumns: { xs: "1fr", md: "1fr 1fr" },
|
|
gap: 2,
|
|
}}
|
|
>
|
|
<TextField
|
|
fullWidth
|
|
label="عنوان دوره"
|
|
value={data.title}
|
|
onChange={(e) => handleChange("title", e.target.value)}
|
|
/>
|
|
|
|
<TextField
|
|
fullWidth
|
|
label="موسسه برگزار کننده"
|
|
value={data.institution}
|
|
onChange={(e) => handleChange("institution", e.target.value)}
|
|
/>
|
|
|
|
<TextField
|
|
fullWidth
|
|
type="number"
|
|
label="سال برگزاری"
|
|
value={data.year}
|
|
onChange={(e) => handleChange("year", e.target.value)}
|
|
/>
|
|
|
|
<TextField
|
|
fullWidth
|
|
label="مدت دوره"
|
|
value={data.duration}
|
|
onChange={(e) => handleChange("duration", e.target.value)}
|
|
placeholder="مثلاً 40 ساعت"
|
|
/>
|
|
|
|
<TextField
|
|
fullWidth
|
|
multiline
|
|
minRows={2}
|
|
label="توضیحات"
|
|
value={data.description || ""}
|
|
onChange={(e) => handleChange("description", e.target.value)}
|
|
sx={{ gridColumn: { xs: "1", md: "1 / -1" } }}
|
|
/>
|
|
</Box>
|
|
</Box>
|
|
);
|
|
}
|