Landing page

2026-04-17 22:01:45 +00:00 · 2025-07-24 19:41:17 +05:30
parent 1c0e1cfe14
commit d502d2dbc5
161 changed files with 14116 additions and 12747 deletions
--- a/src/components/cart/Cart.jsx
+++ b/src/components/cart/Cart.jsx
@@ -0,0 +1,132 @@
+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;