From 949f0bd320f0d1b290d3dfa0a1c2f12a1578be75 Mon Sep 17 00:00:00 2001
From: Lanskikh <lanskikh-mikhail@mail.ru>
Date: Fri, 5 Jul 2024 16:34:56 +0500
Subject: [PATCH] maybe fixed sliders, trainings tab

---
 src/components/Main/Products.tsx | 125 ++++++++++++++++++++++++-------
 src/components/Main/Projects.tsx |   8 +-
 2 files changed, 101 insertions(+), 32 deletions(-)

diff --git a/src/components/Main/Products.tsx b/src/components/Main/Products.tsx
index 692657a..fbf5b89 100644
--- a/src/components/Main/Products.tsx
+++ b/src/components/Main/Products.tsx
@@ -1,6 +1,7 @@
-import { useState } from 'react';
+import { useEffect, useReducer, useState } from 'react';
 import { MiniTitle } from '../../ui/MiniTitle';
 import { Title } from '../../ui/Title';
+import { useWindowWidth } from '../../hooks/useWindowWidth';
 
 export function Products() {
   const [curTab, setCurTab] = useState(0);
@@ -124,7 +125,7 @@ function TrainingsTab() {
         <div className="flex desktop:flex-col tablet:max-desktop:mt-8 desktop:gap-y-6 mobile:max-tablet:flex-col mobile:max-tablet:gap-y-4 tablet:max-desktop:gap-x-3">
           <TeachingItem
             iconType="danger"
-            text="Отработка проведения технологических операций: оказание первой помощи, работы на высоте,  работа с доменной печью и т.п."
+            text="Отработка проведения технологических операций: оказание первой помощи, работы на высоте, работа с доменной печью и т.п."
             title="обучение навыкам работы на опасных производствах"
           />
           <TeachingItem
@@ -144,6 +145,39 @@ function TrainingsTab() {
 }
 
 function SimulatorsTab() {
+  const width = useWindowWidth();
+  const [slide, setSlide] = useState(0);
+  const [touchStart, setTouchStart] = useState(0);
+  const [sliderOffset, setSliderOffset] = useState(-width + 80);
+
+  const [order, dispatch] = useReducer(
+    (state: string[], action: string) => {
+      switch (action) {
+        case 'prev':
+          setSliderOffset(-(width - 80) * 2);
+          return [state[state.length - 3], ...state.slice(0, -1)];
+        case 'next':
+          setSliderOffset(prev => prev + width - 80);
+          return [...state.slice(1), state[2]];
+        default:
+          return state;
+      }
+    },
+    [
+      'src/assets/rzhd2.png',
+      'src/assets/train.png',
+      'src/assets/dispatcher.png',
+      'src/assets/winda.png',
+      'src/assets/rzhd.png',
+      'src/assets/rzhd2.png',
+      'src/assets/train.png',
+    ],
+  );
+
+  useEffect(() => {
+    setSliderOffset(-width + 80);
+  }, [order, slide, width]);
+
   return (
     <div className="bg-[#3D425C4D] rounded-xl desktop:p-10 tablet:max-desktop:p-7 mobile:max-tablet:p-5 desktop:max-h-[546px] overflow-hidden">
       <div className="tablet:flex justify-between gap-x-2">
@@ -172,32 +206,67 @@ function SimulatorsTab() {
           </div>
         </div>
         <div className="tablet:max-desktop:max-w-[234px]">
-          <div className="flex desktop:justify-end mobile:max-tablet:relative xl:max-w-[clamp(552px,552px+(100vw-1280px)/320*160,712px)] desktop:max-xl:max-w-[300px] tablet:max-desktop:flex-col tablet:flex-wrap gap-2 tablet:max-desktop:mb-10">
-            <img
-              src="src/assets/train.png"
-              className="rounded-lg xl:w-[clamp(178px,178px+(100vw-1280px)/320*54,232px)] tablet:max-xl:hidden"
-              alt=""
-            />
-            <img
-              src="src/assets/dispatcher.png"
-              className="xl:w-[clamp(178px,178px+(100vw-1280px)/320*54,232px)] tablet:max-xl:hidden"
-              alt=""
-            />
-            <img
-              src="src/assets/winda.png"
-              className="xl:w-[clamp(178px,178px+(100vw-1280px)/320*54,232px)] tablet:max-xl:hidden"
-              alt=""
-            />
-            <img
-              src="src/assets/rzhd.png"
-              className="xl:w-[clamp(272px,272px+(100vw-1280px)/320*80,352px)]"
-              alt=""
-            />
-            <img
-              src="src/assets/rzhd2.png"
-              className="xl:w-[clamp(272px,272px+(100vw-1280px)/320*80,352px)]"
-              alt=""
-            />
+          <div
+            className="flex desktop:justify-end mobile:max-tablet:relative xl:max-w-[clamp(553px,553px+(100vw-1280px)/320*160,713px)] desktop:max-xl:max-w-[300px] tablet:max-desktop:flex-col tablet:flex-wrap gap-2 tablet:max-desktop:mb-10 duration-1000"
+            style={
+              width < 640
+                ? {
+                    transform: `translateX(${sliderOffset}px)`,
+                    transition: `${sliderOffset === 0 || sliderOffset === (-width + 80) * 2 ? 0 : 0.4}s`,
+                  }
+                : {}
+            }
+            onTouchStart={e => setTouchStart(e.targetTouches[0].clientX)}
+            onTouchEnd={e => {
+              if (e.nativeEvent.changedTouches[0].clientX - touchStart > 100) {
+                dispatch('prev');
+                setSlide(prev => (prev === 0 ? order.length - 3 : prev - 1));
+              } else if (
+                e.nativeEvent.changedTouches[0].clientX - touchStart <
+                -100
+              ) {
+                dispatch('next');
+                setSlide(prev => (prev === order.length - 3 ? 0 : prev + 1));
+              }
+            }}
+          >
+            {width < 640 ? (
+              order.map(src => (
+                <img
+                  src={src}
+                  className="rounded-lg mobile:max-tablet:min-w-[clamp(280px,100vw-80px,559px)] object-cover"
+                  alt=""
+                />
+              ))
+            ) : (
+              <>
+                <img
+                  src="src/assets/train.png"
+                  className="rounded-lg xl:w-[clamp(178px,178px+(100vw-1280px)/320*54,232px)] tablet:max-xl:hidden"
+                  alt=""
+                />
+                <img
+                  src="src/assets/dispatcher.png"
+                  className="xl:w-[clamp(178px,178px+(100vw-1280px)/320*54,232px)] tablet:max-xl:hidden"
+                  alt=""
+                />
+                <img
+                  src="src/assets/winda.png"
+                  className="xl:w-[clamp(178px,178px+(100vw-1280px)/320*54,232px)] tablet:max-xl:hidden"
+                  alt=""
+                />
+                <img
+                  src="src/assets/rzhd.png"
+                  className="xl:w-[clamp(272px,272px+(100vw-1280px)/320*80,352px)]"
+                  alt=""
+                />
+                <img
+                  src="src/assets/rzhd2.png"
+                  className="xl:w-[clamp(272px,272px+(100vw-1280px)/320*80,352px)]"
+                  alt=""
+                />
+              </>
+            )}
           </div>
           <p className="desktop:hidden mobile:max-tablet:hidden text-[#ffffff] opacity-60 tablet-figma:text-[clamp(12px,12px+(100vw-768px)/832*2,14px)] tablet-figma:leading-[clamp(16.8px,16.8px+(100vw-768px)/832*2.8,19.6px)] mobile:max-tablet-figma:text-xs mobile:max-tablet-figma:leading-[16.8px]">
             модель позволяет производить расчеты характеристик работы,
diff --git a/src/components/Main/Projects.tsx b/src/components/Main/Projects.tsx
index 32cd8c2..4ef7bfa 100644
--- a/src/components/Main/Projects.tsx
+++ b/src/components/Main/Projects.tsx
@@ -115,9 +115,9 @@ function Slider({
   return (
     <div className="flex flex-col desktop:mt-4 tablet:mt-3 mobile:mt-2">
       <div
-        className="flex gap-2 overflow-visible relative mb-[18px] -mr-10 duration-1000"
+        className="flex gap-2 overflow-visible relative mb-[18px] -mr-10"
         style={{
-          transition: `${+!(sliderOffset === 0 || sliderOffset === -baseOffset * 2)}s`,
+          transition: `${sliderOffset === 0 || sliderOffset === -baseOffset * 2 ? 0 : 0.4}s`,
           transform: `translateX(${sliderOffset}px)`,
         }}
         onTouchStart={e => {
@@ -142,7 +142,7 @@ function Slider({
           <Project key={index} {...project} />
         ))}
       </div>
-      <div className="flex items-center gap-4 w-[1264px] self-start ml-64">
+      <div className="flex items-center gap-4 desktop:w-[clamp(720px,100vw-465px,1135px)] mobile:w-full self-start desktop:ml-64">
         <button
           onClick={() => {
             dispatch('prev');
@@ -154,7 +154,7 @@ function Slider({
         </button>
         <div className="h-1 bg-[#3D425C] w-full">
           <div
-            className="bg-[#ffffff] h-1 duration-1000"
+            className="bg-[#ffffff] h-1 duration-400"
             style={{ width: `${((slide + 1) / 3) * 100}%` }}
           />
         </div>