OwlCyberSecurity - MANAGER

Edit File: TurkeyCategoryItems.tsx

"use client";

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

interface pageProps {
  categoryItems: any;
}

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

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

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

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 TurkeyCategoryItems;