1 files changed, 91 insertions, 0 deletions
diff --git a/components/home/recommendation.js b/components/home/recommendation.js
new file mode 100644
index 0000000..842932c
--- /dev/null
+++ b/components/home/recommendation.js
@@ -0,0 +1,91 @@
+import Image from "next/image";
+// import data from "../../assets/dummyData.json";
+import { BookOpenIcon, PlayIcon } from "@heroicons/react/24/solid";
+import { useDraggable } from "react-use-draggable-scroll";
+import { useRef } from "react";
+import Link from "next/link";
+
+export default function UserRecommendation({ data }) {
+  const ref = useRef(null);
+  const { events } = useDraggable(ref);
+
+  const uniqueRecommendationIds = new Set();
+
+  // Filter out duplicates from the recommendations array
+  const filteredData = data.filter((recommendation) => {
+    // Check if the ID is already in the set
+    if (uniqueRecommendationIds.has(recommendation.id)) {
+      // If it's a duplicate, return false to exclude it from the filtered array
+      return false;
+    }
+
+    // If it's not a duplicate, add the ID to the set and return true
+    uniqueRecommendationIds.add(recommendation.id);
+    return true;
+  });
+
+  return (
+    <div className="flex flex-col bg-tersier relative rounded overflow-hidden">
+      <div className="flex lg:gap-5 z-50">
+        <div className="flex flex-col items-start justify-center gap-3 lg:gap-7 lg:w-[50%] pl-5 lg:px-10">
+          <h2 className="font-bold text-3xl text-white">
+            {data[0].title.userPreferred}
+          </h2>
+          <p
+            dangerouslySetInnerHTML={{
+              __html: data[0].description?.replace(/<[^>]*>/g, ""),
+            }}
+            className="font-roboto font-light line-clamp-3 lg:line-clamp-3"
+          />
+          <button
+            type="button"
+            className="border border-white/70 py-1 px-2 lg:py-2 lg:px-4 rounded-full flex items-center gap-2 text-white font-bold"
+          >
+            {data[0].type === "ANIME" ? (
+              <PlayIcon className="w-5 h-5 text-white" />
+            ) : (
+              <BookOpenIcon className="w-5 h-5 text-white" />
+            )}
+            {data[0].type === "ANIME" ? "Watch" : "Read"} Now
+          </button>
+        </div>
+        <div
+          id="recommendation-list"
+          className="flex gap-5 overflow-x-scroll scrollbar-none px-5 py-7 lg:py-10"
+          ref={ref}
+          {...events}
+        >
+          {filteredData.slice(0, 9).map((i) => (
+            <Link
+              key={i.id}
+              href={`/en/${i.type.toLowerCase()}/${i.id}`}
+              className="relative snap-start shrink-0 group hover:bg-white/20 p-1 rounded"
+            >
+              <Image
+                src={i.coverImage.extraLarge}
+                alt={i.title.userPreferred}
+                width={190}
+                height={256}
+                className="h-[190px] w-[135px] lg:h-[265px] lg:w-[185px] rounded-md object-cover overflow-hidden transition-all duration-150 ease-in-out"
+              />
+              <span className="absolute rounded pointer-events-none w-[240px] h-[50%] transition-all duration-150 ease-in transform translate-x-[75%] group-hover:translate-x-[80%] top-0 left-0 bg-secondary opacity-0 group-hover:opacity-100 flex flex-col z-50">
+                <div className="">{i.title.userPreferred}</div>
+                <div>a</div>
+              </span>
+            </Link>
+          ))}
+        </div>
+      </div>
+      <div className="absolute top-0 left-0 z-40 bg-gradient-to-r from-transparent from-30% to-80% to-tersier w-[80%] lg:w-[60%] h-full" />
+      {data[0]?.bannerImage && (
+        <Image
+          src={data[0]?.bannerImage}
+          alt={data[0].title.userPreferred}
+          width={500}
+          height={500}
+          className="absolute top-0 left-0 z-30 w-[60%] h-full object-cover opacity-30"
+        />
+      )}
+    </div>
+  );
+}