%PDF- %PDF-
Mini Shell

Mini Shell

Direktori : /var/www/html/src/Components/
Upload File :
Create Path :
Current File : /var/www/html/src/Components/Rent.js

import Image from "next/image";
import Link from "next/link";
import parse from "html-react-parser";

import { ArrowsRightBlack } from "./Icons";
// import { useEffect, useRef } from "react";
// import { useInView } from "./useInView";
// import { useGlobalContext } from "./store/context/GlobalContext";

function Rent({ data }) {
  // const targetColorRef1 = useRef(null);
  // const useTarget = useInView(targetColorRef1, {
  //   rootMargin: "200px 0px 0px 0px",
  //   threshold: 0.2,
  // });
  // const { setIsColor } = useGlobalContext();

  // useEffect(() => {
  //   if (useTarget) {
  //     setIsColor("fullWhite");
  //   } else {
  //     setIsColor("original");
  //   }
  // }, [useTarget]);

  return (
    <div className="mainRent">
      <div className="animationWrap">
        <div className="animate">
          <div className="items">
            <span>{data.small_title_rent}</span>
            <span>{data.small_title_rent}</span>
          </div>
          <div className="items">
            <span>{data.small_title_rent}</span>
            <span>{data.small_title_rent}</span>
          </div>
        </div>
      </div>
      <div className="rentRow">
        <div className="title">
          <div className="rentDiv">
            <h4>{data.small_title_rent}</h4>
          </div>
          <h1>{parse(data.title_rent)}</h1>
        </div>
        <div className="text">
          <p>{parse(data.description_rent)}</p>
        </div>
      </div>
      <div className="grid-rent">
        {data.rents.map((rent, id) => (
          <div key={id}>
            <div className="imgRow">
              <div className="firstImg">
                <Image
                  src={`${rent.image}`}
                  alt=""
                  width={652}
                  height={542}
                  objectFit="contain"
                  quality={100}
                />
              </div>
            </div>
            <div className="specsRow">
              <div className="first">
                <Image src={rent.brandImage} alt="" width={166} height={23} />
                <h1>{rent.title}</h1>
                <ul>
                  {rent.bullets.map((bullet, id) => (
                    <li key={id}>{bullet.text}</li>
                  ))}
                </ul>
                <div className="buttons">
                  <Link href={`/rent/${rent.slug}`}>
                    <div className="book">
                      <div className="arrows">
                        <ArrowsRightBlack />
                      </div>
                      <span>View More</span>
                    </div>
                  </Link>
                </div>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

export default Rent;

Zerion Mini Shell 1.0