From 14888113ce2a83d70f059f258ad04b72b4b6e045 Mon Sep 17 00:00:00 2001
From: zojgame <zogame002@gmail.com>
Date: Fri, 29 Mar 2024 18:42:18 +0500
Subject: [PATCH] reveiews

---
 src/components/Histories.tsx         | 20 +++++--
 src/components/MoreProjectButton.tsx |  2 +-
 src/components/Reviews.tsx           | 90 +++++++++++++---------------
 src/components/icons/PlayerIcon.tsx  | 18 ++++++
 4 files changed, 74 insertions(+), 56 deletions(-)
 create mode 100644 src/components/icons/PlayerIcon.tsx

diff --git a/src/components/Histories.tsx b/src/components/Histories.tsx
index a20a1c0..20bec09 100644
--- a/src/components/Histories.tsx
+++ b/src/components/Histories.tsx
@@ -45,6 +45,14 @@ function Histories() {
     trackMouse: true,
   });
 
+  useEffect(() => {
+    if (!videoRefs[0].current?.src) return;
+    const width = videoRefs[0].current.clientWidth;
+    const height = videoRefs[0].current.clientHeight;
+    setVideoWidth(width);
+    setVideoHeigth(height);
+  }, [videoRefs[0]]);
+
   function handleEnded() {
     if (selectedVideoIndex === VIDEOS.length - 1) {
       setSelectedVideoIndex(0);
@@ -180,12 +188,12 @@ function Histories() {
                 playsInline
                 className="aspect-[9/16] object-cover w-full h-full min-w-screen"
                 onEnded={handleEnded}
-                onLoadedData={() =>
-                  setTimeout(() => {
-                    setVideoWidth(videoRefs[0].current!.clientWidth);
-                    setVideoHeigth(videoRefs[0].current!.clientHeight);
-                  }, 200)
-                }
+                // onLoadedData={() =>
+                //   setTimeout(() => {
+                //     setVideoWidth(videoRefs[0].current!.clientWidth);
+                //     setVideoHeigth(videoRefs[0].current!.clientHeight);
+                //   }, 200)
+                // }
               />
               <div
                 className={`absolute progress-bar h-[3px] bg-[#52587A] transition-opacity duration-500 sm:block hidden  ${
diff --git a/src/components/MoreProjectButton.tsx b/src/components/MoreProjectButton.tsx
index d894e94..78650a5 100644
--- a/src/components/MoreProjectButton.tsx
+++ b/src/components/MoreProjectButton.tsx
@@ -12,7 +12,7 @@ function MoreProjectButton({ onClick }: MoreProjectButtonProps) {
       whileInView={{ opacity: 1 }}
       viewport={{ once: true, margin: "-100px" }}
       transition={{ duration: 1, ease: [0.58, 0.12, 0.27, 0.98], delay: 0.2 }}
-      className="border border-[#3D425C] rounded-[48px] px-6 py-4 flex sm:flex-col sm:justify-center justify-between items-center gap-2"
+      className="border border-[#3D425C] px-6 py-4 flex sm:flex-col sm:justify-center justify-between items-center gap-2"
       onClick={onClick}
     >
       <p className="font-gilroy font-medium leading-none">Показать еще</p>
diff --git a/src/components/Reviews.tsx b/src/components/Reviews.tsx
index 449bf82..e855453 100644
--- a/src/components/Reviews.tsx
+++ b/src/components/Reviews.tsx
@@ -13,6 +13,7 @@ import { Video } from "../types/Video";
 import ArrowLeftIcon from "./icons/ArrowLeftIcon";
 import ArrowRightIcon from "./icons/ArrowRightIcon";
 import { Transition } from "react-transition-group";
+import PlayerIcon from "./icons/PlayerIcon";
 
 type Review = {
   id: string;
@@ -67,9 +68,7 @@ function Reviews() {
   });
 
   useEffect(() => {
-    // console.log("first", videoRefs[0].current?.src);
     if (!imageRefs[0].current?.src) return;
-    console.log("videoRefs[0].current?.src", imageRefs[0].current?.src);
     const width = imageRefs[0].current.clientWidth;
     setImageWidth(width);
   }, [imageRefs[0]]);
@@ -93,9 +92,9 @@ function Reviews() {
   return (
     <div
       ref={ref}
-      className="container mx-auto 2xl:max-w-screen-2xl sm:mb-[120px] mb-20 overflow-x-clip"
+      className="container mx-auto 2xl:max-w-screen-2xl sm:mb-[120px] mb-20"
     >
-      <div className="flex 2xl:h-[594px] xl:h-[484px] xl:border-b border-b-[#3D425C] xl:flex-row flex-col-reverse">
+      <div className="flex 2xl:h-[594px] xl:h-[484px] xl:border-b border-b-[#3D425C]">
         <div className="mx-auto flex gap-2 min-h-2 sm:hidden mt-4">
           {REVIEWS.map((video, index) => (
             <div
@@ -109,51 +108,44 @@ function Reviews() {
             />
           ))}
         </div>
-        <div className="left 2xl:min-w-[496px] xl:min-w-[395px] min-w-[354px] flex flex-col sm:pb-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>
-            <p>клиентов</p>
-          </h2>
-
-          <div className="relative block sm:auto sm:bg-transparent h-[108px] bg-[#212431] p-4 sm:p-8 xl:p-0">
-            {REVIEWS.map((item, index) => (
-              <Transition
-                key={index}
-                in={Boolean(index === selectedImageIndex)}
-                timeout={300}
-              >
-                {(state) => (
-                  <div className="absolute flex xl:flex-col">
-                    <div
-                      className={`transition-opacity  xl:w-[368px] sm:min-w-[354px]  min-w-[328px] duration-300 pr-10 ${state} flex items-start gap-6`}
-                    >
-                      <img
-                        src={item.avatar}
-                        alt={item.name}
-                        className="rounded-full w-[72px]"
-                      />
-                      <div>
-                        <p className="font-semibold sm:mb-4 text-xl">
-                          {item.name}
-                        </p>
-                        <p className="sm:mb-4 2xl:text-sm text-xs">
-                          {item.position}
-                        </p>
-                      </div>
-                    </div>
-                    <p
-                      className={`font-normal 2xl:text-[16px] text-sm sm:block hidden w-1/2 xl:w-auto ${state}`}
-                    >
-                      {item.desc}
+        <div className="left 2xl:min-w-[496px] xl:min-w-[395px] flex flex-col justify-between gap-7 sm:pb-10 2xl:pr-10 xl:pr-8">
+          <div className="">
+            <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>
+              <p>клиентов</p>
+            </h2>
+            <div className="relative block sm:auto sm:bg-transparent h-[108px] bg-[#212431] p-4 sm:p-8 xl:p-0">
+              <div className="absolute flex xl:flex-col">
+                <div
+                  className={`transition-opacity xl:w-[368px] sm:min-w-[354px]  min-w-[328px] duration-300 pr-10 flex items-start gap-6`}
+                >
+                  <img
+                    src={REVIEWS[selectedImageIndex].avatar}
+                    alt={REVIEWS[selectedImageIndex].name}
+                    className="rounded-full w-[72px]"
+                  />
+                  <div>
+                    <p className="font-semibold sm:mb-4 text-xl">
+                      {" "}
+                      {REVIEWS[selectedImageIndex].name}
+                    </p>
+                    <p className="sm:mb-4 2xl:text-sm text-xs">
+                      {REVIEWS[selectedImageIndex].position}
                     </p>
                   </div>
-                )}
-              </Transition>
-            ))}
+                </div>
+                <p
+                  className={`font-normal 2xl:text-[16px] text-sm sm:block hidden w-1/2 xl:w-[363px]`}
+                >
+                  {REVIEWS[selectedImageIndex].desc}
+                </p>
+              </div>
+            </div>
           </div>
-          <div className="gap-2 mt-auto xl:flex hidden">
+
+          <div className="gap-2 xl:flex hidden">
             <button
               className="p-4 border border-[#3D425C] rounded-full"
               onClick={prev}
@@ -170,7 +162,7 @@ function Reviews() {
         </div>
         <div
           {...handlers}
-          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"
+          className="right relative xl:border-l border-l-[#3D425C] flex gap-4 xl:pb-10 xl:pl-10 select-none"
           style={{
             clipPath: `rect(auto auto auto 0)`,
           }}
@@ -178,7 +170,7 @@ function Reviews() {
           {REVIEWS.map((video, index) => (
             <div
               key={video.id}
-              className="relative aspect-[16/9] bg-black transition-transform duration-300 h-full min-w-0 xl:w-auto w-screen"
+              className={`relative aspect-video bg-black transition-transform duration-300 h-full w-auto flex items-center justify-center`}
               style={{
                 transform: `translateX(-${
                   imageWidth * selectedImageIndex + 16 * selectedImageIndex
@@ -189,7 +181,7 @@ function Reviews() {
                 src={isEntered ? video.poster : undefined}
                 alt={video.desc}
                 ref={imageRefs[index]}
-                className="aspect-[16/9] object-cover w-full h-full min-w-screen"
+                className="aspect-video object-cover w-full h-full select-none"
               />
             </div>
           ))}
diff --git a/src/components/icons/PlayerIcon.tsx b/src/components/icons/PlayerIcon.tsx
new file mode 100644
index 0000000..e58614b
--- /dev/null
+++ b/src/components/icons/PlayerIcon.tsx
@@ -0,0 +1,18 @@
+const PlayerIcon = () => {
+  return (
+    <svg
+      width="32"
+      height="36"
+      viewBox="0 0 32 36"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M30 14.5359C32.6667 16.0755 32.6667 19.9245 30 21.4641L6 35.3205C3.33333 36.8601 2.02534e-06 34.9356 2.15994e-06 31.8564L3.37131e-06 4.14359C3.5059e-06 1.06439 3.33334 -0.860109 6 0.679492L30 14.5359Z"
+        fill="white"
+      />
+    </svg>
+  );
+};
+
+export default PlayerIcon;