OwlCyberSecurity - MANAGER

Edit File: HomeCategory.tsx

"use client";

import React, { useEffect, useState } from "react";
import HomeCategoryItems from "./components/HomeCategoryItems";
import { Carousel } from "react-responsive-carousel";
import { CategorysData } from "@/components/CategorysData";
import Link from "next/link";
import Image from "next/image";
import useDetectMobile from "./components/hooks/DetectMobile";

function HomeCategory() {
  const [category, setCategory] = useState(0);
  const isMobile = useDetectMobile();

return (
    <>
      <HomeCategoryItems category={category} setCategory={setCategory} />
      <Carousel
        className="ltr"
        showArrows={false}
        showStatus={false}
        emulateTouch={true}
        showThumbs={false}
        autoPlay={false}
        showIndicators={false}
        selectedItem={category}
        swipeScrollTolerance={isMobile ? 20 : 5}
        preventMovementUntilSwipeScrollTolerance={isMobile ? true : false}
        onChange={(index, item) => setCategory(index)}
      >
        {CategorysData.map((item) => (
          <div key={item.id} className="home-category-products">
            <a
              target="_blank"
              className="home-category-products-image1"
              href={item.href1}
            >
              <Image
                width={760}
                height={270}
                src={item.img1}
                quality={100}
                alt=""
                loading="eager"
              />
            </a>
            <a
              target="_blank"
              className="home-category-products-image2"
              href={item.href2}
            >
              <Image
                width={760}
                height={270}
                src={item.img2}
                quality={100}
                alt=""
                loading="eager"
              />
            </a>
            <a
              target="_blank"
              className="home-category-products-image3"
              href={item.href3}
            >
              <Image
                width={370}
                height={270}
                src={item.img3}
                quality={100}
                alt=""
                loading="eager"
              />
            </a>
            <a
              target="_blank"
              className="home-category-products-image4"
              href={item.href4}
            >
              <Image
                width={370}
                height={270}
                src={item.img4}
                quality={100}
                alt=""
                loading="eager"
              />
            </a>
            <a
              target="_blank"
              className="home-category-products-image5"
              href={item.href5}
            >
              <Image
                width={760}
                height={270}
                src={item.img5}
                quality={100}
                alt=""
                loading="eager"
              />
            </a>
          </div>
        ))}
      </Carousel>
    </>
  );
}

export default HomeCategory;