zojgame/graff.estate-nextjs
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fix

Browse Source
This commit is contained in:
zojgame
2024-03-29 14:43:10 +05:00
parent 6eda6d3551
commit c7b4ba8ca1
1 changed files with 34 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Reviews.tsx
+34 -12
View File
@@ -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>
);