diff --git a/app/[locale]/jobs/JobsContent.tsx b/app/[locale]/jobs/JobsContent.tsx new file mode 100644 index 0000000..eee0973 --- /dev/null +++ b/app/[locale]/jobs/JobsContent.tsx @@ -0,0 +1,291 @@ +"use client"; + +import { useState, useRef, type FormEvent, type ChangeEvent } from "react"; +import { Link, useLocale, useTranslation } from "@/i18n/navigation"; + +const positionOptions = [ + { value: "content", labelZh: "内容运营", labelEn: "Content Operations" }, + { value: "dev", labelZh: "前端/全栈开发", labelEn: "Frontend / Full-stack Dev" }, + { value: "design", labelZh: "UI/UX 设计", labelEn: "UI/UX Design" }, + { value: "marketing", labelZh: "市场推广", labelEn: "Marketing" }, + { value: "other", labelZh: "其他", labelEn: "Other" }, +]; + +interface FormData { + position: string; + name: string; + email: string; + phone: string; + intro: string; +} + +function Field({ + label, + children, +}: { + label: string; + children: React.ReactNode; +}) { + return ( +
+ +
{children}
+
+ ); +} + +function ChevronDown() { + return ( + + + + ); +} + +export default function JobsContent() { + const { t } = useTranslation("jobs"); + const locale = useLocale(); + const [form, setForm] = useState({ + position: "", + name: "", + email: "", + phone: "", + intro: "", + }); + const [resume, setResume] = useState(null); + const [resumeError, setResumeError] = useState(null); + const fileRef = useRef(null); + + const set = (key: keyof FormData, value: string) => + setForm((prev) => ({ ...prev, [key]: value })); + + const handleSubmit = (e: FormEvent) => { + e.preventDefault(); + setResumeError(null); + if (!resume) { + setResumeError(locale === "zh" ? "请上传简历（PDF 或 Word）" : "Please upload your resume (PDF or Word)"); + return; + } + // 暂不提交，无业务逻辑 + if (locale === "zh") { + alert("表单已填写完成，提交功能即将上线。"); + } else { + alert("Form completed. Submit feature coming soon."); + } + }; + + const handleFileChange = (e: ChangeEvent) => { + const file = e.target.files?.[0]; + if (!file) return; + const ext = file.name.split(".").pop()?.toLowerCase(); + const allowed = ["pdf", "doc", "docx"]; + if (!ext || !allowed.includes(ext)) { + setResumeError(locale === "zh" ? "请上传 PDF、DOC 或 DOCX 格式" : "Please upload PDF, DOC or DOCX"); + return; + } + if (file.size > 10 * 1024 * 1024) { + setResumeError(locale === "zh" ? "文件大小不能超过 10MB" : "File size must be under 10MB"); + return; + } + setResumeError(null); + setResume(file); + }; + + const removeResume = () => { + setResume(null); + setResumeError(null); + if (fileRef.current) fileRef.current.value = ""; + }; + + const getLabel = (opt: (typeof positionOptions)[0]) => + locale === "zh" ? opt.labelZh : opt.labelEn; + + return ( +
+
+ {/* Banner */} +
+
+
+
💼
+
+ {locale === "zh" ? "加入我们" : "Join Us"} +
+
+
+
+
+
+

+ {t("title")} +

+

+ {t("subtitle")} +

+
+
+ + {/* Form */} +
+
+ + + + + + + set("name", e.target.value)} + required + className="form-input" + /> + +
+ +
+ + set("email", e.target.value)} + required + className="form-input" + /> + + + + set("phone", e.target.value)} + className="form-input" + /> + +
+ +
+ +
+