142 lines
5.7 KiB
TypeScript
142 lines
5.7 KiB
TypeScript
"use client";
|
||
|
||
import { createContext, useContext, useState, useEffect, ReactNode } from "react";
|
||
|
||
type Language = "en" | "ar" | "zh";
|
||
|
||
interface LanguageContextType {
|
||
language: Language;
|
||
setLanguage: (lang: Language) => void;
|
||
t: (key: string) => string;
|
||
dir: "ltr" | "rtl";
|
||
}
|
||
|
||
const translations = {
|
||
en: {
|
||
home: "Home",
|
||
report: "Report Incident",
|
||
safety: "Safety Tips",
|
||
hero_badge: "Emergency Reporting System",
|
||
hero_title_1: "See it. Report it.",
|
||
hero_title_2: "Save Lives.",
|
||
hero_sub: "A secure, fast, and anonymous platform to report accidents, crimes, and dangerous incidents. Your documentation helps public awareness and safety.",
|
||
report_now: "Report Now",
|
||
how_it_works: "How it Works",
|
||
submit_report: "Submit a Report",
|
||
incident_details: "Incident Details",
|
||
incident_type: "Incident Type",
|
||
location: "Location",
|
||
description: "Description",
|
||
contact_info: "Contact Info (Optional)",
|
||
placeholder_location: "Street address, city, or coordinates",
|
||
placeholder_description: "Provide as much detail as possible...",
|
||
placeholder_contact: "Email or phone if you wish to be contacted",
|
||
anonymous_note: "Your report will be processed securely. You can remain anonymous by leaving contact info blank.",
|
||
accuracy_note: "By submitting, you agree that the information provided is accurate to the best of your knowledge.",
|
||
car_accident: "Car Accident",
|
||
train_accident: "Train Accident",
|
||
crime: "Crime / Robbery",
|
||
violent_crime: "Violent Crime",
|
||
emergency: "Emergency / Hazard",
|
||
other: "Other",
|
||
},
|
||
ar: {
|
||
home: "الرئيسية",
|
||
report: "تبليغ عن حادث",
|
||
safety: "نصائح السلامة",
|
||
hero_badge: "نظام التبليغ عن الطوارئ",
|
||
hero_title_1: "شاهد – بلّغ –",
|
||
hero_title_2: "أنقذ الأرواح",
|
||
hero_sub: "منصة آمنة وسريعة ومجهولة للتبليغ عن الحوادث والجرائم والحوادث الخطيرة. توثيقك يساعد في الوعي العام والسلامة.",
|
||
report_now: "بلغ الآن",
|
||
how_it_works: "كيف يعمل",
|
||
submit_report: "تقديم بلاغ",
|
||
incident_details: "تفاصيل الحادث",
|
||
incident_type: "نوع الحادث",
|
||
location: "الموقع",
|
||
description: "الوصف",
|
||
contact_info: "معلومات الاتصال (اختياري)",
|
||
placeholder_location: "عنوان الشارع، المدينة، أو الإحداثيات",
|
||
placeholder_description: "قدم أكبر قدر ممكن من التفاصيل...",
|
||
placeholder_contact: "البريد الإلكتروني أو الهاتف إذا كنت ترغب في التواصل معك",
|
||
anonymous_note: "سيتم معالجة بلاغك بشكل آمن. يمكنك البقاء مجهول الهوية بترك معلومات الاتصال فارغة.",
|
||
accuracy_note: "بتقديمك للبلاغ، فإنك توافق على أن المعلومات المقدمة دقيقة حسب علمك.",
|
||
car_accident: "حادث سيارة",
|
||
train_accident: "حادث قطار",
|
||
crime: "جريمة / سرقة",
|
||
violent_crime: "جريمة عنف",
|
||
emergency: "طوارئ / خطر",
|
||
other: "أخرى",
|
||
},
|
||
zh: {
|
||
home: "首页",
|
||
report: "报告事件",
|
||
safety: "安全提示",
|
||
hero_badge: "紧急报告系统",
|
||
hero_title_1: "目击、报告、",
|
||
hero_title_2: "拯救生命",
|
||
hero_sub: "一个安全、快速且匿名的平台，用于报告事故、犯罪和危险事件。您的记录有助于提高公众意识和安全。",
|
||
report_now: "立即报告",
|
||
how_it_works: "工作原理",
|
||
submit_report: "提交报告",
|
||
incident_details: "事件详情",
|
||
incident_type: "事件类型",
|
||
location: "地点",
|
||
description: "描述",
|
||
contact_info: "联系信息（可选）",
|
||
placeholder_location: "街道地址、城市或坐标",
|
||
placeholder_description: "请提供尽可能详细的信息...",
|
||
placeholder_contact: "如果您希望被联系，请提供电子邮件或电话",
|
||
anonymous_note: "您的报告将得到安全处理。您可以不填写联系信息以保持匿名。",
|
||
accuracy_note: "提交即表示您同意所提供的信息在您所知的范围内是准确的。",
|
||
car_accident: "车祸",
|
||
train_accident: "火车事故",
|
||
crime: "犯罪 / 抢劫",
|
||
violent_crime: "暴力犯罪",
|
||
emergency: "紧急情况 / 危险",
|
||
other: "其他",
|
||
},
|
||
};
|
||
|
||
const LanguageContext = createContext<LanguageContextType | undefined>(undefined);
|
||
|
||
export function LanguageProvider({ children }: { children: ReactNode }) {
|
||
const [language, setLanguage] = useState<Language>("en");
|
||
|
||
useEffect(() => {
|
||
const saved = localStorage.getItem("lang") as Language;
|
||
if (saved && (saved === "en" || saved === "ar" || saved === "zh")) {
|
||
setLanguage(saved);
|
||
}
|
||
}, []);
|
||
|
||
const handleSetLanguage = (lang: Language) => {
|
||
setLanguage(lang);
|
||
localStorage.setItem("lang", lang);
|
||
document.documentElement.dir = lang === "ar" ? "rtl" : "ltr";
|
||
document.documentElement.lang = lang;
|
||
};
|
||
|
||
const t = (key: string) => {
|
||
return translations[language][key as keyof typeof translations["en"]] || key;
|
||
};
|
||
|
||
const dir = language === "ar" ? "rtl" : "ltr";
|
||
|
||
return (
|
||
<LanguageContext.Provider value={{ language, setLanguage: handleSetLanguage, t, dir }}>
|
||
<div dir={dir} className={language === "ar" ? "font-arabic" : ""}>
|
||
{children}
|
||
</div>
|
||
</LanguageContext.Provider>
|
||
);
|
||
}
|
||
|
||
export function useLanguage() {
|
||
const context = useContext(LanguageContext);
|
||
if (context === undefined) {
|
||
throw new Error("useLanguage must be used within a LanguageProvider");
|
||
}
|
||
return context;
|
||
}
|