reveiews
This commit is contained in:
@@ -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 ${
|
||||
|
||||
@@ -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>
|
||||
|
||||
+41
-49
@@ -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>
|
||||
))}
|
||||
|
||||
@@ -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;
|
||||
Reference in New Issue
Block a user