faq hover

Common/CardCompact.js

@@ -22,7 +22,7 @@ const CardCompact = (props) => {
   <div onClick={()=>{
     let slug =  name.toLowerCase().trim().replace(/[^\w\s-]/g, '').replace(/[\s_-]+/g, '-').replace(/^-+|-+$/g, '');
      router.push(`/post-detail/${props.item?.pk}/${slug}/`)
-    }} key={props.index} style={{marginBottom:"10px"}} className={`my-2 overflow-hidden w-full  ${props?.page ==="dashboard"?"":"cursor-pointer"} py-2 bg-card rounded-md flex justify-center hover:bg-primary/10  hover:border-primary/50 flex-col  md:flex-row`}>
+    }} key={props.index} style={{marginBottom:"10px"}} className={`my-2 overflow-hidden w-full  ${props?.page ==="dashboard"?"":"cursor-pointer"} py-2 bg-card rounded-md flex justify-center hover:bg-primary/10  hover:border-primary/50  flex-col  md:flex-row`}>
 
     <div className='flex p-2'>
      <div className="bg-cover imagefit rounded mx-auto justify-center items-center inline-flex ml-2" style={{'backgroundImage':`url("${props.item[`t`] ? props.item[`t`] : props.categoryId==="XXX"?"https://i.therarbg.com/xnp.jpg": "https://i.therarbg.com/np.jpg"}")`, width:"50px",height:"50px"}}>

components/CardInfo.js

@@ -12,7 +12,7 @@ export default function CardInfo({
     <div
       className={
         isTrending
-          ? 'absolute left-4 bottom-4 z-40 h-fit w-fit truncate text-ellipsis'
+          ? 'absolute left-4 bottom-4 z-40 h-fit w-fit truncate text-ellipsis hover_effect'
           : null
       }
     >

components/Heading.js

@@ -12,23 +12,23 @@ export default function Heading({
       {isHomePage ? (
         <div className='flex items-end'>
           <h2 className='section-title py-px sm:py-0'>{title}</h2>
-          <p
+         {media_type&& <p
             className={
               media_type === 'movie'
                 ? 'ml-2 rounded-md border-2 py-px px-2 text-[8px] font-medium uppercase tracking-wider text-app-pure-white sm:ml-4 sm:text-[10px]'
                 : 'ml-2 rounded-md border-2 border-app-pure-white bg-app-pure-white py-px px-2 text-[8px] font-medium uppercase tracking-wider text-app-dark-blue sm:ml-4 sm:text-[10px] '
             }>
-            {media_type}
-          </p>
+            { media_type}
+          </p>}
         </div>
       ) : (
         <h2 className='section-title'>{title}</h2>
       )}
-      <Link href={href} as={href} passHref>
+    { href&& <Link href={href} as={href} passHref>
         <a className='cursor-pointer text-xs font-medium uppercase tracking-wide text-app-greyish-blue hover:underline'>
           See more
         </a>
-      </Link>
+      </Link>}
     </div>
   )
 }

pages/movie/[id].js

@@ -12,10 +12,12 @@ import FilmResources from '../../components/FilmResources'
 import FilmSynopsis from '../../components/FilmSynopsis'
 import Loading from '../../components/Loading'
 import SearchBar from '../../components/SearchBar'
-import { fetcher, pathToSearchMovie } from '../../utils'
+import { fetcher, pathToSearchMovie, renderResults, sliceArray } from '../../utils'
 import YouTube from "react-youtube";
 
 import TorrentList from '../../Common/TorrentList'
+import CardNormal from "../../components/CardNormal"
+import Heading from '../../components/Heading'
 
 export default function Movie() {
   const router = useRouter()
@@ -84,6 +86,10 @@ const handleClose =()=>{
             </section>
 
           </section>
+
+        
+
+
           {movie?.imdb?.imdb?.video_list[0]?.key ? <div className='text-gray-300'>
            
             <YouTube videoId={movie?.imdb?.imdb?.video_list[0]?.key} style={{ borderRadius: "1px" }}
@@ -92,6 +98,25 @@ const handleClose =()=>{
             : null}
           <br />
        {movie?.credits?.cast?   <FilmCasts casts={movie?.credits?.cast} />:null}
+
+       <section
+          className='w-full overflow-hidden md:mb-10 lg:overflow-visible'>
+          <Heading
+            title={"You may like also"}
+            isHomePage={true}
+            isTrending={true}
+            media_type={false}
+          />
+          <section
+            className={
+             'h-scroll relative flex gap-x-4 overflow-x-scroll  sm:gap-x-10 2xs:mt-2'   }>
+            {renderResults(
+              sliceArray(movie?.detail?.recommendations?.results || [], movie?.detail?.recommendations?.results.length),
+              CardNormal,
+              "movie"
+            )}
+          </section>
+        </section>
         </div>
       ) : (
         <Loading />