freshhhh

src/components/cart/Cart.jsx

@@ -1,132 +0,0 @@
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import {
-  faClosedCaptioning,
-  faMicrophone,
-} from "@fortawesome/free-solid-svg-icons";
-import { FaChevronRight } from "react-icons/fa";
-import { useLanguage } from "@/src/context/LanguageContext";
-import "./Cart.css";
-import { Link, useNavigate } from "react-router-dom";
-import { useState } from "react";
-import useToolTipPosition from "@/src/hooks/useToolTipPosition";
-import Qtip from "../qtip/Qtip";
-
-function Cart({ label, data, path }) {
-  const { language } = useLanguage();
-  const navigate = useNavigate();
-  const [hoveredItem, setHoveredItem] = useState(null);
-  const [hoverTimeout, setHoverTimeout] = useState(null);
-  const { tooltipPosition, tooltipHorizontalPosition, cardRefs } =
-    useToolTipPosition(hoveredItem, data);
-
-  const handleImageEnter = (item, index) => {
-    if (hoverTimeout) clearTimeout(hoverTimeout);
-    setHoveredItem(item.id + index);
-  };
-
-  const handleImageLeave = () => {
-    setHoverTimeout(
-      setTimeout(() => {
-        setHoveredItem(null);
-      }, 300) 
-    );
-  };
-
-  return (
-    <div className="flex flex-col w-1/4 space-y-7 max-[1200px]:w-full">
-      <h1 className="font-bold text-2xl text-[#ffbade] max-md:text-xl">
-        {label}
-      </h1>
-      <div className="w-full space-y-4 flex flex-col">
-        {data &&
-          data.slice(0, 5).map((item, index) => (
-            <div
-              key={index}
-              style={{ borderBottom: "1px solid rgba(255, 255, 255, .075)" }}
-              className="flex pb-4 items-center relative"
-              ref={(el) => (cardRefs.current[index] = el)}
-            >
-              <img
-                src={`https://wsrv.nl/?url=${item.poster}`}
-                alt={item.title}
-                className="flex-shrink-0 w-[60px] h-[75px] rounded-md object-cover cursor-pointer"
-                onClick={() => navigate(`/watch/${item.id}`)}
-                onMouseEnter={() => handleImageEnter(item, index)}
-                onMouseLeave={handleImageLeave}
-              />
-
-              {hoveredItem === item.id + index && window.innerWidth > 1024 && (
-                <div
-                  className={`absolute ${tooltipPosition} ${tooltipHorizontalPosition} 
-                    ${
-                      tooltipHorizontalPosition === "left-1/2"
-                        ? "translate-x-[-100px]"
-                        : "translate-x-[-200px]"
-                    } 
-                    z-[100000] transform transition-all duration-300 ease-in-out 
-                    ${
-                      hoveredItem === item.id + index
-                        ? "opacity-100 translate-y-0"
-                        : "opacity-0 translate-y-2"
-                    }`}
-                  onMouseEnter={() => {
-                    if (hoverTimeout) clearTimeout(hoverTimeout); 
-                  }}
-                  onMouseLeave={handleImageLeave}
-                >
-                  <Qtip id={item.id} />
-                </div>
-              )}
-
-              <div className="flex flex-col ml-4 space-y-2 w-full">
-                <Link
-                  to={`/${item.id}`}
-                  className="w-full line-clamp-2 text-[1em] font-[500] hover:cursor-pointer hover:text-[#ffbade] transform transition-all ease-out max-[1200px]:text-[14px]"
-                >
-                  {language === "EN" ? item.title : item.japanese_title}
-                </Link>
-                <div className="flex items-center flex-wrap w-fit space-x-1">
-                  {item.tvInfo?.sub && (
-                    <div className="flex space-x-1 justify-center items-center bg-[#B0E3AF] rounded-[4px] px-[4px] text-black py-[2px]">
-                      <FontAwesomeIcon
-                        icon={faClosedCaptioning}
-                        className="text-[12px]"
-                      />
-                      <p className="text-[12px] font-bold">{item.tvInfo.sub}</p>
-                    </div>
-                  )}
-
-                  {item.tvInfo?.dub && (
-                    <div className="flex space-x-1 justify-center items-center bg-[#B9E7FF] rounded-[4px] px-[8px] text-black py-[2px]">
-                      <FontAwesomeIcon
-                        icon={faMicrophone}
-                        className="text-[12px]"
-                      />
-                      <p className="text-[12px] font-bold">{item.tvInfo.dub}</p>
-                    </div>
-                  )}
-                  <div className="flex items-center w-fit pl-1 gap-x-1">
-                    <div className="dot"></div>
-                    <p className="text-[14px] text-[#D2D2D3]">
-                      {item.tvInfo.showType}
-                    </p>
-                  </div>
-                </div>
-              </div>
-            </div>
-          ))}
-        <Link
-          to={`/${path}`}
-          className="flex w-fit items-baseline rounded-3xl gap-x-2 group"
-        >
-          <p className="text-white text-[17px] h-fit leading-4 group-hover:text-[#ffbade] transform transition-all ease-out">
-            View more
-          </p>
-          <FaChevronRight className="text-white text-[10px] group-hover:text-[#ffbade] transform transition-all ease-out" />
-        </Link>
-      </div>
-    </div>
-  );
-}
-
-export default Cart;