From 301232fef16e10f52049ccd882dc7f03f9f0c38c Mon Sep 17 00:00:00 2001 From: mouazkh Date: Tue, 13 Jan 2026 20:42:48 +0300 Subject: [PATCH] fix: handle non-array translation data before mapping buttons --- .../DepartmentDetail6/DepartmentDetail6.jsx | 5 +- .../DepartmentDetail7/DepartmentDetail7.jsx | 5 +- .../DepartmentDetail8/DepartmentDetail8.jsx | 492 ++++++++++++++---- .../Sections/Departments/Departments.jsx | 28 +- 4 files changed, 432 insertions(+), 98 deletions(-) diff --git a/src/Components/Sections/DepartmentDetail6/DepartmentDetail6.jsx b/src/Components/Sections/DepartmentDetail6/DepartmentDetail6.jsx index 760c52b..890cf7e 100644 --- a/src/Components/Sections/DepartmentDetail6/DepartmentDetail6.jsx +++ b/src/Components/Sections/DepartmentDetail6/DepartmentDetail6.jsx @@ -324,7 +324,10 @@ export default function DepartmentDetail6() { }, []); // buttons from translations (array) - const buttons = t("departmentDetail6.buttons", { returnObjects: true }); + const buttons = [ + { id: 1, title: t("departmentDetail6.buttons.1"), key: "expertise" }, + { id: 3, title: t("departmentDetail6.buttons.3"), key: "works" }, + ]; // card groups from translations const cardGroups = t("departmentDetail6.cardGroups", { returnObjects: true }); diff --git a/src/Components/Sections/DepartmentDetail7/DepartmentDetail7.jsx b/src/Components/Sections/DepartmentDetail7/DepartmentDetail7.jsx index fc39036..8c4d3cf 100644 --- a/src/Components/Sections/DepartmentDetail7/DepartmentDetail7.jsx +++ b/src/Components/Sections/DepartmentDetail7/DepartmentDetail7.jsx @@ -320,7 +320,10 @@ export default function DepartmentDetail7() { }; // جلب الأزرار/البيانات من الترجمة - const buttons = t("departmentDetail7.buttons", { returnObjects: true }); + const buttons = [ + { id: 1, title: t("departmentDetail7.buttons.1"), key: "expertise" }, + { id: 2, title: t("departmentDetail7.buttons.2"), key: "works" }, + ]; const projectsTimeline = t("departmentDetail7.projectsTimeline.defaultProjects", { returnObjects: true }); const expertiseTexts = t("departmentDetail7.expertiseItems", { returnObjects: true }); const hero = t("departmentDetail7.hero", { returnObjects: true }); diff --git a/src/Components/Sections/DepartmentDetail8/DepartmentDetail8.jsx b/src/Components/Sections/DepartmentDetail8/DepartmentDetail8.jsx index 394483a..e3999bd 100644 --- a/src/Components/Sections/DepartmentDetail8/DepartmentDetail8.jsx +++ b/src/Components/Sections/DepartmentDetail8/DepartmentDetail8.jsx @@ -15,7 +15,7 @@ function ProjectsTimeline({ dir = "rtl", scrollLabel = "خط زمني قابل للتمرير", prevLabel = "السابق", - nextLabel = "التالي" + nextLabel = "التالي", }) { const wrapperRef = useRef(null); const scrollRef = useRef(null); @@ -25,7 +25,9 @@ function ProjectsTimeline({ useEffect(() => { setItemsRefs((r) => { - const arr = Array(projects.length).fill().map((_, i) => r[i] || React.createRef()); + const arr = Array(projects.length) + .fill() + .map((_, i) => r[i] || React.createRef()); return arr; }); }, [projects.length]); @@ -129,7 +131,11 @@ function ProjectsTimeline({ const scrollLeft = scrollContainer.scrollLeft; const targetScroll = - scrollLeft + itemRect.left - containerRect.left - containerRect.width / 2 + itemRect.width / 2; + scrollLeft + + itemRect.left - + containerRect.left - + containerRect.width / 2 + + itemRect.width / 2; scrollContainer.scrollTo({ left: targetScroll, behavior: "smooth" }); setActiveItem(index); @@ -186,7 +192,8 @@ function ProjectsTimeline({ return () => { clearTimeout(t); - if (scrollContainer) scrollContainer.removeEventListener("scroll", onScroll); + if (scrollContainer) + scrollContainer.removeEventListener("scroll", onScroll); window.removeEventListener("resize", onResize); }; }, [itemsRefs, drawCurvedLines, setActiveItem]); @@ -250,25 +257,65 @@ function ProjectsTimeline({ .projects-timeline-root.plain-bleed .project-card { max-width:420px; } `; - const mainStyle = plain ? { background: "#ffffff", paddingBottom: 0 } : { background: "linear-gradient(135deg, var(--bg-start) 0%, var(--bg-mid) 30%, var(--bg-end) 60%)" }; + const mainStyle = plain + ? { background: "#ffffff", paddingBottom: 0 } + : { + background: + "linear-gradient(135deg, var(--bg-start) 0%, var(--bg-mid) 30%, var(--bg-end) 60%)", + }; return ( -
+
{!plain && (
-

+

{mainTitle}

-

{subtitle}

+

+ {subtitle} +

)}
-
-
+
+
{projects.map((project, idx) => (
- - + +
@@ -315,44 +378,107 @@ export default function DepartmentDetail8() { const [active, setActive] = useState(null); const hero = t("departmentDetail8.hero", { returnObjects: true }); - const buttons = t("departmentDetail8.buttons", { returnObjects: true }); - const projectsTimeline = t("departmentDetail8.projectsTimeline.defaultProjects", { returnObjects: true }); - const expertiseTexts = t("departmentDetail8.expertiseItems", { returnObjects: true }); + + const buttons = [ + { id: 1, title: t("departmentDetail8.buttons.1"), key: "expertise" }, + { id: 2, title: t("departmentDetail8.buttons.2"), key: "works" }, + ]; + const projectsTimeline = t( + "departmentDetail8.projectsTimeline.defaultProjects", + { returnObjects: true } + ); + const expertiseTexts = t("departmentDetail8.expertiseItems", { + returnObjects: true, + }); const ui = t("departmentDetail8.ui", { returnObjects: true }); const backToMenu = t("departmentDetail8.backToMenu"); const scrollLabels = t("departmentDetail8.scroll", { returnObjects: true }); const icons = [ - ( - - - - ), - ( - - - - ), - ( - - - - ), - ( - - - - ), - ( - - - - ), - ( - - - - ) + + + , + + + , + + + , + + + , + + + , + + + , ]; const expertiseItems = expertiseTexts.map((text, idx) => { @@ -368,10 +494,14 @@ export default function DepartmentDetail8() { setActive((prev) => (prev === key ? null : key)); }; - const heroImage = active === "expertise" ? d34 : active === "works" ? d33 : d21; + const heroImage = + active === "expertise" ? d34 : active === "works" ? d33 : d21; return ( -
+
@@ -400,27 +530,71 @@ export default function DepartmentDetail8() {
{active === "expertise" ? ( - -
{hero.expertiseBadge}
-

{hero.expertiseTitle}

-

{hero.expertiseSubtitle}

+ +
+ {hero.expertiseBadge} +
+

+ {hero.expertiseTitle} +

+

+ {hero.expertiseSubtitle} +

) : active === "works" ? ( - -
{hero.worksBadge}
-

{hero.worksTitle}

-

{hero.worksSubtitle}

+ +
+ {hero.worksBadge} +
+

+ {hero.worksTitle} +

+

+ {hero.worksSubtitle} +

) : ( - -

{hero.defaultTitle}

+ +

+ {hero.defaultTitle} +

)}
-
+
{!active && ( handleButtonClick(b.key)} - className={`group relative rounded-2xl p-4 sm:p-6 shadow-2xl border border-transparent flex flex-col h-full ${isRTL ? 'text-right' : 'text-left'} focus:outline-none focus:ring-4 focus:ring-amber-200 transition-all duration-300 overflow-hidden bg-white/85 backdrop-blur-sm`} + className={`group relative rounded-2xl p-4 sm:p-6 shadow-2xl border border-transparent flex flex-col h-full ${ + isRTL ? "text-right" : "text-left" + } focus:outline-none focus:ring-4 focus:ring-amber-200 transition-all duration-300 overflow-hidden bg-white/85 backdrop-blur-sm`} >
@@ -450,12 +630,24 @@ export default function DepartmentDetail8() {
{b.id}
-

{b.title}

+

+ {b.title} +

{ui.clickToView} - - + +

@@ -468,8 +660,16 @@ export default function DepartmentDetail8() {
- - + +
@@ -496,17 +696,33 @@ export default function DepartmentDetail8() { transition={{ delay: index * 0.05, duration: 0.35 }} whileHover={{ scale: 1.02 }} onClick={() => handleButtonClick(b.key)} - className={`group relative rounded-2xl p-3 shadow-md border border-transparent flex items-center gap-3 ${isRTL ? 'text-right' : 'text-left'} focus:outline-none focus:ring-4 focus:ring-amber-200 transition-all duration-200 overflow-hidden bg-white/90`} + className={`group relative rounded-2xl p-3 shadow-md border border-transparent flex items-center gap-3 ${ + isRTL ? "text-right" : "text-left" + } focus:outline-none focus:ring-4 focus:ring-amber-200 transition-all duration-200 overflow-hidden bg-white/90`} >
{b.id}
-

{b.title}

-

{ui.clickToView}

+

+ {b.title} +

+

+ {ui.clickToView} +

- - + + ))} @@ -519,21 +735,63 @@ export default function DepartmentDetail8() {
{!active ? ( - + ) : active === "works" ? ( - - setActive(null)} whileHover={{ x: 8 }} className={`inline-flex items-center gap-3 text-amber-600 hover:text-amber-700 font-bold mb-6 sm:mb-8 group text-sm sm:text-base focus:outline-none focus:ring-2 focus:ring-amber-200 rounded-lg px-3 py-2 ${isRTL ? 'mr-0 md:-mr-4' : 'ml-0 md:-ml-4'}`}> - - + + setActive(null)} + whileHover={{ x: 8 }} + className={`inline-flex items-center gap-3 text-amber-600 hover:text-amber-700 font-bold mb-6 sm:mb-8 group text-sm sm:text-base focus:outline-none focus:ring-2 focus:ring-amber-200 rounded-lg px-3 py-2 ${ + isRTL ? "mr-0 md:-mr-4" : "ml-0 md:-ml-4" + }`} + > + +
{backToMenu} -
+
) : ( - - setActive(null)} whileHover={{ x: 8 }} className={`inline-flex items-center gap-3 text-amber-600 hover:text-amber-700 font-bold mb-6 sm:mb-8 group text-sm sm:text-base focus:outline-none focus:ring-2 focus:ring-amber-200 rounded-lg px-3 py-2 ${isRTL ? 'mr-0 md:-mr-4' : 'ml-0 md:-ml-4'}`}> - - + + setActive(null)} + whileHover={{ x: 8 }} + className={`inline-flex items-center gap-3 text-amber-600 hover:text-amber-700 font-bold mb-6 sm:mb-8 group text-sm sm:text-base focus:outline-none focus:ring-2 focus:ring-amber-200 rounded-lg px-3 py-2 ${ + isRTL ? "mr-0 md:-mr-4" : "ml-0 md:-ml-4" + }`} + > + + {backToMenu} @@ -563,30 +847,60 @@ export default function DepartmentDetail8() { >
- + {item.icon}
-

{item.text}

+

+ {item.text} +

- - - + + +
))} - +
- {ui.servicesProfessional} -
+ + {ui.servicesProfessional} + +
diff --git a/src/Components/Sections/Departments/Departments.jsx b/src/Components/Sections/Departments/Departments.jsx index 61e2d69..d6bd3dd 100644 --- a/src/Components/Sections/Departments/Departments.jsx +++ b/src/Components/Sections/Departments/Departments.jsx @@ -21,7 +21,11 @@ import d21 from "../../../../src/assets/Images/d21.jpeg"; import d22 from "../../../../src/assets/Images/d22.jpg"; const departments = [ - { id: 1, title: "قسم إنشاء وصيانة المنشآت الصناعية وخطوط الإنتاج", image: d1 }, + { + id: 1, + title: "قسم إنشاء وصيانة المنشآت الصناعية وخطوط الإنتاج", + image: d1, + }, { id: 2, title: "قسم تنفيذ المرافق السكنية والخدمية", image: d7 }, { id: 3, title: "قسم اعادة تأهيل وصيانة المباني", image: d14 }, { id: 4, title: "قسم محطات الوقود وصيانة المنشآت النفطية", image: d17 }, @@ -79,11 +83,14 @@ function DepartmentCard({ dept, offset, index }) { const progressParallax = useTransform(scrollYProgress, [0, 1], [15, -15]); - const y = useTransform([velocityParallax, progressParallax], ([v, p]) => v + p); + const y = useTransform( + [velocityParallax, progressParallax], + ([v, p]) => v + p + ); const handleClick = () => { if (dept.id === 1) { - navigate("/departments/:id"); + navigate("/departments/1"); } if (dept.id === 9) { navigate("/department-detail9"); @@ -110,7 +117,9 @@ function DepartmentCard({ dept, offset, index }) { } }; - const translatedTitle = t(`departments.list.${dept.id - 1}`, { defaultValue: dept.title }); + const translatedTitle = t(`departments.list.${dept.id - 1}`, { + defaultValue: dept.title, + }); return (
@@ -152,10 +162,14 @@ export default function Departments() { const { t } = useTranslation(); return ( -
+

- {t('departments.heading', { defaultValue: 'أقسامنا' })} + {t("departments.heading", { defaultValue: "أقسامنا" })}