OwlCyberSecurity - MANAGER

Edit File: HomeCommentSlider.tsx

"use client";
import { CommentData } from "@/components/CommentData";
import Link from "next/link";
import React from "react";
import { Carousel } from "react-responsive-carousel";
import "react-responsive-carousel/lib/styles/carousel.min.css";
import StarRating from "@/components/StarRating";
import useDetectMobile from "./components/hooks/DetectMobile";

function HomeCommentSlider() {
  const isMobile = useDetectMobile();
  return (
    <div className="border border-[var(--very-light-border)] rounded-xl bg-white relative cursor-pointer">
      <img
        className="absolute -top-5 left-5"
        src="/assets/images/home/comment-vector-up.svg"
        alt="نظرات چارسوق"
        width={52}
        height={36}
      />
      <img
        className="absolute -bottom-5 right-5"
        src="/assets/images/home/comment-vector-down.svg"
        alt="نظرات چارسوق"
        width={52}
        height={36}
      />
      <Carousel
        className="ltr"
        showArrows={false}
        infiniteLoop={false}
        showStatus={false}
        emulateTouch={true}
        showThumbs={false}
        selectedItem={3}
        swipeScrollTolerance={isMobile ? 20 : 5}
        preventMovementUntilSwipeScrollTolerance={isMobile ? true : false}
      >
        {CommentData.slice(0, 4).map((comment) => (
          <div
            className="flex flex-col gap-4 px-8 pt-5 pb-0 items-center justify-center"
            key={comment.id}
          >
            <div className="flex items-center justify-center gap-3">
              <span>{comment.rate}</span>
              <div className="w-24 flex">
                <StarRating commentStars={Math.floor(comment.rate)} />
              </div>
            </div>
            <div className="flex flex-col gap-4">
              <p className="text-[20px] font-IRANSansBold text-black">
                {comment.title}
              </p>
              <p className="text-[var(--text-gray)]">{comment.desc}</p>
              <span className="text-[14px] text-[var(--text-light-gray)]">
                {comment.name} | {comment.date}
              </span>
            </div>
          </div>
        ))}
      </Carousel>
    </div>
  );
}

export default HomeCommentSlider;