migrate to typescript

1 files changed, 106 insertions, 19 deletions

diff --git a/components/home/recommendation.js b/components/home/recommendation.js
index 842932c..b643456 100644
--- a/components/home/recommendation.js
+++ b/components/home/recommendation.js
@@ -1,13 +1,22 @@
 import Image from "next/image";
 // import data from "../../assets/dummyData.json";
-import { BookOpenIcon, PlayIcon } from "@heroicons/react/24/solid";
+import {
+  BookOpenIcon as BookOpenSolid,
+  PlayIcon,
+} from "@heroicons/react/24/solid";
 import { useDraggable } from "react-use-draggable-scroll";
 import { useRef } from "react";
 import Link from "next/link";
+import {
+  BookOpenIcon as BookOpenOutline,
+  PlayCircleIcon,
+} from "@heroicons/react/24/outline";
 
 export default function UserRecommendation({ data }) {
-  const ref = useRef(null);
-  const { events } = useDraggable(ref);
+  const mobileRef = useRef(null);
+  const desktopRef = useRef(null);
+  const { events: mobileEvent } = useDraggable(mobileRef);
+  const { events: desktopEvent } = useDraggable(desktopRef);
 
   const uniqueRecommendationIds = new Set();
 
@@ -25,10 +34,13 @@ export default function UserRecommendation({ data }) {
   });
 
   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 lg:bg-tersier relative rounded overflow-hidden">
+      <div className="hidden lg: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">
+          <h2
+            className="font-inter font-bold text-3xl text-white line-clamp-2"
+            title={data[0].title.userPreferred}
+          >
             {data[0].title.userPreferred}
           </h2>
           <p
@@ -37,53 +49,128 @@ export default function UserRecommendation({ data }) {
             }}
             className="font-roboto font-light line-clamp-3 lg:line-clamp-3"
           />
-          <button
-            type="button"
+          <Link
+            href={`/en/${data[0].type.toLowerCase()}/${data[0].id}`}
             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" />
+              <BookOpenSolid className="w-5 h-5 text-white" />
             )}
             {data[0].type === "ANIME" ? "Watch" : "Read"} Now
-          </button>
+          </Link>
         </div>
         <div
           id="recommendation-list"
           className="flex gap-5 overflow-x-scroll scrollbar-none px-5 py-7 lg:py-10"
-          ref={ref}
-          {...events}
+          ref={desktopRef}
+          {...desktopEvent}
         >
           {filteredData.slice(0, 9).map((i) => (
             <Link
-              key={i.id}
+              key={`desktop-${i.id}`}
               href={`/en/${i.type.toLowerCase()}/${i.id}`}
-              className="relative snap-start shrink-0 group hover:bg-white/20 p-1 rounded"
+              className="relative flex-center snap-start shrink-0 group rounded"
             >
+              <span className="h-[190px] w-[135px] lg:h-[265px] lg:w-[185px] rounded absolute bg-gradient-to-b from-black/50 from-5% to-30% to-transparent z-40" />
+              <span className="h-[190px] w-[135px] lg:h-[265px] lg:w-[185px] rounded absolute group-hover:bg-gradient-to-t from-black/90 to-transparent z-40 opacity-0 group-hover:opacity-100 transition-all duration-200 ease" />
+              <span
+                title={i.title.userPreferred}
+                className="absolute bottom-5 text-center line-clamp-2 font-karla font-semibold opacity-0 group-hover:opacity-100 w-[70%] z-50 transition-all duration-200 ease"
+              >
+                {i.title.userPreferred}
+              </span>
+              <div className="absolute top-0 right-0 z-40 font-karla font-bold">
+                {i.type === "ANIME" ? (
+                  <span className="flex items-center px-2 py-1 gap-1 text-sm text-white">
+                    <PlayCircleIcon className="w-5 h-5" />
+                  </span>
+                ) : (
+                  <span className="flex items-center px-2 py-1 gap-1 text-sm text-white">
+                    <BookOpenOutline className="w-5 h-5" />
+                  </span>
+                )}
+              </div>
               <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"
+                className="h-[190px] w-[135px] lg:h-[265px] lg:w-[185px] brightness-[90%] 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">
+              {/* <span className="absolute rounded pointer-events-none w-[240px] h-[50%] transition-all duration-150 ease-in transform 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>
+              </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" />
+      <div className="flex lg:hidden">
+        <div
+          id="recommendation-list"
+          className="flex gap-5 overflow-x-scroll scrollbar-none px-5 py-5 lg:py-10"
+          ref={mobileRef}
+          {...mobileEvent}
+        >
+          {filteredData.slice(0, 9).map((i) => (
+            <div key={`mobile-${i.id}`} className="flex flex-col gap-2">
+              <Link
+                title={i.title.userPreferred}
+                href={`/en/${i.type.toLowerCase()}/${i.id}`}
+                className="relative flex-center snap-start shrink-0 group rounded scale-100 hover:scale-105 duration-300 ease-out"
+              >
+                <span className="h-[190px] w-[135px] lg:h-[265px] lg:w-[185px] rounded absolute bg-gradient-to-b from-black/50 from-5% to-30% to-transparent z-40" />
+                <div className="absolute top-0 right-0 z-40 font-karla font-bold">
+                  {i.type === "ANIME" ? (
+                    <span className="flex items-center px-2 py-1 gap-1 text-sm text-white">
+                      <PlayCircleIcon className="w-5 h-5" />
+                    </span>
+                  ) : (
+                    <span className="flex items-center px-2 py-1 gap-1 text-sm text-white">
+                      <BookOpenOutline className="w-5 h-5" />
+                    </span>
+                  )}
+                </div>
+                <Image
+                  src={i.coverImage.extraLarge}
+                  alt={i.title.userPreferred}
+                  width={190}
+                  height={256}
+                  className="h-[190px] w-[135px] lg:h-[265px] lg:w-[185px] shrink-0 brightness-[90%] rounded-md object-cover overflow-hidden transition-all duration-150 ease-in-out"
+                />
+              </Link>
+              <Link
+                href={
+                  i.type === "MANGA"
+                    ? `/en/manga/${i.id}`
+                    : `/en/${i.type.toLowerCase()}/${i.id}`
+                }
+                className="w-[135px] lg:w-[185px] line-clamp-2"
+                title={i.title.romaji}
+              >
+                <h1 className="font-karla font-semibold xl:text-base text-[15px]">
+                  {i.status === "RELEASING" ? (
+                    <span className="dots bg-green-500" />
+                  ) : i.status === "NOT_YET_RELEASED" ? (
+                    <span className="dots bg-red-500" />
+                  ) : null}
+                  {i.title.userPreferred}
+                </h1>
+              </Link>
+            </div>
+          ))}
+        </div>
+      </div>
+      <div className="hidden lg:block 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"
+          className="hidden lg:block absolute top-0 left-0 z-30 w-[60%] h-full object-cover opacity-30"
         />
       )}
     </div>