first commit

ui/forms/LanguageForm.tsx

@@ -0,0 +1,161 @@
+import React from "react";
+import { Box, MenuItem, Paper, TextField } from "@mui/material";
+
+type ProficiencyLevel =
+  | ""
+  | "NONE"
+  | "VERY_WEAK"
+  | "WEAK"
+  | "AVERAGE"
+  | "GOOD"
+  | "VERY_GOOD"
+  | "EXCELLENT";
+
+const proficiencyOptions: { value: ProficiencyLevel; label: string }[] = [
+  { value: "", label: "انتخاب ..." },
+  { value: "NONE", label: "ندارد" },
+  { value: "VERY_WEAK", label: "خیلی ضعیف" },
+  { value: "WEAK", label: "ضعیف" },
+  { value: "AVERAGE", label: "متوسط" },
+  { value: "GOOD", label: "خوب" },
+  { value: "VERY_GOOD", label: "خیلی خوب" },
+  { value: "EXCELLENT", label: "عالی" },
+];
+
+export interface LanguageSkillsUIData {
+  englishLevel: ProficiencyLevel;
+  englishDescription: string;
+  englishCertificate: string;
+
+  arabicLevel: ProficiencyLevel;
+  arabicDescription: string;
+
+  otherLanguagesDescription: string;
+  dialectsDescription: string;
+
+  otherSkills: string;
+}
+
+interface Props {
+  value: LanguageSkillsUIData;
+  onChange: (next: LanguageSkillsUIData) => void;
+}
+
+export default function LanguageSkillsForm({ value, onChange }: Props) {
+  const setField = (field: keyof LanguageSkillsUIData) => (e: React.ChangeEvent<HTMLInputElement>) => {
+    onChange({ ...value, [field]: e.target.value });
+  };
+
+  return (
+    <Paper
+      elevation={0}
+      sx={{
+        p: { xs: 2, md: 3 },
+        borderRadius: "24px",
+        border: "1px solid #e2e8f0",
+        backgroundColor: "#fff",
+      }}
+    >
+      <Box
+        sx={{
+          display: "grid",
+          gridTemplateColumns: { xs: "1fr", md: "1fr 1fr" },
+          gap: 2,
+        }}
+      >
+        {/* زبان انگلیسی */}
+        <TextField
+          select
+          fullWidth
+          label="زبان انگلیسی*"
+          value={value.englishLevel}
+          onChange={setField("englishLevel")}
+        >
+          {proficiencyOptions.map((o) => (
+            <MenuItem key={o.value} value={o.value}>
+              {o.label}
+            </MenuItem>
+          ))}
+        </TextField>
+
+        <TextField
+          fullWidth
+          label="مدرک معتبر زبان انگلیسی"
+          value={value.englishCertificate}
+          onChange={setField("englishCertificate")}
+          placeholder="مثلاً IELTS / TOEFL / MSRT / ..."
+        />
+
+        <TextField
+          fullWidth
+          multiline
+          minRows={2}
+          label="توضیحات"
+          value={value.englishDescription}
+          onChange={setField("englishDescription")}
+          sx={{ gridColumn: { xs: "1", md: "1 / -1" } }}
+        />
+
+        {/* زبان عربی */}
+        <TextField
+          select
+          fullWidth
+          label="زبان عربی*"
+          value={value.arabicLevel}
+          onChange={setField("arabicLevel")}
+        >
+          {proficiencyOptions.map((o) => (
+            <MenuItem key={o.value} value={o.value}>
+              {o.label}
+            </MenuItem>
+          ))}
+        </TextField>
+
+        <Box /> {/* برای حفظ چینش دو ستونه */}
+
+        <TextField
+          fullWidth
+          multiline
+          minRows={2}
+          label="توضیحات"
+          value={value.arabicDescription}
+          onChange={setField("arabicDescription")}
+          sx={{ gridColumn: { xs: "1", md: "1 / -1" } }}
+        />
+
+        {/* سایر زبان‌ها */}
+        <TextField
+          fullWidth
+          multiline
+          minRows={2}
+          label="سایر زبان ها (توضیحات در مورد میزان تسلط)"
+          value={value.otherLanguagesDescription}
+          onChange={setField("otherLanguagesDescription")}
+          sx={{ gridColumn: { xs: "1", md: "1 / -1" } }}
+        />
+
+        {/* گویش‌ها و لهجه‌ها */}
+        <TextField
+          fullWidth
+          multiline
+          minRows={2}
+          label="آشنایی با گویش ها و لهجه های کشور (توضیحات در مورد میزان تسلط)"
+          value={value.dialectsDescription}
+          onChange={setField("dialectsDescription")}
+          sx={{ gridColumn: { xs: "1", md: "1 / -1" } }}
+        />
+
+        {/* سایر مهارت‌ها */}
+        <TextField
+          fullWidth
+          multiline
+          minRows={3}
+          label="سایر مهارت ها (اعم از ورزشی، هنری، فرهنگی، اجتماعی و ...)"
+          value={value.otherSkills}
+          onChange={setField("otherSkills")}
+          sx={{ gridColumn: { xs: "1", md: "1 / -1" } }}
+        />
+      </Box>
+    </Paper>
+  );
+}