OwlCyberSecurity - MANAGER

Edit File: EmiratesCategoryItems.tsx

"use client";

import { CategoryType } from "@/typing";
import Image from "next/image";
import React, { useRef, useState, useEffect } from "react";

function EmiratesCategoryItems({ categoryItems }: any) {
  const allContent = useRef<any>();

const [emiratesCategory, setEmiratesCategory] = useState([]);
  const [loading, setLoading] = useState(false);

const scroll = (scrollOffset: any) => {
    allContent.current.scrollLeft += scrollOffset;
  };

// function getCategoryData() {
  //   const token = localStorage.getItem("token");
  //   var myHeaders = new Headers();
  //   myHeaders.append("Accept", "application/json");
  //   myHeaders.append("Authorization", `Bearer ${token}`);

//   var requestOptions = {
  //     method: "GET",
  //     headers: myHeaders,
  //   };

//   fetch(`${process.env.NEXT_PUBLIC_API_ADDRESS}cart-index`, requestOptions)
  //     .then((response) => response.json())
  //     .then((result) => {
  //       // console.log(result);
  //       if (result.status === 200) {
  //         const items = result.data.shopingSite.filter(
  //           (items: any) => items.region_id === 3
  //         );
  //         setEmiratesCategory(items);
  //       }
  //     })
  //     .catch((error) => console.log("error", error))
  //     .finally(() => setLoading(false));
  // }

// useEffect(() => {
  //   getCategoryData();
  //   setLoading(true);
  // }, []);

return (
    <div className="home-category-items-container">
      <div
        onClick={() => {
          scroll(100);
        }}
        className="absolute right-0 top-0 border border-[var(--light-border)] rounded-md p-2 md:p-3 cursor-pointer active:border-[var(--base-blue)] bg-white"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          fill="none"
          viewBox="0 0 24 24"
          strokeWidth="1.5"
          stroke="currentColor"
          className="w-4 h-4 md:w-6 md:h-6 text-[var(--text-gray)] active:text-[var(--base-blue)]"
        >
          <path
            strokeLinecap="round"
            strokeLinejoin="round"
            d="M8.25 4.5l7.5 7.5-7.5 7.5"
          />
        </svg>
      </div>
      <div ref={allContent} className="home-category-items-content">
        {loading ? (
          <div className="flex items-center justify-center w-full">
            <div className="category-loading"></div>
          </div>
        ) : categoryItems ? (
          categoryItems.map((item: CategoryType, i: number) => (
            <a
              key={item.id ? item.id : i}
              href={item.url ? item.url : ""}
              target="_blank"
              className="home-category-items-content-single-container"
            >
              <div className={`home-category-items-content-single`}>
                <Image
                  src={
                    item.path
                      ? item.path
                      : "/assets/images/icons/charsooq-logo.png"
                  }
                  alt={item.site ? item.site : ""}
                  width={100}
                  height={100}
                  loading={i < 4 ? "eager" : "lazy"}
                />
              </div>
              <p className="">{item.site ? item.site : null}</p>
            </a>
          ))
        ) : null}
      </div>

<div
        onClick={() => scroll(-100)}
        className="absolute left-0 top-0 border border-[var(--light-border)] rounded-md p-2 md:p-3 cursor-pointer active:border-[var(--base-blue)] bg-white"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          fill="none"
          viewBox="0 0 24 24"
          strokeWidth="1.5"
          stroke="currentColor"
          className="w-4 h-4 md:w-6 md:h-6 text-[var(--text-gray)] active:text-[var(--base-blue)]"
        >
          <path
            strokeLinecap="round"
            strokeLinejoin="round"
            d="M15.75 19.5L8.25 12l7.5-7.5"
          />
        </svg>
      </div>
    </div>
  );
}

export default EmiratesCategoryItems;