From c7b4ba8ca1484a1279739332b4e617858d529dee Mon Sep 17 00:00:00 2001
From: zojgame <zogame002@gmail.com>
Date: Fri, 29 Mar 2024 14:43:10 +0500
Subject: [PATCH] fix

---
 src/components/Reviews.tsx | 46 ++++++++++++++++++++++++++++----------
 1 file changed, 34 insertions(+), 12 deletions(-)

diff --git a/src/components/Reviews.tsx b/src/components/Reviews.tsx
index ff340fe..68b4c22 100644
--- a/src/components/Reviews.tsx
+++ b/src/components/Reviews.tsx
@@ -260,11 +260,12 @@ function Reviews() {
   });
 
   useEffect(() => {
-    if (videoRefs[0].current) {
-      const width = videoRefs[0].current.clientWidth;
-      setVideoWidth(width);
-    }
-  }, [videoRefs]);
+    // console.log("first", videoRefs[0].current?.src);
+    if (!videoRefs[0].current?.src) return;
+    console.log("videoRefs[0].current?.src", videoRefs[0].current?.src);
+    const width = videoRefs[0].current.clientWidth;
+    setVideoWidth(width);
+  }, [videoRefs[0]]);
 
   function prev() {
     if (selectedVideoIndex === 0) return;
@@ -285,11 +286,11 @@ function Reviews() {
   return (
     <div
       ref={ref}
-      className="container mx-auto 2xl:max-w-screen-2xl mb-[120px]"
+      className="container mx-auto 2xl:max-w-screen-2xl mb-[120px] overflow-x-clip"
     >
-      <div className="flex 2xl:h-[594px] xl:h-[484px] sm:h-[784px] h-[552px] sm:border-b border-b-[#3D425C] xl:flex-row sm:flex-col-reverse flex-col ">
+      <div className="flex 2xl:h-[594px] xl:h-[484px] xl:border-b border-b-[#3D425C] xl:flex-row sm:flex-col-reverse flex-col">
         <div className="left 2xl:min-w-[496px] xl:min-w-[395px] sm:min-w-[354px] flex flex-col sm:pb-10 pb-6">
-          <h2 className="font-medium  2xl:text-[64px] xl:text-5xl text-[40px] sm:mb-10 mb-6 font-gilroy leading-10">
+          <h2 className="font-medium  2xl:text-[64px] xl:text-5xl text-[40px] sm:mb-10 mb-6 font-gilroy leading-10 xl:block hidden">
             <p className="from-[#798FFF] to-[#D375FF] bg-gradient-to-r bg-clip-text text-transparent">
               Отзывы
             </p>
@@ -321,7 +322,7 @@ function Reviews() {
               </Transition>
             ))}
           </div>
-          <div className="gap-2 hidden sm:flex mt-auto">
+          <div className="gap-2 mt-auto xl:flex hidden">
             <button
               className="p-4 border border-[#3D425C] rounded-full"
               onClick={prev}
@@ -338,7 +339,7 @@ function Reviews() {
         </div>
         <div
           {...handlers}
-          className="right relative sm:border-l border-l-[#3D425C] flex gap-4 sm:pb-10 sm:pl-10 select-none"
+          className="right relative xl:border-l border-l-[#3D425C] flex gap-4 xl:pb-10 xl:pl-10 select-none xl:w-auto w-fit"
           style={{
             clipPath: `rect(auto auto auto 0)`,
           }}
@@ -346,8 +347,7 @@ function Reviews() {
           {REVIEWS.map((video, index) => (
             <div
               key={video.id}
-              className="relative sm:aspect-[16/9] aspect-auto bg-black transition-transform duration-300 sm:h-full sm:min-w-0 h-[546px]"
-              // className="relative sm:aspect-[16/9] aspect-auto bg-black transition-transform duration-300 sm:h-full sm:min-w-0 h-[546px]"
+              className="relative sm:aspect-[16/9] aspect-auto bg-black transition-transform duration-300 sm:h-full sm:min-w-0 xl:w-auto w-screen"
               style={{
                 transform: `translateX(-${
                   videoWidth * selectedVideoIndex + 16 * selectedVideoIndex
@@ -402,6 +402,28 @@ function Reviews() {
             />
           ))}
         </div>
+        <div className="flex justify-between xl:hidden pb-8">
+          <h2 className="font-medium  2xl:text-[64px] xl:text-5xl text-[40px] font-gilroy leading-10 flex sm:flex-row gap-2">
+            <p className="from-[#798FFF] to-[#D375FF] bg-gradient-to-r bg-clip-text text-transparent">
+              Отзывы
+            </p>
+            <p>клиентов</p>
+          </h2>
+          <div className="flex gap-2 items-center">
+            <button
+              className="p-4 border border-[#3D425C] rounded-full"
+              onClick={prev}
+            >
+              <ArrowLeftIcon />
+            </button>
+            <button
+              className="p-4 border border-[#3D425C] rounded-full"
+              onClick={next}
+            >
+              <ArrowRightIcon />
+            </button>
+          </div>
+        </div>
       </div>
     </div>
   );