.eslintrc.json

@@ -1,6 +1,4 @@
 {
   "extends": "next/core-web-vitals",
-  "rules": {   
-    "@next/next/no-img-element": "off",
-    "react/no-unescaped-entities": 0 }
+  "rules": { "react/no-unescaped-entities": 0 }
 }

Common/Card.js

@@ -1,6 +1,5 @@
-import React from 'react'
-import { useRouter } from 'next/router'
-import { useTheme } from 'next-themes'
+import React from 'react';
+import {useRouter } from 'next/router';
 
 function formatBytes(bytes, decimals = 1) {
   if (!+bytes) return '0 Bytes'
@@ -13,85 +12,46 @@ function formatBytes(bytes, decimals = 1) {
 
   return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))} ${sizes[i]}`
 }
-function cleanMovieNames(movieName) {
-  const pattern =
-    /(2160p|1080p|720p|360p|4320p|H265|BluRay|Rip|10 bit|DV|HDR10|ita|eng|AC3|5\.1|sub|Licdom|UpScaled|5 1|su)/gi
 
-  const cleanedNames = movieName.replace(pattern, '').trim()
 
-  return cleanedNames
-}
-
-const Card = props => {
-  const router = useRouter()
-  const { theme, setTheme } = useTheme()
-  let name = props.item[`name`]
-  let time = new Date(props.item[`timestamp`])
+const Card = (props) => {
+  const router = useRouter();
+  let name = props.item[`name`];
+  let time = new Date(props.item[`timestamp`]);
   return (
-    <div
-      onClick={() => {
-        if (props?.page === 'dashboard' || props?.blur) {
-          return
-        }
-        let slug = name
-          .toLowerCase()
-          .trim()
-          .replace(/[^\w\s-]/g, '')
-          .replace(/[\s_-]+/g, '-')
-          .replace(/^-+|-+$/g, '')
-        router.push(`/post-detail/${props.item?.eid}/${slug}/`)
-      }}
-      key={props.index}
-      style={{ marginBottom: '20px' }}
-      className={` my-2 ${
-        props?.page === 'dashboard' ? '' : 'cursor-pointer'
-      } ${
-        theme === 'dark' ? 'bg-card' : 'bg-app-shady-white'
-      }  hover_effect flex w-full  flex-col justify-center !overflow-visible rounded-md py-2 hover:border-primary/50 hover:bg-primary/50  md:flex-row `}>
-      <div className='flex  p-2'>
-        <div
-          className='imagefit  mx-auto ml-2 inline-flex items-center justify-center rounded bg-cover'
-          style={{
-            backgroundImage: `url("${
-              props.item[`thumbnail`]
-                ? props.item[`thumbnail`]
-                : props.categoryId === 'XXX'
-                ? 'https://i.therarbg.com/xnp.jpg'
-                : 'https://i.therarbg.com/np.jpg'
-            }")`,
-            width: '50px',
-            height: '50px',
-          }}></div>
-
-        <div
-          className={`flex  h-auto w-[90%] items-center overflow-visible  text-ellipsis break-all pl-4 pt-1.5 text-left text-[14px] font-light text-black  dark:text-white `}>
-          {cleanMovieNames(props?.item?.name)}
-        </div>
-      </div>
-
-      <div
-        className='shift-right long-and-truncated  flex  h-auto items-center gap-4 pt-1.5 text-[14px] font-light text-app-dark-blue dark:text-white'
-        style={{ fontSize: '12px' }}>
-        <span className='w-14'>{props.item['c'] || props.categoryId}</span>
-
-        <span className='w-14'>
-          {time.getDate() || ''}-{time.getMonth() + 1 || ''}-
-          {time.getFullYear() || ''}
-        </span>
-
-        <span className='w-14'>{formatBytes(props.item['size'])}</span>
-        {props?.page === 'dashboard' ? (
-          <span
-            onClick={() => {
-              router.push(`/upload?data=${JSON.stringify(props?.item)}`)
-            }}
-            className='cursor-pointer font-light text-primary'>
-            Edit
-          </span>
-        ) : null}
-      </div>
+  <div onClick={()=>{
+    if(props?.page ==="dashboard" || props?.blur){
+      return;
+    }
+    let slug =  name.toLowerCase().trim().replace(/[^\w\s-]/g, '').replace(/[\s_-]+/g, '-').replace(/^-+|-+$/g, '');
+     router.push(`/post-detail/${props.item?.eid}/${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 border border-off-white/10 hover:border-primary/50 flex-col  md:flex-row `}>
+    <div className='flex  p-2'>
+    <div className="imagefit bg-cover rounded mx-auto justify-center items-center inline-flex ml-2" style={{'backgroundImage':`url("${props.item[`thumbnail`] ? props.item[`thumbnail`] : props.categoryId==="XXX"?"https://i.therarbg.com/xnp.jpg": "https://i.therarbg.com/np.jpg"}")`,width:"50px",height:"50px"}}>
     </div>
-  )
-}
+   
+      <div className="text-off-white flex items-center text-[14px] w-[90%] text-left h-auto pt-1.5 text-ellipsis overflow-hidden pl-4 font-medium break-all">
+      
+        {props?.item?.name}
+     
+    </div>
+    </div>
+   
+    <div className="flex shift-right  items-center  text-off-white text-[14px] h-auto pt-1.5 long-and-truncated font-light gap-4 " style={{fontSize:"12px"}}>
+      <span className='w-14'>
+        {props.item['c'] || props.categoryId}
+      </span>
+     
+      <span className='w-14'>
+        {time.getDate()||""}-{time.getMonth()+1||""}-{time.getFullYear()||""}
+      </span>
+     
+      <span className='w-14'>
+        {formatBytes(props.item['size'])}
+      </span>
+     {props?.page ==="dashboard"?  <span onClick={()=>{router.push(`/upload?data=${JSON.stringify(props?.item)}`)}} className='font-medium cursor-pointer text-primary' >Edit</span>:null}
+    </div>
+  </div>);
+};
 
-export default Card
+export default Card;

Common/CardCompact.js

@@ -1,6 +1,5 @@
-import React from 'react'
-import { useRouter } from 'next/router'
-import { useTheme } from 'next-themes'
+import React from 'react';
+import {useRouter } from 'next/router';
 
 function formatBytes(bytes, decimals = 1) {
   if (!+bytes) return '0 Bytes'
@@ -14,62 +13,44 @@ function formatBytes(bytes, decimals = 1) {
   return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))} ${sizes[i]}`
 }
 
-const CardCompact = props => {
-  const router = useRouter()
-  const { theme, setTheme } = useTheme()
-  let name = props.item[`n`]
-  let time = new Date(props.item[`a`] * 1000)
+
+const CardCompact = (props) => {
+  const router = useRouter();
+  let name = props.item[`n`];
+  let time = new Date(props.item[`a`]*1000);
   return (
-    <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 w-full overflow-visible  ${
-        props?.page === 'dashboard' ? '' : 'cursor-pointer'
-      } py-2  ${
-        theme === 'dark' ? 'bg-card' : 'bg-app-shady-white'
-      }   hover_effect flex flex-col justify-center rounded-md  hover:border-primary/50  hover:dark:bg-app-dark-blue  md:flex-row`}>
-      <div className='flex p-2'>
-        <div
-          className='imagefit  mx-auto ml-2 inline-flex items-center justify-center rounded bg-cover'
-          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',
-          }}></div>
+  <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 border border-off-white/10 hover:border-primary/50 flex-col  md:flex-row`}>
 
-        <div className='line-clamp-1 flex h-auto w-full items-center overflow-visible  text-ellipsis break-all pl-4 pt-1.5 text-left text-[13px] font-extralight '>
-          <span className='text-black dark:text-white'>{name}</span>
-        </div>
-      </div>
+    <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"}}>
+     </div>
 
-      <div
-        className='shift-right long-and-truncated   flex h-auto items-center gap-4 pt-1.5 font-extralight text-black dark:text-white'
-        style={{ fontSize: '14px' }}>
-        <span className='w-14'>{props.item['c'] || props.categoryId}</span>
-        <span>・</span>
-        <span className='w-14'>
-          {time.getDate()}-{time.getMonth() + 1}-{time.getFullYear()}
-        </span>
-        <span>・</span>
-        <span className='w-14'>{formatBytes(props.item['s'])}</span>
-      </div>
+      <div className="text-off-white  w-full text-[12px] text-left h-auto pt-1.5 text-ellipsis overflow-hidden pl-4 font-medium break-all">
+      <span>
+        {name}
+      </span>
+     </div>
     </div>
-  )
-}
 
-export default CardCompact
+
+    <div className="flex text-off-white   h-auto pt-1.5 shift-right long-and-truncated font-light gap-4" style={{fontSize:"12px"}}>
+      <span className='w-14'>
+        {props.item['c'] || props.categoryId}
+      </span>
+      <span>・</span>
+      <span className='w-14'>
+        {time.getDate()}-{time.getMonth()+1}-{time.getFullYear()}
+      </span>
+      <span>・</span>
+      <span className='w-14'>
+        {formatBytes(props.item['s'])}
+      </span>
+    </div>
+  </div>
+  );
+};
+
+export default CardCompact;

Common/CardExpanded.js

@@ -1,6 +1,5 @@
-import React from 'react'
-import { useRouter } from 'next/router'
-import { useTheme } from 'next-themes'
+import React from 'react';
+import {useRouter } from 'next/router';
 
 export function formatBytes(bytes, decimals = 1) {
   if (!+bytes) return '0 Bytes'
@@ -14,57 +13,39 @@ export function formatBytes(bytes, decimals = 1) {
   return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))} ${sizes[i]}`
 }
 
-const CardExpanded = props => {
-  const router = useRouter()
-  const { theme, setTheme } = useTheme()
-  let name = props.item[`n`]
-  let time = new Date(props.item[`a`] * 1000)
-  return (
-    <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}
-      className={` my-3 mt-6 inline-flex cursor-pointer flex-col justify-center overflow-hidden rounded-md py-2 md:h-44 ${
-        theme === 'dark' ? 'bg-card ' : ' bg-app-shady-white'
-      }   fab zoomcss grid_hover_effect hover:border-primary/50`}
-      style={{ width: '200px' }}>
-      <div
-        className='imagefit mx-auto  inline-flex h-44 w-44 items-center justify-center rounded bg-cover '
-        style={{
-          backgroundImage: `url("${
-            props.item[`t`]
-              ? props.item[`t`]
-              : props.categoryId === 'XXX'
-              ? 'https://i.therarbg.com/xnp.jpg'
-              : 'https://i.therarbg.com/np.jpg'
-          }")`,
-        }}></div>
-      <br />
-      <div
-        className='long-and-truncated h-auto w-fit break-all pt-1.5 text-[12px] font-light text-black dark:text-white'
-        style={{ fontSize: '12px' }}>
-        <span>{name}</span>
-      </div>
-      <div
-        className='long-and-truncated flex h-auto justify-between pt-1.5 text-[10px] font-light text-black dark:text-white'
-        style={{ fontSize: '10px' }}>
-        <span>{props.item['c'] || props.categoryId}</span>
-        <span>・</span>
-        <span>
-          {time.getDate()}-{time.getMonth() + 1}-{time.getFullYear()}
-        </span>
-        <span>・</span>
-        <span>{formatBytes(props.item['s'])}</span>
-      </div>
-    </div>
-  )
-}
 
-export default CardExpanded
+
+const CardExpanded = (props) => {
+  const router = useRouter();
+  let name = props.item[`n`];
+  let time = new Date(props.item[`a`]*1000);
+  return (
+  <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} className="my-3  overflow-hidden mt-6 cursor-pointer py-2 bg-card rounded-md flex-col justify-center inline-flex  hover:bg-primary/10 border border-off-white/10 hover:border-primary/50 zoomcss" style={{width:"200px"}}>
+    <div className="w-40 h-44  bg-cover imagefit rounded mx-auto justify-center items-center inline-flex" style={{'backgroundImage':`url("${props.item[`t`] ? props.item[`t`] : props.categoryId==="XXX"?"https://i.therarbg.com/xnp.jpg": "https://i.therarbg.com/np.jpg"}")`}}>
+    </div>
+    <br />
+      <div className="text-off-white text-[12px] h-auto pt-1.5 long-and-truncated font-medium w-fit break-all" style={{fontSize:"12px"}}>
+      <span>
+        {name}
+      </span>
+    </div>
+    <div className="flex text-off-white text-[10px] h-auto pt-1.5 long-and-truncated font-light justify-between" style={{fontSize:"10px"}}>
+      <span >
+        {props.item['c'] || props.categoryId}
+      </span>
+      <span>・</span>
+      <span >
+        {time.getDate()}-{time.getMonth()+1}-{time.getFullYear()}
+      </span>
+      <span>・</span>
+      <span >
+        {formatBytes(props.item['s'])}
+      </span>
+    </div>
+  </div>);
+};
+
+export default CardExpanded;

Common/CardGrid.js

@@ -1,7 +1,5 @@
-import React, { useEffect } from 'react'
-import { useRouter } from 'next/router'
-import { useTheme } from 'next-themes'
-
+import React from 'react';
+import {useRouter } from 'next/router';
 export function formatBytes(bytes, decimals = 1) {
   if (!+bytes) return '0 Bytes'
 
@@ -14,61 +12,45 @@ export function formatBytes(bytes, decimals = 1) {
   return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))} ${sizes[i]}`
 }
 
-const CardExpanded = props => {
-  const { theme, setTheme } = useTheme()
-  const router = useRouter()
-  let name = props.item[`name`]
-  let time = new Date(props.item[`timestamp`])
-  return (
-    <div
-      onClick={() => {
-        if (props?.blur == true) {
-          props?.setBlur(false)
-          return
-        }
-        let slug = name
-          .toLowerCase()
-          .trim()
-          .replace(/[^\w\s-]/g, '')
-          .replace(/[\s_-]+/g, '-')
-          .replace(/^-+|-+$/g, '')
-        router.push(`/post-detail/${props.item?.eid}/${slug}/`)
-      }}
-      key={props.index}
-      className={`zoom grid_hover_effect my-3 mt-6 scale-125 cursor-pointer overflow-hidden py-2 ${
-        theme === 'dark' ? 'bg-app-semi-dark-blue' : 'bg-app-shady-white'
-      } fab zoomcss inline-flex flex-col justify-center   rounded-md  hover:border-primary/50 hover:dark:bg-primary/10 `}
-      style={{ width: '200px' }}>
-      <div
-        className='imagefit mx-auto inline-flex h-44 w-40 items-center justify-center rounded bg-cover brightness-100'
-        style={{
-          backgroundImage: `url("${
-            props.item[`thumbnail`]
-              ? props.item[`thumbnail`]
-              : props.categoryId === 'XXX'
-              ? 'https://i.therarbg.com/xnp.jpg'
-              : 'https://i.therarbg.com/np.jpg'
-          }")`,
-        }}></div>
-      <br />
-      <div
-        className='k long-and-truncated h-auto w-fit break-all pt-1.5 font-light text-black hover:text-app-dark-blue dark:text-white '
-        style={{ fontSize: '12px' }}>
-        <span>{props?.item?.name}</span>
-      </div>
-      <div
-        className='s long-and-truncated flex h-auto justify-between pt-1.5 font-light text-black hover:text-app-dark-blue dark:text-white '
-        style={{ fontSize: '10px' }}>
-        <span>{props.item['c'] || props.categoryId}</span>
-        <span>・</span>
-        <span>
-          {time.getDate()}-{time.getMonth() + 1}-{time.getFullYear()}
-        </span>
-        <span>・</span>
-        <span>{formatBytes(props.item['size'] || props.item['s'])}</span>
-      </div>
-    </div>
-  )
-}
 
-export default CardExpanded
+
+const CardExpanded = (props) => {
+  console.log("pp",props?.blur)
+  const router = useRouter();
+  let name = props.item[`name`];
+  let time = new Date(props.item[`timestamp`]);
+  return (
+  <div onClick={()=>{
+   
+    if( props?.blur==true){
+      props?.setBlur(false)
+      return;
+    }
+    let slug =  name.toLowerCase().trim().replace(/[^\w\s-]/g, '').replace(/[\s_-]+/g, '-').replace(/^-+|-+$/g, '');
+     router.push(`/post-detail/${props.item?.eid}/${slug}/`)
+    }} key={props.index} className="my-3  mt-6 zoom overflow-hidden cursor-pointer py-2 bg-card rounded-md flex-col justify-center inline-flex  hover:bg-primary/10 border border-off-white/10 hover:border-primary/50 zoomcss" style={{width:"200px"}}>
+    <div className="w-40 h-44 bg-cover imagefit rounded mx-auto justify-center items-center inline-flex" style={{'backgroundImage':`url("${props.item[`thumbnail`] ? props.item[`thumbnail`] : props.categoryId==="XXX"?"https://i.therarbg.com/xnp.jpg": "https://i.therarbg.com/np.jpg"}")`}}>
+    </div>
+    <br />
+      <div className="text-off-white  h-auto pt-1.5 long-and-truncated font-medium w-fit break-all" style={{fontSize:"12px"}}>
+      <span>
+      {props?.item?.name}
+      </span>
+    </div>
+    <div className="flex text-off-white  h-auto pt-1.5 long-and-truncated font-light justify-between" style={{fontSize:"10px"}}>
+      <span >
+        {props.item['c'] || props.categoryId}
+      </span>
+      <span>・</span>
+      <span >
+        {time.getDate()}-{time.getMonth()+1}-{time.getFullYear()}
+      </span>
+      <span>・</span>
+      <span >
+        {formatBytes(props.item['size']||props.item['s'])}
+      </span>
+    </div>
+  </div>);
+};
+
+export default CardExpanded;

Common/Header.js

@@ -46,7 +46,11 @@ useEffect(()=>{
 },[])
   return (
     <div className=''>
-    <header className="hidden dark:bg-background-header/25 bg-white text-sm font-light md:flex sticky top-0 font-montserrat backdrop-blur-3xl px-8 md:px-16 justify-between">
+    <header className="hidden bg-background-header/25 text-sm font-medium md:flex sticky top-0 font-montserrat backdrop-blur-3xl px-8 md:px-16 justify-between">
+
+
+
+    
       <span className='mx-6 cursor-pointer hover:text-green-400 text-xl font-semibold my-4' onClick={()=>route.push("/")}>theRARBG</span>
 
       <div className='hidden md:flex mx-auto font-normal items-center'>
@@ -77,7 +81,7 @@ useEffect(()=>{
       }}  >{token?"Logout":"Login"}</button>
     </header>
       {/*Mobile Hamburger Menu */}
-      <div className={`${showNav?"h-screen":"h-[60px]"} transition-all ease-in-out duration-500 z-20   md:hidden bg-white dark:bg-background-header/25 w-full fixed top-0 font-montserrat backdrop-blur-3xl px-8 md:px-16 flex flex-col`}>
+      <div className={`${showNav?"h-screen":"h-[60px]"} transition-all ease-in-out duration-500 z-20   md:hidden bg-background-header/25 w-full fixed top-0 font-montserrat backdrop-blur-3xl px-8 md:px-16 flex flex-col`}>
         <div className='h-[60px] w-full flex justify-between items-center'>
         <span className='mx-6 cursor-pointer hover:text-green-400 text-xl font-semibold' onClick={()=>route.push("/")}>theRARBG</span>
         <img src='/navIcon.png' alt="The Navigation Icon" className='w-8 h-8 cursor-pointer' onClick={() => setShowNav(!showNav)}/>  

Common/TorrentList.js

@@ -1,293 +1,211 @@
-import moment from 'moment'
-import {useRouter} from 'next/router'
+import moment from 'moment';
+import { useRouter } from 'next/router';
 import React from 'react'
+import Modal from "react-modal";
+import { formatBytes } from './CardExpanded';
+import DataTable,{createTheme} from 'react-data-table-component';
+const TorrentList = ({ setisTorrent, torrent_list, runtime }) => {
+  const router = useRouter()
+  const customStyles = {
+    content: {
+      top: '50%',
+      left: '50%',
+      right: 'auto',
+      bottom: 'auto',
+      marginRight: '-50%',
+      transform: 'translate(-50%, -50%)',
+      background: "#171e30",
+      maxHeight: "700px",
+      maxWidth: "1080px",
+      width: "100%",
+      borderColor: "#454851",
 
-import Modal from 'react-modal'
+    },
+  };
 
-import {formatBytes} from './CardExpanded'
+  console.log("torrent_list", torrent_list)
 
-import DataTable, {createTheme} from 'react-data-table-component'
-import {useTheme} from 'next-themes'
 
-const TorrentList = ({setisTorrent, torrent_list, runtime}) => {
-    const theme = useTheme()
-    const router = useRouter()
 
-    const customStyles = {
-        content: {
-            top: '50%',
-            left: '50%',
-            right: 'auto',
-            bottom: 'auto',
-            marginRight: '-50%',
-            transform: 'translate(-50%, -50%)',
-            background: '#171e30',
-            maxHeight: '700px',
-            maxWidth: '1500px',
-            border: '0px',
-            width: '100%',
-            borderColor: '#454851',
+  const columns = [
+    {
+      name: 'Name',
+      selector: row => row.name,
+      sortable:true,
+
+    },
+    {
+      name: 'Action',
+     
+      cell:(row, index) => {
+        let slug = row?.name.toLowerCase().trim().replace(/[^\w\s-]/g, '').replace(/[\s_-]+/g, '-').replace(/^-+|-+$/g, '');
+                
+        return(
+          <a onClick={()=>router.push(`/post-detail/${row?.eid}/${slug}/`)}>
+           Download
+          </a>
+        )
+      },
+      width:"10%",
+      style:{
+        color:"#296ac8",
+        cursor:"pointer",
+      
+      }
+    },
+    {
+      name: 'Category',
+      selector: row => row.category_str,
+      width:"10%",
+      sortable:true,
+    },
+    {
+      name: 'Date',
+      selector: row => moment(row?.last_checked).format("DD-MM-YYYY"),
+      width:"10%",
+      sortable:true,
+    },
+    {
+      name: 'Runtime',
+      selector: row => moment.utc(runtime * 1000).format('HH:mm:ss'),
+      width:"11%",
+      sortable:true,
+    },
+    {
+      name: 'Size',
+      selector: row => formatBytes(row?.size),
+      sortable:true,
+      width:"10%",
+      sortFunction: (a, b) => {
+       
+        return a.size - b.size;
+      },
+    },
+    {
+      name: 'S',
+      selector: row => row?.seeders,
+      sortable:true,
+      width:"6%",
+      style:{
+        color:"#00FF00",
+       
+       
+      }
+      
+    },
+    {
+      name: 'L',
+      selector: row => row.leechers,
+      sortable:true,
+      width:"6%",
+      style:{
+        color:"#dd0c0e",
+       
+      }
+    },
+  ];
+  createTheme('dark', {
+    background: {
+      default: 'transparent',
+    },
+  });
+
+  const customCss = {
+   
+    headCells: {
+        style: {
+           fontSize:"14px",
+           fontWeight:"700",
+           color:"#C2D8D3"
         },
-    }
+    },
 
-    const qualityRegex = /(4K|720p|1080p|2160p|720P|360P|360p|1080P)/i
+};
+
+  return (
+    <>
+
+      <Modal
+        isOpen={true}
+        style={customStyles}
+        onRequestClose={() => setisTorrent(false)}
+      >
+
+        
 
-    const columns = [
         {
-            name: 'Name',
-            selector: row => row.name,
-            sortable: true,
-        },
-        {
-            name: 'Action',
+          torrent_list.length > 0 ?
+            <DataTable
+              columns={columns}
+              data={torrent_list}
+              theme="dark"
+              sortable
+              customStyles={customCss}
+            />
+            : <div className='nosimilar_torrent text-gray-700 '>
+              <h1>
+                Sorry Torrent Not Available Try after some days !!!
+              </h1>
+            </div>}
+        {/* {
+          torrent_list.length>0?
+          torrent_list?.map((item, index) => {
+            return (
+              <div key={index} style={{color:"#749BC2",borderColor:"#454851"}} onClick={() => {
+                let slug = item?.name.toLowerCase().trim().replace(/[^\w\s-]/g, '').replace(/[\s_-]+/g, '-').replace(/^-+|-+$/g, '');
+                router.push(`/post-detail/${item?.eid}/${slug}/`)
 
-            cell: (row, index) => {
-                let slug = row?.name
-                    .toLowerCase()
-                    .trim()
-                    .replace(/[^\w\s-]/g, '')
-                    .replace(/[\s_-]+/g, '-')
-                    .replace(/^-+|-+$/g, '')
+              }} className={`my-3 cursor-pointer  w-[]   py-2 bg-card rounded-md flex justify-center hover:bg-primary/10 border border-off-white/5 hover:border-primary/50 flex-col  md:flex-row`}>
+                <div className="row-custom   text-[14px] justify-end h-auto pt-1.5 text-ellipsis overflow-hidden pl-4 font-medium ">
+                  <span>
+                    {item?.name}
+                  </span>
+                </div>
 
-                return (
-                    <a onClick={() => router.push(`/post-detail/${row?.eid}/${slug}/`)}>
-                        Download
+
+                <div className="flex  text-[14px] h-auto pt-1.5 justify-end long-and-truncated font-light gap-4">
+
+                  <div className='w-4/12 md:w-[14%]'>
+                    <a style={{ color: "#296ac8" }}>
+                      Download
                     </a>
-                )
-            },
-            width: '8%',
-            style: {
-                color: '#296ac8',
-                cursor: 'pointer',
-            },
-        },
-        {
-            name: 'Category',
-            selector: row => row.category_str,
-            width: '8%',
-            sortable: true,
-        },
-        {
-            name: 'Res',
-            selector: row =>
-                row.name.match(qualityRegex) ? row.name.match(qualityRegex)[0] : '',
-            width: '6%',
-            sortable: true,
-            sortFunction: (a, b) => {
-                function compareQuality(a, b) {
-                    if (a && b) {
-                        const regex = /(\d+)p/
-                        const qualityA = parseInt(
-                            a.name.match(qualityRegex)
-                                ? a.name.match(qualityRegex)[0]?.match(regex)
-                                : ''
-                        )
-                        const qualityB = parseInt(
-                            b.name.match(qualityRegex)
-                                ? b.name.match(qualityRegex)[0]?.match(regex)
-                                : ''
-                        )
-                        return qualityA - qualityB
-                    }
-                }
+                  </div>
+                  <span className='w-4/12 md:w-[14%]'>
+                    {item?.category_str}
+                  </span>
+                  <span className='w-4/12 md:w-[14%]'>
+                    {moment(item?.last_checked).format("DD-MM-YYYY")}
+                  </span>
+                 
 
-                return compareQuality(a, b)
-            },
-        },
-        {
-            name: 'Date',
-            selector: row => moment(row?.last_checked).format('DD-MM-YYYY'),
-            width: '9%',
-            sortable: true,
-        },
-        {
-            name: 'Runtime',
-            selector: row => moment.utc(runtime * 1000).format('HH:mm:ss'),
-            width: '9%',
-            sortable: true,
-        },
-        {
-            name: 'Size',
-            selector: row => formatBytes(row?.size),
-            sortable: true,
-            width: '7%',
-            sortFunction: (a, b) => {
-                return a.size - b.size
-            },
-        },
-        {
-            name: 'S | L',
-            cell: (row, index) => {
-                let l = row?.leechers
-                let s = row?.seeders
-                return (
-                    <span style={{color: "#00FF00"}}>
-              {l} | <span style={{color: "#FF0000"}}>{s}</span>
-            </span>
-                )
-            },
-            sortable: true,
-            sortFunction: (a, b) => {
-                return a?.leechers - b?.leechers
-            },
-            width: '8%',
-            style: {
-                color: '#00FF00',
-            },
-        },
+                </div>
+                <div className="flex  text-[14px] h-auto pt-1.5 justify-end long-and-truncated font-light gap-4">
+                  <span className='w-4/12 md:w-[14%]'>
+                      {moment.utc(runtime * 1000).format('HH:mm:ss')}
+                    </span>
+                    <span className='w-4/12 md:w-[14%]'>
+                      {formatBytes(item?.size)}
+                    </span>
+                    <span className='w-4/12 md:w-[18%] text-green-500' style={{ color: "#00FF00" }}>
+                      {item?.seeders}
+                    </span>
+                    <span className='w-4/12 md:w-[18%] text-red-600' style={{ color: "#ff0000" }}>
+                      {item?.leechers}
+                    </span>
+                </div>
+              </div>
 
-    ]
-    createTheme('dark', {
-        background: {
-            default: 'transparent',
-        },
-    })
+            )
+          })
+       :<div className='nosimilar_torrent text-gray-700 '>
+         <h1>
+          Sorry Torrent Not Available Try after some days !!!
+         </h1>
+       </div> } */}
 
-    const customCss = {
-        headCells: {
-            style: {
-                fontSize: '14px',
-                fontWeight: '700',
-                color: theme === 'dark' ? '#C2D8D3' : '#000000',
-            },
-        },
-    }
-
-    console.log('torrent_list', torrent_list)
-
-    createTheme('dark', {
-        background: {
-            default: 'transparent',
-        },
-    })
-
-    return (
-        <>
-            <Modal
-                isOpen={true}
-                style={customStyles}
-                onRequestClose={() => setisTorrent(false)}>
-                {' '}
-                {torrent_list.length > 0 ? (
-                    <DataTable
-                        columns={columns}
-                        data={torrent_list}
-                        theme={theme}
-                        sortable
-                        customStyles={customCss}
-                    />
-                ) : (
-                    <div className='nosimilar_torrent text-gray-700 '>
-                        <h1>Sorry Torrent Not Available Try after some days !!!</h1>
-                    </div>
-                )}
-                {/* {
-
-          torrent_list.length>0?
-
-          torrent_list?.map((item, index) => {
-
-            return (
-
-              <div key={index} style={{color:"#749BC2",borderColor:"#454851"}} onClick={() => {
-
-                let slug = item?.name.toLowerCase().trim().replace(/[^\w\s-]/g, '').replace(/[\s_-]+/g, '-').replace(/^-+|-+$/g, '');
-
-                router.push(`/post-detail/${item?.eid}/${slug}/`)
-
-
-
-              }} className={`my-3 cursor-pointer  w-[]   py-2 dark:bg-card bg-white rounded-md flex justify-center hover:bg-primary/10 border border-off-white/5 hover:border-primary/50 flex-col  md:flex-row`}>
-
-                <div className="row-custom   text-[14px] justify-end h-auto pt-1.5 text-ellipsis overflow-hidden pl-4 font-light ">
-
-                  <span>
-
-                    {item?.name}
-
-                  </span>
-
-                </div>
-                <div className="flex  text-[14px] h-auto pt-1.5 justify-end long-and-truncated font-light gap-4">
-
-
-
-                  <div className='w-4/12 md:w-[14%]'>
-
-                    <a style={{ color: "#296ac8" }}>
-
-                      Download
-
-                    </a>
-
-                  </div>
-
-                  <span className='w-4/12 md:w-[14%]'>
-
-                    {item?.category_str}
-
-                  </span>
-
-                  <span className='w-4/12 md:w-[14%]'>
-
-                    {moment(item?.last_checked).format("DD-MM-YYYY")}
-
-                  </span>
-
-                 
-
-
-
-                </div>
-
-                <div className="flex  text-[14px] h-auto pt-1.5 justify-end long-and-truncated font-light gap-4">
-
-                  <span className='w-4/12 md:w-[14%]'>
-
-                      {moment.utc(runtime * 1000).format('HH:mm:ss')}
-
-                    </span>
-
-                    <span className='w-4/12 md:w-[14%]'>
-
-                      {formatBytes(item?.size)}
-
-                    </span>
-
-                    <span className='w-4/12 md:w-[18%] text-green-500' style={{ color: "#00FF00" }}>
-
-                      {item?.seeders}
-
-                    </span>
-
-                    <span className='w-4/12 md:w-[18%] text-red-600' style={{ color: "#ff0000" }}>
-
-                      {item?.leechers}
-
-                    </span>
-
-                </div>
-
-              </div>
-
-
-
-            )
-
-          })
-
-       :<div className='nosimilar_torrent text-gray-700 '>
-
-         <h1>
-
-          Sorry Torrent Not Available Try after some days !!!
-
-         </h1>
-
-       </div> } */}
-            </Modal>
-        </>
-    )
+      </Modal>
+    </>
+  )
 }
 
-export default TorrentList
+export default TorrentList

README.md

@@ -1,8 +1,14 @@
 
-# <img src = "https://media4.giphy.com/media/AuZXGzk5qKRpG54Ewl/giphy.gif?cid=ecf05e47jgpe7u14fp4yhajmqlmiy1jlf4xw5npgof5lr2qo&rid=giphy.gif&ct=s" width="45"> Y.A.P.S Project
+# <img src = "https://media4.giphy.com/media/AuZXGzk5qKRpG54Ewl/giphy.gif?cid=ecf05e47jgpe7u14fp4yhajmqlmiy1jlf4xw5npgof5lr2qo&rid=giphy.gif&ct=s" width="45"> Watcho
+[![Netlify Status](https://api.netlify.com/api/v1/badges/f3dd54aa-fd47-4ed5-bdaa-e6248062c6ad/deploy-status)](https://app.netlify.com/sites/watcho-app/deploys)
 
->Welcome to the 🎬 ``` Y.A.P.S ``` app! Yaps allows user to browse and search for their favorite movies or being based on any particular genre like horror, action, mystry, crime, family, fantasy, romance, music, and much More. Explore our app and you would fall in love 😍 for sure.
+>Welcome to the 🎬 ``` Watcho ``` app! Watcho allows user to browse and search for their favorite movies or being based on any particular genre like horror, action, mystry, crime, family, fantasy, romance, music, and much More. Explore our app and you would fall in love 😍 for sure.
 
+Author : [Sayan Maity](sayancr777@gmail.com)
+
+<p align="center">
+  <img src="https://github.com/Sayan-Maity/Watcho/blob/main/assets/banner.png" alt="banner">
+</p>
 
 ## 🛠️ Built with :
 <img src="https://img.shields.io/badge/react%20-%23333.svg?&style=for-the-badge&logo=react&logoColor=%2361DAFB"/>  <img src="https://img.shields.io/badge/next.js%20-%23323330.svg?&style=for-the-badge&logo=next.js&logoColor=white"/>  <img src="https://img.shields.io/badge/tailwindcss%20-%2306B6D4.svg?&style=for-the-badge&logo=tailwindcss&logoColor=white"/> <img src="https://img.shields.io/badge/themoviedatabase%20-%2301B4E4.svg?&style=for-the-badge&logo=themoviedatabase&logoColor=white"/> <img src="https://img.shields.io/badge/netlify%20-%2300C7B7.svg?&style=for-the-badge&logo=netlify&logoColor=white"/> <img src="https://img.shields.io/badge/vercel%20-%23333.svg?&style=for-the-badge&logo=vercel&logoColor=white"/> <img src="https://img.shields.io/badge/cloudflare%20-%23F38020.svg?&style=for-the-badge&logo=cloudflare&logoColor=white"/> 
@@ -11,26 +17,73 @@
 - **Version Control**: Git
 - **Hosting**: Netlify, Github Pages, Vercel, CloudFlare
 
-# PM2 Deployment
-```
-npm run build
-pm2 start npm --name prod -- run "start"
-```
-# For DEV
-```
-npm install
-npm run dev
-```
-
-
 ## ✨ Features :
 - Browse movies by genre
 - Search for specific movies
 - View movie details, including plot summary, cast, and ratings
 
+## 📸 Screenshots
+<table>
+    <tr>
+        <td colspan="2">
+            <img src="https://github.com/Sayan-Maity/Watcho/blob/main/assets/preview.jpg"></img>
+            <br />
+            <h3 align="center">Home Page</h3>
+        </td>
+    </tr>
+    <tr>
+        <td width="50%">
+            <img src="https://github.com/Sayan-Maity/Watcho/blob/main/assets/preview7.jpg"></img>
+            <br />
+            <p align="center">Trending & Popular Section</p>
+        </td>
+        <td width="50%">
+            <img src="https://github.com/Sayan-Maity/Watcho/blob/main/assets/preview6.jpg"></img>
+            <br />
+            <p align="center">Now Playing and Upcoming Section</p>
+        </td>
+    </tr>
+    <tr>
+        <td width="50%">
+            <img src="https://github.com/Sayan-Maity/Watcho/blob/main/assets/preview2.jpg"></img>
+            <br />
+            <p align="center">Movies Genre</p>
+        </td>
+        <td width="50%">
+            <img src="https://github.com/Sayan-Maity/Watcho/blob/main/assets/preview3.jpg"></img>
+            <br />
+            <p align="center">TV Series Genre</p>
+        </td>
+    </tr>
+    <tr>
+        <td width="50%">
+            <img src="https://github.com/Sayan-Maity/Watcho/blob/main/assets/preview4.jpg"></img>
+            <br />
+            <p align="center">Search Results</p></td>
+        <td width="50%">
+            <img src="https://github.com/Sayan-Maity/Watcho/blob/main/assets/preview8.jpg"></img>
+            <br />
+            <p align="center">Music Search Genre</p></td>
+    </tr>
+    <tr>
+        <td colspan="2">
+            <img src="https://github.com/Sayan-Maity/Watcho/blob/main/assets/preview5.jpeg"></img>
+            <br />
+            <h3 align="center">Movie Detail</h3>
+        </td>
+    </tr>
+</table>
+
 
 ## ⏳ Future Improvements :
 
 - [ ] Add a bookmark page to store the user's favorite movies and tv shows
 - [ ] Add the video playing feature when the user hover over the card and play the video
 - [ ] Add authentication so that the user can sign up and log in to save their favorite movies and tv shows permanently
+
+
+## 📝 Endnote
+So if you have liked this project then do consider giving it a star which will encourage me to build more of this kind of projects in future and also if you want youcan follow me on [Github](https://github.com/Sayan-Maity/) 😊
+Keep Coding !
+
+<p align="right">~ Sayan Maity</p>

SVG/search.js

@@ -3,7 +3,7 @@ import React from "react";
 export const SearchSVG = () => {
   return (
     <svg width="26" height="26" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <path d="M36.6667 36.6667L33.3333 33.3334M19.1667 35C21.2459 35 23.3048 34.5905 25.2258 33.7948C27.1468 32.9991 28.8923 31.8328 30.3625 30.3626C31.8328 28.8923 32.9991 27.1468 33.7948 25.2259C34.5905 23.3049 35 21.246 35 19.1667C35 17.0874 34.5905 15.0285 33.7948 13.1076C32.9991 11.1866 31.8328 9.44111 30.3625 7.97085C28.8923 6.50059 27.1468 5.33431 25.2258 4.53861C23.3048 3.74292 21.2459 3.33337 19.1667 3.33337C14.9674 3.33337 10.9401 5.00152 7.9708 7.97085C5.00148 10.9402 3.33333 14.9674 3.33333 19.1667C3.33333 23.366 5.00148 27.3932 7.9708 30.3626C10.9401 33.3319 14.9674 35 19.1667 35Z" stroke="#2f6af5" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"/>
+        <path d="M36.6667 36.6667L33.3333 33.3334M19.1667 35C21.2459 35 23.3048 34.5905 25.2258 33.7948C27.1468 32.9991 28.8923 31.8328 30.3625 30.3626C31.8328 28.8923 32.9991 27.1468 33.7948 25.2259C34.5905 23.3049 35 21.246 35 19.1667C35 17.0874 34.5905 15.0285 33.7948 13.1076C32.9991 11.1866 31.8328 9.44111 30.3625 7.97085C28.8923 6.50059 27.1468 5.33431 25.2258 4.53861C23.3048 3.74292 21.2459 3.33337 19.1667 3.33337C14.9674 3.33337 10.9401 5.00152 7.9708 7.97085C5.00148 10.9402 3.33333 14.9674 3.33333 19.1667C3.33333 23.366 5.00148 27.3932 7.9708 30.3626C10.9401 33.3319 14.9674 35 19.1667 35Z" stroke="#7AFFB8" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"/>
     </svg>
   );
 };

components/CardContinueWatching.js

@@ -1,62 +0,0 @@
-import {useRouter} from 'next/router'
-import CardImageCW from "./CardImageCW";
-import CardInfoCW from "./CardInfoCW";
-import {AiOutlineClose} from "react-icons/ai";
-
-export default function CardContinueWatching({
-                                                 id,
-                                                 category,
-                                                 year,
-                                                 src,
-                                                 clearHistoryFunction,
-                                                 title,
-                                             }) {
-    const router = useRouter()
-
-    const handleClick = (e) => {
-        if (e.target.tagName !== "svg") {
-            if (e.ctrlKey) {
-                if (category === 'movie') {
-                    window.open(`/play/movies?id=${id}`)
-                } else if (category === 'tv') {
-                    if (id.includes('tt'))
-                        window.open(`/play/tv?id=${id}`)
-                    else
-                        window.open(`/play/tv?tmdb=${id}`)
-                }
-            } else {
-                if (category === 'movie') {
-                    router.push(`/play/movies?id=${id}`)
-                } else if (category === 'tv') {
-                    if (id.includes('tt'))
-                        router.push(`/play/tv?id=${id}`)
-                    else
-                        router.push(`/play/tv?tmdb=${id}`)
-                }
-            }
-        } else {
-            e.preventDefault()
-        }
-    }
-
-    return (
-        <div className='relative w-full cursor-pointer test'>
-            <div className={"relative continue-card w-full transition duration-400 ease-in-out"} onClick={handleClick}>
-                <CardImageCW isTrending src={src}/>
-                <CardInfoCW
-                    id={id}
-                    category={category}
-                    title={title}
-                    year={year}
-                />
-            </div>
-            <div onClick={() => {
-                clearHistoryFunction(id, category)
-            }}
-                 data-id={"close-btn"}
-                 className={"text-black grid place-items-center close-button w-6 h-6 opacity-20 bg-app-shady-white top-2 right-2 rounded-full absolute"}>
-                <AiOutlineClose/>
-            </div>
-        </div>
-    )
-}

components/CardGenre.js

@@ -1,13 +1,13 @@
 import React from 'react'
 
 const CardGenre = React.forwardRef(
-  ({ oddBgColor = 'dark:odd:bg-app-greyish-blue ', onClick, href, text }, ref) => {
+  ({ oddBgColor = 'odd:bg-app-greyish-blue', onClick, href, text }, ref) => {
     return (
       <a
         href={href}
         onClick={onClick}
         ref={ref}
-        className={`card-hover-animation m-2 flex h-44 w-44 grow items-center justify-center rounded-lg p-8 text-center text-xl text-pure-white font-light even:bg-gray-600 dark:even:bg-app-semi-dark-blue ${oddBgColor}`}
+        className={`card-hover-animation m-2 flex h-44 w-44 grow items-center justify-center rounded-lg p-8 text-center text-xl font-medium even:bg-app-semi-dark-blue ${oddBgColor}`}
       >
         {text}
       </a>

components/CardImage.js

@@ -24,7 +24,7 @@ export default function CardImage({ isTrending, src, alt }) {
         />
       </div>
       {/* TODO: Add this back only after the bookmark feature is implemented */}
-      {/* <div className="group absolute top-2 right-2 flex h-8 w-8 cursor-pointer items-center justify-center rounded-full bg-app-dark-blue opacity-50 hover:bg-light-white hover:opacity-100">
+      {/* <div className="group absolute top-2 right-2 flex h-8 w-8 cursor-pointer items-center justify-center rounded-full bg-app-dark-blue opacity-50 hover:bg-app-pure-white hover:opacity-100">
         <IconBookmarkEmpty className="group-hover:app-transition fill-transparent stroke-app-pure-white group-hover:stroke-black" />
       </div> */}
     </div>

components/CardImageCW.js

@@ -1,30 +0,0 @@
-import Image from 'next/image'
-import {shimmer, toBase64} from '../utils'
-
-export default function CardImageCW({src, alt}) {
-    return (
-        <div className='relative  rounded-lg'>
-            <div
-                className={
-                    'relative h-[140px] w-[240px] after:absolute after:top-0 after:right-0 after:bottom-0 after:left-0 after:bg-app-dark-blue after:opacity-50 after:content-[""] sm:h-[180px] sm:w-[420px]'
-                }>
-                <Image
-                    className='rounded-lg'
-                    src={src}
-                    alt={alt}
-                    layout='fill'
-                    objectFit='cover'
-                    placeholder='blur'
-                    blurDataURL={`data:image/svg+xml;base64,${toBase64(
-                        shimmer(240, 140)
-                    )}`}
-                    unoptimized
-                />
-            </div>
-            {/* TODO: Add this back only after the bookmark feature is implemented */}
-            {/* <div className="group absolute top-2 right-2 flex h-8 w-8 cursor-pointer items-center justify-center rounded-full bg-app-dark-blue opacity-50 hover:bg-light-white hover:opacity-100">
-        <IconBookmarkEmpty className="group-hover:app-transition fill-transparent stroke-app-pure-white group-hover:stroke-black" />
-      </div> */}
-        </div>
-    )
-}

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'
           : null
       }
     >
@@ -20,7 +20,7 @@ export default function CardInfo({
         className={
           isTrending
             ? 'mt-2 mb-1 flex text-[11px] font-light text-app-pure-white md:text-[15px]'
-            : 'mt-2 mb-1 flex text-[11px] font-light text-black dark:text-app-pure-white md:text-[15px]'
+            : 'mt-2 mb-1 flex text-[11px] font-light text-app-grey md:text-[13px]'
         }
       >
         <p>{renderYear(year)}</p>
@@ -43,7 +43,7 @@ export default function CardInfo({
         className={
           isTrending
             ? 'md:heading-sm text-ellips w-[200px] truncate text-sm font-bold capitalize text-app-pure-white sm:w-[420px] md:h-6'
-            : 'md:heading-xs text-ellips w-[150px] truncate text-sm font-bold capitalize text-black dark:text-app-pure-white sm:w-[180px] md:w-[200px] lg:w-[268px]'
+            : 'md:heading-xs text-ellips w-[150px] truncate text-sm font-bold capitalize text-app-pure-white sm:w-[180px] md:w-[200px] lg:w-[268px]'
         }
       >
         {title}
@@ -52,7 +52,7 @@ export default function CardInfo({
   )
 }
 
-export function renderYear(year) {
+function renderYear(year) {
   if (!year) {
     return 'N/A'
   } else {
@@ -60,15 +60,15 @@ export function renderYear(year) {
   }
 }
 
-export function renderCategoryIcon(category) {
+function renderCategoryIcon(category) {
   if (category === 'movie') {
-    return <IconCategoryMovie className='pl-1 text-base dark:fill-white fill-black ' />
+    return <IconCategoryMovie className='pl-1 text-base' />
   } else {
     return <IconCategoryTv className='pl-1 text-base' />
   }
 }
 
-export function renderCategoryText(category) {
+function renderCategoryText(category) {
   if (category === 'movie') {
     return 'Movie'
   } else {
@@ -76,7 +76,7 @@ export function renderCategoryText(category) {
   }
 }
 
-export function renderRating(rating) {
+function renderRating(rating) {
   if (rating === true) {
     return '18+'
   } else {

components/CardInfoCW.js

@@ -1,45 +0,0 @@
-import {renderYear} from "../pages/movie/[id]";
-import {renderCategoryIcon, renderCategoryText} from "./CardInfo";
-
-export default function CardInfoCW({
-                                     category,
-                                     title,
-                                     rating,
-                                     year,
-                                 }) {
-    return (
-        <div
-            className={
-                'absolute left-4 bottom-4 z-40 h-fit w-full truncate text-ellipsis '
-            }
-        >
-            <div
-                className={
-                    'mt-2 mb-1 flex text-[11px] font-light text-app-pure-white md:text-[15px]'
-                }
-            >
-                <p>{renderYear(year)}</p>
-                <div
-                    className={
-                        'flex items-center px-[8px] before:content-["•"]'
-                    }
-                >
-                    {renderCategoryIcon(category)}
-                    <p className={ 'pl-[6px] pr-[6px]' }>
-                        {renderCategoryText(category)}
-                    </p>
-                </div>
-                {/*TODO: Add this back only after I find an appropriate way to get the rating info from TMDB api */}
-                {/*<p>{renderRating(rating)}</p> */}
-            </div>
-            <h2
-                className={
-                    'md:heading-sm text-ellips w-[200px] truncate text-sm font-bold capitalize text-app-pure-white sm:w-[420px] md:h-6'
-                }
-            >
-                {title}
-            </h2>
-        </div>
-    )
-}
-

components/CardNormal.js

@@ -5,25 +5,17 @@ import CardInfo from './CardInfo'
 export default function CardNormal({ id, category, rating, src, title, year }) {
   const router = useRouter()
 
-  const handleClick = (e) => {
-      if (e.ctrlKey) {
-          if (category === 'movie') {
-              window.open(`/movie/${id}`)
-          } else if (category === 'tv') {
-              window.open(`/tv/${id}`)
-          }
-      } else {
-          if (category === 'movie') {
-              router.push(`/movie/${id}`)
-          } else if (category === 'tv') {
-              router.push(`/tv/${id}`)
-          }
-      }
+  const handleClick = () => {
+    if (category === 'movie') {
+      router.push(`/movie/${id}`)
+    } else if (category === 'tv') {
+      router.push(`/tv/${id}`)
+    }
   }
 
   return (
     <div
-      className='transition duration-300 ease-in-out hover:scale-110 mb-4 grow basis-1/5 2xs:w-[130px] xs:w-full cursor-pointer'
+      className='card-hover-animation mb-4 grow basis-1/5 2xs:w-[130px] xs:w-full cursor-pointer'
       onClick={handleClick}>
       <CardImage src={src} alt={title} />
       <CardInfo

components/CardTrending.js

@@ -1,44 +1,36 @@
-import {useRouter} from 'next/router'
+import { useRouter } from 'next/router'
 import CardImage from './CardImage'
 import CardInfo from './CardInfo'
 
 export default function CardTrending({
-                                         id,
-                                         category,
-                                         rating,
-                                         src,
-                                         title,
-                                         year,
-                                     }) {
-    const router = useRouter()
+  id,
+  category,
+  rating,
+  src,
+  title,
+  year,
+}) {
+  const router = useRouter()
 
-    const handleClick = (e) => {
-        if (e.ctrlKey) {
-            if (category === 'movie') {
-                window.open(`/movie/${id}`)
-            } else if (category === 'tv') {
-                window.open(`/tv/${id}`)
-            }
-        } else {
-            if (category === 'movie') {
-                router.push(`/movie/${id}`)
-            } else if (category === 'tv') {
-                router.push(`/tv/${id}`)
-            }
-        }
+  const handleClick = () => {
+    if (category === 'movie') {
+      router.push(`/movie/${id}`)
+    } else if (category === 'tv') {
+      router.push(`/tv/${id}`)
     }
+  }
 
-    return (
-        <a className='relative w-full top-[100%] cursor-pointer' target={"_blank"} onClick={handleClick}>
-            <CardImage isTrending src={src} alt={title}/>
-            <CardInfo
-                isTrending
-                id={id}
-                category={category}
-                rating={rating}
-                title={title}
-                year={year}
-            />
-        </a>
-    )
+  return (
+    <div className='relative w-full cursor-pointer' onClick={handleClick}>
+      <CardImage isTrending src={src} alt={title} />
+      <CardInfo
+        isTrending
+        id={id}
+        category={category}
+        rating={rating}
+        title={title}
+        year={year}
+      />
+    </div>
+  )
 }

components/Collection.js

@@ -1,56 +1,57 @@
 import useSWR from 'swr'
-import {fetcher, renderResults, sliceArray} from '../utils'
+import { getUrl2 } from '../lib/tmdb'
+import { fetcher, renderResults, sliceArray } from '../utils'
 import CardNormal from './CardNormal'
 import Heading from './Heading'
 import Loading from './Loading'
 
 export default function Collection({
-                                       Component = CardNormal,
-                                       endpoint,
-                                       href,
-                                       isHomePage,
-                                       isTrending,
-                                       limit = 8,
-                                       media_type = 'movie',
-                                       title,
-                                       type = 'movie'
-                                   }) {
-    const {data, error} = useSWR(endpoint, fetcher)
-    if (error) return <div>Error occurred</div>
-    return (
-        <div className={"relative"}>
-            {data ? (
-                <section
-                    className={
-                        isTrending
-                            ? 'mb-6 h-full w-full overflow-hidden md:mb-10 lg:overflow-visible '
-                            : 'mb-6 md:mb-10'
-                    }>
+  Component = CardNormal,
+  endpoint,
+  href,
+  isHomePage,
+  isTrending,
+  limit = 8,
+  media_type = 'movie',
+  title,
+  type = 'movie'
+}) {
+  const { data, error } = useSWR(endpoint, fetcher)
 
-                    <Heading
-                        title={title}
-                        href={href}
-                        isHomePage={isHomePage}
-                        isTrending={isTrending}
-                        media_type={type}
-                    />
-                    <section
-                        className={
-                            isTrending
-                                ? 'h-scroll relative flex gap-x-4 overflow-x-scroll sm:gap-x-10 2xs:mt-2'
-                                : 'card-collection-wrapper'
-                        }>
+  if (error) return <div>Error occurred</div>
 
-                        {renderResults(
-                            sliceArray(data.results || [], limit),
-                            Component,
-                            media_type
-                        )}
-                    </section>
-                </section>
-            ) : (
-                <Loading/>
+  return (
+    <>
+      {data ? (
+        <section
+          className={
+            isTrending
+              ? 'mb-6 h-full w-full overflow-hidden md:mb-10 lg:overflow-visible'
+              : 'mb-6 md:mb-10'
+          }>
+          <Heading
+            title={title}
+            href={href}
+            isHomePage={isHomePage}
+            isTrending={isTrending}
+            media_type={type}
+          />
+          <section
+            className={
+              isTrending
+                ? 'h-scroll relative flex gap-x-4 overflow-x-scroll sm:gap-x-10 2xs:mt-2'
+                : 'card-collection-wrapper'
+            }>
+            {renderResults(
+              sliceArray(data.results || [], limit),
+              Component,
+              media_type
             )}
-        </div>
-    )
+          </section>
+        </section>
+      ) : (
+        <Loading />
+      )}
+    </>
+  )
 }

components/CollectionContinueWatching.js

@@ -1,137 +0,0 @@
-import {useEffect, useState} from "react";
-import CardContinueWatching from "./CardContinueWatching";
-import {TMDB_IMAGE_ENDPOINT} from "../utils";
-import {useRouter} from "next/router";
-import Heading from "./Heading";
-import Loading from "./Loading";
-
-
-export default function Collection({}) {
-    const [data, setData] = useState([]);
-    const router = useRouter();
-    const [dataLoaded, setDataLoaded] = useState(false)
-    const [dataEmpty, changeDataStatus] = useState(false)
-    const clear = () => {
-        setData([]);
-        changeDataStatus(true);
-        if (localStorage) {
-            localStorage.removeItem("userWatched");
-        }
-    }
-    const clear_movie = (id, category) => {
-        setDataLoaded(false)
-        if (localStorage) {
-            if (category === "tv") {
-                let data = JSON.parse(localStorage.getItem("userWatched")).tv;
-                let out = []
-                for (let i in data) {
-                    if (data[i][0] !== id) {
-                        out.push(data[i])
-                    }
-                }
-                let new_data = {movies: JSON.parse(localStorage.getItem("userWatched")).movies, tv: out}
-                localStorage.setItem("userWatched", JSON.stringify(new_data));
-            } else {
-                let data = JSON.parse(localStorage.getItem("userWatched")).movies;
-                let out = []
-                for (let i in data) {
-                    if (data[i] !== id) {
-                        out.push(data[i])
-                    }
-                }
-                let new_data = {tv: JSON.parse(localStorage.getItem("userWatched")).tv, movies: out}
-                localStorage.setItem("userWatched", JSON.stringify(new_data));
-            }
-        }
-
-    }
-    /*Note : Currently fetching the data for tv and movie one by one based on the id stored in local storage. */
-    useEffect(() => {
-            const res = async () => {
-                if (localStorage.getItem("userWatched")) {
-                    if (JSON.parse(localStorage.getItem("userWatched")).movies.length === 0 && JSON.parse(localStorage.getItem("userWatched")).tv.length === 0) {
-                        changeDataStatus(true)
-                        setDataLoaded(true)
-                    } else {
-                        const movieIds = JSON.parse(localStorage.getItem("userWatched")).movies
-                        let watchedData = []
-                        for (let i in movieIds) {
-                            await fetch(`${router.asPath}api/movie/${movieIds[i]}`, {
-                                credentials: "include"
-                            }).then(response => response.json()).then(da => {
-                                watchedData.push({
-                                    id: movieIds[i],
-                                    name: da.detail.original_title,
-                                    year: da.detail.release_date.split('-')[0],
-                                    poster_link: da.detail.backdrop_path ? `${TMDB_IMAGE_ENDPOINT}/${da.detail.backdrop_path}` : `${TMDB_IMAGE_ENDPOINT}/${da.detail.poster_path}`,
-                                    type: 'movie'
-                                });
-                            })
-                        }
-                        const tvIds = JSON.parse(localStorage.getItem("userWatched")) ? JSON.parse(localStorage.getItem("userWatched")).tv : ""
-                        for (let i in tvIds) {
-                            if (tvIds[i] !== [])
-                                await fetch(`${router.asPath}api/tv/${tvIds[i][0]}`, {
-                                    credentials: "include"
-                                }).then(response => response.json()).then(da => {
-                                    watchedData.push({
-                                        id: tvIds[i][0],
-                                        name: da.detail.name + ` S${tvIds[i][1]} E${tvIds[i][2]}`,
-                                        year: da.detail.first_air_date ? da.detail.first_air_date.split("-")[0] : "",
-                                        poster_link: da.detail.backdrop_path ? `${TMDB_IMAGE_ENDPOINT}/${da.detail.backdrop_path}` : `${TMDB_IMAGE_ENDPOINT}/${da.detail.poster_path}`,
-                                        type: 'tv'
-                                    });
-                                })
-                        }
-                        setData(watchedData)
-                        setDataLoaded(true)
-                        changeDataStatus(false)
-                    }
-                } else {
-                    setDataLoaded(true)
-                    changeDataStatus(true)
-                }
-            }
-            res();
-        }
-        ,
-        [dataLoaded]
-    )
-    ;
-    return (
-        <div className={"relative"}>
-            {dataLoaded ? (
-                !dataEmpty ?
-                    <section
-                        className={
-                            'mb-6 md:mb-10'
-                        }>
-                        <Heading title={"Continue Watching"} clearHistoryFunction={clear} href={""} isHomePage
-                                 media_type={"all"}
-                                 iscontinue_watching={true}/>
-                        <section
-                            className={
-                                ' w-[100%] gap-5 overflow-x-scroll pb-2 '
-                            }>
-                            <ul className={"flex gap-10 flex-row"}>
-                                {
-                                    data.map((data, index) => {
-                                        return (<li key={index}>
-                                                <CardContinueWatching category={data.type} id={data.id}
-                                                                      title={data.name}
-                                                                      clearHistoryFunction={clear_movie}
-                                                                      year={data.year}
-                                                                      src={data.poster_link}/>
-                                            </li>
-                                        )
-                                    })
-                                }
-
-                            </ul>
-                        </section>
-                    </section>
-                    : ""
-            ) : <Loading/>}
-        </div>
-    )
-}

components/FilmCasts.js

@@ -17,7 +17,7 @@ function renderCasts(arr) {
       return (
         <li
           key={cast.credit_id}
-          className='mr-2 mb-2 flex items-center justify-center rounded-md dark:border-app-pure-white border-app-dark-blue border-[1px] py-px px-2 text-app-dark-blue dark:text-app-pure-white'
+          className='mr-2 mb-2 flex items-center justify-center rounded-md border-[1px] py-px px-2 text-app-pure-white'
         >
           {cast.name}
         </li>

components/FilmGenres.js

@@ -15,7 +15,7 @@ function renderGenres(arr) {
       return (
         <li
           key={genre.id}
-          className='mr-2 mb-2 flex items-center justify-center rounded-md border-none bg-app-dark-blue dark:bg-light-white py-px px-2 text-center font-light text-app-pure-white dark:text-app-dark-blue'
+          className='mr-2 mb-2 flex items-center justify-center rounded-md border-none bg-app-pure-white py-px px-2 text-center font-medium text-app-dark-blue'
         >
           {genre.name}
         </li>

components/FilmHeading.js

@@ -1,17 +1,10 @@
-export default function FilmHeading({ tagline, title ,from}) {
+export default function FilmHeading({ tagline, title }) {
   return (
-    from === "movie"?
-    <div className='text-center mb-2 md:text-left'>
+    <div className='mt-6 mb-2 text-center md:mt-0 md:mb-4 md:text-left'>
       <h1 className='mb-1 text-3xl font-light md:mb-3 md:text-5xl'>{title}</h1>
-      <h2 className='text-xs font-light text-gray-600 dark:text-app-placeholder sm:text-sm md:text-lg'>
+      <h2 className='text-xs font-light text-app-placeholder sm:text-sm md:text-lg'>
         {tagline}
       </h2>
-    </div> :
-        <div className='mt-6 mb-2 text-center md:mt-0 md:mb-4 md:text-left'>
-            <h1 className='mb-1 text-3xl font-light md:mb-3 md:text-5xl'>{title}</h1>
-            <h2 className='text-xs font-light text-gray-600 dark:text-app-placeholder sm:text-sm md:text-lg'>
-                {tagline}
-            </h2>
-        </div>
+    </div>
   )
 }

components/FilmInfo.js

@@ -10,41 +10,41 @@ export default function FilmInfo({
   return (
     <>
       {media_type === 'movie' ? (
-        <div className='mb-6 flex items-center dark:text-app-placeholder text-app-dark-blue justify-between text-left text-sm lg:w-10/12 lg:text-lg'>
+        <div className='mb-6 flex items-center justify-between text-left text-sm lg:w-10/12 lg:text-lg'>
           <div>
-            <p className='mb-1 '>Length</p>
-            <p className=''>{length.split("?")[0]}</p>
+            <p className='mb-1 text-app-placeholder'>Length</p>
+            <p className='text-app-pure-white'>{length}</p>
           </div>
           <div>
-            <p className='mb-1 '>Language</p>
-            <p className=''>{language}</p>
+            <p className='mb-1 text-app-placeholder'>Language</p>
+            <p className='text-app-pure-white'>{language}</p>
           </div>
           <div>
-            <p className='mb-1'>Year</p>
-            <p className=''>{year}</p>
+            <p className='mb-1 text-app-placeholder'>Year</p>
+            <p className='text-app-pure-white'>{year}</p>
           </div>
           <div>
-            <p className='mb-1'>Status</p>
-            <p className=''>{status}</p>
+            <p className='mb-1 text-app-placeholder'>Status</p>
+            <p className='text-app-pure-white'>{status}</p>
           </div>
         </div>
       ) : (
-        <div className='mb-6 flex items-center justify-between text-left  dark:text-app-placeholder text-app-dark-blue  text-sm lg:w-11/12 lg:text-lg'>
+        <div className='mb-6 flex items-center justify-between text-left text-sm lg:w-11/12 lg:text-lg'>
           <div>
-            <p className='mb-1 '>Language</p>
-            <p className=''>{language}</p>
+            <p className='mb-1 text-app-placeholder'>Language</p>
+            <p className='text-app-pure-white'>{language}</p>
           </div>
           <div>
-            <p className='mb-1 '>First Air</p>
-            <p className=''>{firstAir}</p>
+            <p className='mb-1 text-app-placeholder'>First Air</p>
+            <p className='text-app-pure-white'>{firstAir}</p>
           </div>
           <div>
-            <p className='mb-1 '>Last Air</p>
-            <p className=''>{lastAir}</p>
+            <p className='mb-1 text-app-placeholder'>Last Air</p>
+            <p className='text-app-pure-white'>{lastAir}</p>
           </div>
           <div>
-            <p className='mb-1 '>Status</p>
-            <p className=''>{status}</p>
+            <p className='mb-1 text-app-placeholder'>Status</p>
+            <p className='text-app-pure-white'>{status}</p>
           </div>
         </div>
       )}

components/FilmRating.js

@@ -4,7 +4,7 @@ import Rating from 'react-rating'
 export default function FilmRating({ number }) {
   return (
     <div className='mb-6 flex flex-col items-center text-center md:flex-row md:items-center md:text-left'>
-      <p className='mb-2 text-4xl font-light md:mr-4 md:mb-0'>{number}</p>
+      <p className='mb-2 text-4xl font-medium md:mr-4 md:mb-0'>{number}</p>
       <Rating
         className='align-center flex self-center'
         initialRating={number}

components/FilmResources.js

@@ -1,12 +1,13 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import { useRouter } from 'next/router'
-import {  FaPlay } from 'react-icons/fa'
-import {BsDownload} from "react-icons/bs";
+import {  useState } from 'react'
+import { FaImdb, FaLink, FaPlay } from 'react-icons/fa'
 
 
 
  const  FilmResources = (props)=> {
   const router = useRouter()
-
+const [loader,setLoader]=useState(false)
 const handlegetLink =()=>{
   props?.handleClose()
 }
@@ -15,54 +16,37 @@ const handlegetLink =()=>{
   return (
     
     <div className='mb-10 flex flex-wrap'>
+    
+       
         {!props?.imdb ? null : (
        <a
           
        onClick={()=>handlegetLink()}
-       className='mb-4 mr-4 flex w-40 cursor-pointer items-center justify-between rounded-md border-none bg-app-dark-blue dark:bg-app-greyish-blue py-3 px-8 text-sm font-light text-app-pure-white hover:bg-app-dark-blue hover:text-blue-300 dark:hover:bg-light-white dark:hover:text-app-dark-blue'
+       className='mb-4 mr-4 flex w-40 cursor-pointer items-center justify-between rounded-md border-none bg-app-greyish-blue py-3 px-8 text-sm font-medium text-app-pure-white hover:bg-app-pure-white hover:text-app-dark-blue'
       
        rel='noreferrer'
      >
-           <BsDownload className={"text-base"}/>
        <p>Download</p>
-     
+       <FaLink className='text-base' />
      </a>
       )}
 
-   {!(props?.imdb||props?.tmdb) ? null : (
-       <a
-       onClick={()=>{
-         if(router?.pathname==="/tv/[id]"){
-          router.push(`/play/tv/?${props?.tmdb?(`tmdb=${props?.tmdb}`):(`id=${props?.imdb}`)}`)
-         }
-         else{
-          router.push(`/play/movies/?${props?.tmdb?(`tmdb=${props?.tmdb}`):(`id=${props?.imdb}`)}`)
-         }
-        
-        }}
-       className='mb-4 mr-4 flex w-40 cursor-pointer items-center justify-between rounded-md border-none bg-app-greyish-blue py-3 px-8 text-sm font-light text-app-pure-white hover:bg-app-pure-white hover:text-app-dark-blue'
-      
-       rel='noreferrer'
-     >
-        <FaPlay className='text-base' />
-       <p>Play Now</p>
-      
-     </a>
-      )}
-      {/* {!props?.imdb ? null : (
+
+     
+      {!props?.imdb ? null : (
         <a
           href={`https://www.imdb.com/title/${props?.imdb}`}
-          className='mb-4 flex w-40 cursor-pointer items-center justify-between rounded-md border-none bg-app-greyish-blue py-3 px-8 text-sm font-light text-app-pure-white hover:bg-light-white hover:text-app-dark-blue'
+          className='mb-4 flex w-40 cursor-pointer items-center justify-between rounded-md border-none bg-app-greyish-blue py-3 px-8 text-sm font-medium text-app-pure-white hover:bg-app-pure-white hover:text-app-dark-blue'
           target='_blank'
           rel='noreferrer'
         >
           <p>IMDB</p>
           <FaImdb className='text-base' />
         </a>
-      )} */}
+      )}
       {/* <a
         href={trailer}
-        className="mb-4 flex w-full cursor-pointer items-center justify-between rounded-md border-none bg-app-semi-dark-blue py-4 px-8 text-sm font-light text-app-pure-white hover:bg-app-greyish-blue">
+        className="mb-4 flex w-full cursor-pointer items-center justify-between rounded-md border-none bg-app-semi-dark-blue py-4 px-8 text-sm font-medium text-app-pure-white hover:bg-app-greyish-blue">
         <p>Trailer</p>
         <FaPlay className="text-base" />
       </a> */}

components/Heading.js

@@ -1,43 +1,34 @@
 import Link from 'next/link'
 
-
 export default function Heading({
-                                    href,
-                                    isHomePage,
-                                    isTrending, // TODO: Do we need this here?
-                                    media_type,
-                                    clearHistoryFunction,
-                                    iscontinue_watching,
-                                    title,
-                                }) {
-    return (
-        <div className='mb-4 flex items-end justify-between sm:mb-6'>
-            {isHomePage ? (
-                <div className='flex items-end'>
-                    <h2 className='section-title py-px sm:py-0 text-app-dark-blue dark:text-app-pure-white'>{title}</h2>
-                    {media_type && <p
-                        className={
-                            media_type === 'movie'
-                                ? 'ml-2 rounded-md border-2 py-px px-2 text-[8px] font-light border-app-dark-blue dark:border-app-pure-white uppercase tracking-wider text-app-dark-blue dark:text-app-pure-white sm:ml-4 sm:text-[10px]'
-                                : 'ml-2 rounded-md border-2 border-app-dark-blue dark:border-app-pure-white dark:bg-app-dark-blue bg-light-white py-px px-2 text-[8px] font-light uppercase tracking-wider dark:text-app-pure-white text-app-dark-blue sm:ml-4 sm:text-[10px] '
-                        }>
-                        {media_type}
-                    </p>}
-                </div>
-            ) : (
-                <h2 className='section-title'>{title}</h2>
-            )}
-            {iscontinue_watching &&
-                <div onClick={clearHistoryFunction}
-                     className='cursor-pointer text-xs font-medium uppercase tracking-wide text-app-greyish-blue hover:underline'>
-                    Clear history
-                </div>
-            }
-            {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>}
+  href,
+  isHomePage,
+  isTrending, // TODO: Do we need this here?
+  media_type,
+  title,
+}) {
+  return (
+    <div className='mb-4 flex items-end justify-between sm:mb-6'>
+      {isHomePage ? (
+        <div className='flex items-end'>
+          <h2 className='section-title py-px sm:py-0'>{title}</h2>
+          <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>
         </div>
-    )
+      ) : (
+        <h2 className='section-title'>{title}</h2>
+      )}
+      <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>
+    </div>
+  )
 }

components/Layout.js

@@ -1,13 +1,12 @@
 import Footer from './Footer'
 import Navigation from './Navigation'
-import { ThemeToggler } from './ThemeToggler'
 
 export default function Layout({ children }) {
   return (
-    <div className='e bg-light-white text-app-dark-blue dark:bg-app-dark-blue dark:text-app-pure-white lg:flex lg:items-center'>
+    <div className='text-app-pure-white lg:flex'>
       <Navigation />
-      <ThemeToggler parentComponent={"main"}/>
-      <main className='mx-0 flex flex-col overflow-visible bg-light-white  p-4 py-6   dark:bg-app-dark-blue md:m-6 md:px-0 md:pt-12 lg:ml-[10rem] lg:min-w-[800px] lg:grow'>
+      <main  className='mx-0 flex p-1 flex-col py-6 md:m-6 md:px-0 md:pt-0 lg:ml-[10rem] lg:min-w-[800px] lg:grow'>
+        <div className='py-1 md:rounded-[10px] head' style={{textAlign:"center"}}>Y.A.P.S [Yet Another Piracy Site]</div>
         {children}
         <Footer />
       </main>

components/Navigation.js

@@ -1,6 +1,7 @@
 import Link from 'next/link'
 import { useRouter } from 'next/router'
 import { useEffect, useState } from 'react'
+import AppIcon from './icons/AppIcon'
 import AppLogo from './icons/AppIcon'
 import IconNavHome from './icons/IconNavHome'
 import IconNavMovie from './icons/IconNavMovie'
@@ -8,8 +9,6 @@ import IconNavTv from './icons/IconNavTv'
 import NavigationIcon from './NavigationIcon'
 import 'react-tooltip/dist/react-tooltip.css'
 import { Tooltip } from 'react-tooltip'
-import { MdOutlineArrowBackIos } from 'react-icons/md'
-import {ThemeToggler} from "./ThemeToggler";
 
 export default function Navigation() {
   const router = useRouter()
@@ -18,189 +17,15 @@ export default function Navigation() {
     let temp = localStorage.getItem('access_token') || false
     setToken(temp)
   }, [])
-
-  //SideBar Hook
-  const [isOpen, setIsOpen] = useState(false)
-  const toggleSidebar = () => {
-    setIsOpen(!isOpen)
-  }
-
   return (
-    <nav className='bg-app-shady-white sticky top-0 z-50 flex items-center  justify-between p-5 shadow-md shadow-black dark:bg-app-semi-dark-blue md:mx-6 md:mb-[33px] md:mt-6 md:rounded-[10px] lg:fixed lg:left-0 lg:my-12 lg:mr-0 lg:h-5/6 lg:flex-col lg:py-9'>
-      <div
-        onClick={() => setIsOpen(false)}
-        className={`  overlay backdrop ${isOpen ? 'active' : ''}`}></div>
-      <div
-        className={` sidebar backdrop hide-scrollbar active ${
-          isOpen ? 'translate-x-0' : 'translate-x-[-100%]'
-        } `}>
-        <nav>
-          <ul className='ml-2 mt-4 '>
-            <li>
-              <button
-                className='duration-400 mb-3 flex items-baseline rounded-full bg-white  px-3 py-1  text-black hover:bg-gray-600 dark:bg-[#5a6a90] dark:text-gray-200'
-                onClick={() => {
-                  setIsOpen(false)
-                }}>
-                <span className='mr-1 self-center'>
-                  <MdOutlineArrowBackIos />
-                </span>
-                <div className=''>Close Menu</div>
-              </button>
-            </li>
-            <li
-              onClick={() => setIsOpen(false)}
-              className='m-2 cursor-pointer rounded-xl border-2 border-gray-400 p-4 dark:border-gray-900'>
-              <NavigationIcon href='/latest-top-10'>
-                <svg
-                  data-tooltip-id='my-tooltip'
-                  data-tooltip-content='Top10'
-                  width='24'
-                  height='24'
-                  fill='currentColor'
-                  className={
-                    router.pathname === '/latest-top-10'
-                      ? 'active-link'
-                      : 'icon-nav'
-                  }
-                  viewBox='0 0 16 16'>
-                  <path d='M8 16c3.314 0 6-2 6-5.5 0-1.5-.5-4-2.5-6 .25 1.5-1.25 2-1.25 2C11 4 9 .5 6 0c.357 2 .5 4-2 6-1.25 1-2 2.729-2 4.5C2 14 4.686 16 8 16Zm0-1c-1.657 0-3-1-3-2.75 0-.75.25-2 1.25-3C6.125 10 7 10.5 7 10.5c-.375-1.25.5-3.25 2-3.5-.179 1-.25 2 1 3 .625.5 1 1.364 1 2.25C11 14 9.657 815 8 15Z' />
-                </svg>
-                <p className='ml-2'>Top-10</p>
-              </NavigationIcon>
-            </li>
-            <li
-              onClick={() => setIsOpen(false)}
-              className='m-2 cursor-pointer rounded-xl border-2 border-gray-400 p-4 dark:border-gray-900 '>
-              <NavigationIcon href='/get-posts/category:Movies/'>
-                <svg
-                  data-tooltip-id='my-tooltip'
-                  data-tooltip-content='Browse'
-                  width='24'
-                  height='24'
-                  fill='currentColor'
-                  className={
-                    router.pathname === '/get-posts/[category]'
-                      ? 'active-link'
-                      : 'icon-nav'
-                  }
-                  viewBox='0 0 16 16'>
-                  <path d='M16 8a8.001 8.001 0 0 1-7.022 7.94l1.902-7.098a2.995 2.995 0 0 0 .05-1.492A2.977 2.977 0 0 0 10.237 6h5.511A8 8 0 0 1 16 8ZM0 8a8 8 0 0 0 7.927 8l1.426-5.321a2.978 2.978 0 0 1-.723.255 2.979 2.979 0 0 1-1.743-.147 2.986 2.986 0 0 1-1.043-.7L.633 4.876A7.975 7.975 0 0 0 0 8Zm5.004-.167L1.108 3.936A8.003 8.003 0 0 1 15.418 5H8.066a2.979 2.979 0 0 0-1.252.243 2.987 2.987 0 0 0-1.81 2.59ZM8 10a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z' />
-                </svg>
-                <p className='ml-2'>Browse</p>
-              </NavigationIcon>
-            </li>
-            <li
-              onClick={() => setIsOpen(false)}
-              className='m-2 cursor-pointer rounded-xl border-2 border-gray-400 p-4  dark:border-gray-900'>
-              <NavigationIcon href='/search'>
-                <svg
-                  data-tooltip-id='my-tooltip'
-                  data-tooltip-content='Search'
-                  width='24'
-                  height='24'
-                  fill='currentColor'
-                  className={
-                    router.pathname === '/search'
-                      ? 'active-link  !text-gray-600'
-                      : 'icon-nav'
-                  }
-                  viewBox='0 0 16 16'>
-                  <path d='M6.5 13a6.474 6.474 0 0 0 3.845-1.258h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.008 1.008 0 0 0-.115-.1A6.471 6.471 0 0 0 13 6.5 6.502 6.502 0 0 0 6.5 0a6.5 6.5 0 1 0 0 13Zm0-8.518c1.664-1.673 5.825 1.254 0 5.018-5.825-3.764-1.664-6.69 0-5.018Z' />
-                </svg>
-                <p className='ml-2'>Search</p>
-              </NavigationIcon>
-            </li>
-            <li
-              onClick={() => setIsOpen(false)}
-              className='m-2 cursor-pointer rounded-xl border-2 border-gray-400 p-4  dark:border-gray-900'>
-              <NavigationIcon href='/movie'>
-                <IconNavMovie />
-                <p className='ml-2'>Movie</p>
-              </NavigationIcon>
-            </li>
-            <li
-              onClick={() => setIsOpen(false)}
-              className='m-2 cursor-pointer rounded-xl border-2 border-gray-400 p-4  dark:border-gray-900'>
-              <NavigationIcon
-                href='/tv'
-                data-tooltip-id='my-tooltip'
-                data-tooltip-content='TV'>
-                <IconNavTv />
-                <p className='ml-2'>TV</p>
-              </NavigationIcon>
-            </li>
-            <li
-              onClick={() => setIsOpen(false)}
-              className='m-2 cursor-pointer rounded-xl border-2 border-gray-400 p-4 dark:border-gray-900'>
-              <NavigationIcon href={token ? '/upload' : '/login?page=upload'}>
-                <svg
-                  data-tooltip-id='my-tooltip'
-                  data-tooltip-content='Upload'
-                  width='24'
-                  height='24'
-                  fill='currentColor'
-                  className={
-                    router.pathname === '/upload' ? 'active-link' : 'icon-nav'
-                  }
-                  viewBox='0 0 16 16'>
-                  <path d='M8 2a5.53 5.53 0 0 0-3.594 1.342c-.766.66-1.321 1.52-1.464 2.383C1.266 6.095 0 7.555 0 9.318 0 11.366 1.708 13 3.781 13h8.906C14.502 13 16 11.57 16 9.773c0-1.636-1.242-2.969-2.834-3.194C12.923 3.999 10.69 2 8 2zm2.354 5.146a.5.5 0 0 1-.708.708L8.5 6.707V10.5a.5.5 0 0 1-1 0V6.707L6.354 7.854a.5.5 0 1 1-.708-.708l2-2a.5.5 0 0 1 .708 0l2 2z' />
-                </svg>
-                <p className='ml-2'>Upload</p>
-              </NavigationIcon>
-            </li>
-            <li
-              onClick={() => setIsOpen(false)}
-              className='m-2 cursor-pointer rounded-xl border-2 border-gray-400 p-4  dark:border-gray-900'>
-              {/* faq */}
-              <NavigationIcon href='/faq'>
-                <svg
-                  data-tooltip-id='my-tooltip'
-                  data-tooltip-content='FAQ'
-                  width='24'
-                  height='24'
-                  fill='currentColor'
-                  className={
-                    router.pathname === '/faq' ? 'active-link' : 'icon-nav'
-                  }
-                  viewBox='0 0 16 16'>
-                  <path d='M2 5C.892 5 0 5.892 0 7v7c0 1.108.892 2 2 2h9c1.108 0 2-.892 2-2v-3.8L16 7h-3c0-1.108-.892-2-2-2zm4.438 2C7.75 6.926 8.926 7.936 9 9.25c0 1.121-.308 1.544-1.281 2.281a1.68 1.68 0 00-.281.25c-.04.05-.032.033-.032.031.006.423-.39.782-.812.782a.79.79 0 01-.781-.782c0-.401.179-.754.375-1a3.14 3.14 0 01.562-.562 3.85 3.85 0 00.563-.531c.074-.09.097-.24.093-.344v-.031a.785.785 0 00-.843-.75c-.451.025-.813.362-.851.758a.697.697 0 01-.718.648.816.816 0 01-.781-.594 1.725 1.725 0 01.01-.533c.005-.014.006-.03.012-.043.202-1.024 1.09-1.768 2.203-1.83zm.156 6.406a.82.82 0 01.812.813c0 .442-.37.781-.812.781a.768.768 0 01-.781-.781c0-.442.339-.813.78-.813zM2 1C.892 1 0 1.892 0 3v.568A3.918 3.918 0 012 3h9c1.376 0 2.55.763 3.268 1.848L16 3h-3c0-1.108-.892-2-2-2z' />
-                </svg>
-                <p className='ml-2'>Help Center</p>
-              </NavigationIcon>
-            </li>
-            <li>
-              <ThemeToggler parentComponent={"sidebar"}/>
-            </li>
-          </ul>
-        </nav>
-      </div>
-
-      <div className='flex gap-5'>
-        <div className='cursor-pointer lg:hidden' onClick={toggleSidebar}>
-          <svg
-            data-tooltip-id='my-tooltip'
-            xmlns='http://www.w3.org/2000/svg'
-            width='24'
-            height='24'
-            fill='hsl(223, 23%, 46%)'
-            className={
-              router.pathname === '/latest-top-10' ? 'active-link' : 'icon-nav'
-            }
-            viewBox='0 0 50 50'>
-            <path d='M 0 7.5 L 0 12.5 L 50 12.5 L 50 7.5 Z M 0 22.5 L 0 27.5 L 50 27.5 L 50 22.5 Z M 0 37.5 L 0 42.5 L 50 42.5 L 50 37.5 Z'></path>
-          </svg>
-        </div>
-
-        <Tooltip id='my-tooltip' place='bottom-start' events='hover' />
-        <Link href='/' passHref>
-          <a>
-            <AppLogo />
-          </a>
-        </Link>
-      </div>
-
-      <div className='nav-res flex w-1/2 items-center justify-between max-lg:hidden 2xs:w-[70%] lg:my-5 lg:h-[300px] lg:flex-col'>
+    <nav className='sticky top-0 z-50 flex items-center justify-between bg-app-semi-dark-blue p-5 md:mx-6 md:mt-6 md:mb-[33px] md:rounded-[10px] lg:fixed lg:left-0 lg:mr-0 lg:h-5/6 lg:flex-col lg:py-9'>
+      <Tooltip id="my-tooltip" place="bottom-start" events="hover" />
+      <Link href='/' passHref>
+        <a>
+          <AppLogo />
+        </a>
+      </Link>
+      <div className='flex w-1/2 items-center justify-between lg:h-[400px] lg:flex-col 2xs:w-[70%] nav-res'>
         {/* <NavigationIcon href='/'>
           <svg
             className={router.pathname === '/' ? 'active-link' : 'icon-nav'}
@@ -212,131 +37,109 @@ export default function Navigation() {
             <path d='m14 9.293-6-6-6 6V13.5A1.5 1.5 0 0 0 3.5 15h9a1.5 1.5 0 0 0 1.5-1.5V9.293Zm-6-.811c1.664-1.673 5.825 1.254 0 5.018-5.825-3.764-1.664-6.691 0-5.018Z' />
           </svg>
         </NavigationIcon> */}
-        <NavigationIcon href='/latest-top-10'>
+        <NavigationIcon href='/latest-top-10'  >
+         
           <svg
-            data-tooltip-id='my-tooltip'
-            data-tooltip-content='Top10'
+           data-tooltip-id="my-tooltip"
+           data-tooltip-content="Top10"
             width='24'
             height='24'
             fill='currentColor'
             className={
-              router.pathname === '/latest-top-10' ? 'active-link' : 'icon-nav'
+              router.pathname == '/latest-top-10' ? 'active-link' : 'icon-nav'
             }
             viewBox='0 0 16 16'>
             <path d='M8 16c3.314 0 6-2 6-5.5 0-1.5-.5-4-2.5-6 .25 1.5-1.25 2-1.25 2C11 4 9 .5 6 0c.357 2 .5 4-2 6-1.25 1-2 2.729-2 4.5C2 14 4.686 16 8 16Zm0-1c-1.657 0-3-1-3-2.75 0-.75.25-2 1.25-3C6.125 10 7 10.5 7 10.5c-.375-1.25.5-3.25 2-3.5-.179 1-.25 2 1 3 .625.5 1 1.364 1 2.25C11 14 9.657 15 8 15Z' />
           </svg>
         </NavigationIcon>
 
-        <NavigationIcon href='/get-posts/category:Movies/'>
+        <div onClick={()=> window.location.href="/get-posts/category:Movies/"}>
           <svg
-            data-tooltip-id='my-tooltip'
-            data-tooltip-content='Browse'
+          data-tooltip-id="my-tooltip"
+          data-tooltip-content="Browse"
             width='24'
             height='24'
             fill='currentColor'
             className={
-              router.pathname === '/get-posts/[category]'
+              router.pathname == '/get-posts/[category]'
                 ? 'active-link'
                 : 'icon-nav'
-            }
+              }
             viewBox='0 0 16 16'>
-            <path d='M16 8a8.001 8.001 0 0 1-7.022 7.94l1.902-7.098a2.995 2.995 0 0 0 .05-1.492A2.977 2.977 0 0 0 10.237 6h5.511A8 8 0 0 1 16 8ZM0 8a8 8 0 0 0 7.927 8l1.426-5.321a2.978 2.978 0 0 1-.723.255 2.979 2.979 0 0 1-1.743-.147 2.986 2.986 0 0 1-1.043-.7L.633 4.876A7.975 7.975 0 0 0 0 8Zm5.004-.167L1.108 3.936A8.003 8.003 0 0 1 15.418 5H8.066a2.979 2.979 0 0 0-1.252.243 2.987 2.987 0 0 0-1.81 2.59ZM8 10a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z' />
+            <path
+             
+              d='M16 8a8.001 8.001 0 0 1-7.022 7.94l1.902-7.098a2.995 2.995 0 0 0 .05-1.492A2.977 2.977 0 0 0 10.237 6h5.511A8 8 0 0 1 16 8ZM0 8a8 8 0 0 0 7.927 8l1.426-5.321a2.978 2.978 0 0 1-.723.255 2.979 2.979 0 0 1-1.743-.147 2.986 2.986 0 0 1-1.043-.7L.633 4.876A7.975 7.975 0 0 0 0 8Zm5.004-.167L1.108 3.936A8.003 8.003 0 0 1 15.418 5H8.066a2.979 2.979 0 0 0-1.252.243 2.987 2.987 0 0 0-1.81 2.59ZM8 10a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z'
+            />
           </svg>
-        </NavigationIcon>
+        </div>
 
         <NavigationIcon href='/search'>
           <svg
-            data-tooltip-id='my-tooltip'
-            data-tooltip-content='Search'
+          data-tooltip-id="my-tooltip"
+          data-tooltip-content="Search"
             width='24'
             height='24'
             fill='currentColor'
             className={
-              router.pathname === '/search' ? 'active-link' : 'icon-nav'
+              router.pathname == '/search' ? 'active-link' : 'icon-nav'
             }
             viewBox='0 0 16 16'>
             <path d='M6.5 13a6.474 6.474 0 0 0 3.845-1.258h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.008 1.008 0 0 0-.115-.1A6.471 6.471 0 0 0 13 6.5 6.502 6.502 0 0 0 6.5 0a6.5 6.5 0 1 0 0 13Zm0-8.518c1.664-1.673 5.825 1.254 0 5.018-5.825-3.764-1.664-6.69 0-5.018Z' />
           </svg>
         </NavigationIcon>
 
-        <NavigationIcon href='/movie'>
+
+        <NavigationIcon href='/movie' >
           <IconNavMovie />
         </NavigationIcon>
-        <NavigationIcon
-          href='/tv'
-          data-tooltip-id='my-tooltip'
-          data-tooltip-content='TV'>
+        <NavigationIcon href='/tv' data-tooltip-id="my-tooltip"
+          data-tooltip-content="TV">
           <IconNavTv />
         </NavigationIcon>
         <NavigationIcon href={token ? '/upload' : '/login?page=upload'}>
           <svg
-            data-tooltip-id='my-tooltip'
-            data-tooltip-content='Upload'
+          data-tooltip-id="my-tooltip"
+          data-tooltip-content="Upload"
             width='24'
             height='24'
             fill='currentColor'
             className={
-              router.pathname === '/upload' ? 'active-link' : 'icon-nav'
+              router.pathname == '/upload' ? 'active-link' : 'icon-nav'
             }
             viewBox='0 0 16 16'>
             <path d='M8 2a5.53 5.53 0 0 0-3.594 1.342c-.766.66-1.321 1.52-1.464 2.383C1.266 6.095 0 7.555 0 9.318 0 11.366 1.708 13 3.781 13h8.906C14.502 13 16 11.57 16 9.773c0-1.636-1.242-2.969-2.834-3.194C12.923 3.999 10.69 2 8 2zm2.354 5.146a.5.5 0 0 1-.708.708L8.5 6.707V10.5a.5.5 0 0 1-1 0V6.707L6.354 7.854a.5.5 0 1 1-.708-.708l2-2a.5.5 0 0 1 .708 0l2 2z' />
           </svg>
         </NavigationIcon>
-        {/* faq */}
-        <NavigationIcon href='/faq'>
-          <svg
-            data-tooltip-id='my-tooltip'
-            data-tooltip-content='FAQ'
-            width='24'
-            height='24'
-            fill='currentColor'
-            className={router.pathname === '/faq' ? 'active-link' : 'icon-nav'}
-            viewBox='0 0 16 16'>
-            <path d='M2 5C.892 5 0 5.892 0 7v7c0 1.108.892 2 2 2h9c1.108 0 2-.892 2-2v-3.8L16 7h-3c0-1.108-.892-2-2-2zm4.438 2C7.75 6.926 8.926 7.936 9 9.25c0 1.121-.308 1.544-1.281 2.281a1.68 1.68 0 00-.281.25c-.04.05-.032.033-.032.031.006.423-.39.782-.812.782a.79.79 0 01-.781-.782c0-.401.179-.754.375-1a3.14 3.14 0 01.562-.562 3.85 3.85 0 00.563-.531c.074-.09.097-.24.093-.344v-.031a.785.785 0 00-.843-.75c-.451.025-.813.362-.851.758a.697.697 0 01-.718.648.816.816 0 01-.781-.594 1.725 1.725 0 01.01-.533c.005-.014.006-.03.012-.043.202-1.024 1.09-1.768 2.203-1.83zm.156 6.406a.82.82 0 01.812.813c0 .442-.37.781-.812.781a.768.768 0 01-.781-.781c0-.442.339-.813.78-.813zM2 1C.892 1 0 1.892 0 3v.568A3.918 3.918 0 012 3h9c1.376 0 2.55.763 3.268 1.848L16 3h-3c0-1.108-.892-2-2-2z' />
-          </svg>
-        </NavigationIcon>
 
+     
         {token ? (
-          <NavigationIcon href='/dashboard'>
+          <NavigationIcon href='/dashboard' >
             <IconNavHome />
           </NavigationIcon>
         ) : null}
       </div>
-      <div style={{ cursor: 'pointer' }}>
-        {token ? (
+      <div style={{ cursor: "pointer" }}>
+        {token ? <svg xmlns="http://www.w3.org/2000/svg"
+        data-tooltip-id="my-tooltip"
+        data-tooltip-content="Logout"
+         onClick={() => {
+          localStorage.clear()
+          window.location.href = "/"
+        }} width="24" height="24" fill="currentColor" className="icon-nav" viewBox="0 0 16 16">
+          <path fillRule="evenodd" d="M6 3.5a.5.5 0 0 1 .5-.5h8a.5.5 0 0 1 .5.5v9a.5.5 0 0 1-.5.5h-8a.5.5 0 0 1-.5-.5v-2a.5.5 0 0 0-1 0v2A1.5 1.5 0 0 0 6.5 14h8a1.5 1.5 0 0 0 1.5-1.5v-9A1.5 1.5 0 0 0 14.5 2h-8A1.5 1.5 0 0 0 5 3.5v2a.5.5 0 0 0 1 0v-2z" />
+          <path fillRule="evenodd" d="M11.854 8.354a.5.5 0 0 0 0-.708l-3-3a.5.5 0 1 0-.708.708L10.293 7.5H1.5a.5.5 0 0 0 0 1h8.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3z" />
+        </svg>
+          :
           <svg
-            xmlns='http://www.w3.org/2000/svg'
-            data-tooltip-id='my-tooltip'
-            data-tooltip-content='Logout'
-            onClick={() => {
-              localStorage.clear()
-              window.location.href = '/'
-            }}
+          data-tooltip-id="my-tooltip"
+          data-tooltip-content="Login"
+          onClick={() => { 
+            router.push("/login")
+          }}
             width='24'
             height='24'
             fill='currentColor'
-            className='icon-nav'
-            viewBox='0 0 16 16'>
-            <path
-              fillRule='evenodd'
-              d='M6 3.5a.5.5 0 0 1 .5-.5h8a.5.5 0 0 1 .5.5v9a.5.5 0 0 1-.5.5h-8a.5.5 0 0 1-.5-.5v-2a.5.5 0 0 0-1 0v2A1.5 1.5 0 0 0 6.5 14h8a1.5 1.5 0 0 0 1.5-1.5v-9A1.5 1.5 0 0 0 14.5 2h-8A1.5 1.5 0 0 0 5 3.5v2a.5.5 0 0 0 1 0v-2z'
-            />
-            <path
-              fillRule='evenodd'
-              d='M11.854 8.354a.5.5 0 0 0 0-.708l-3-3a.5.5 0 1 0-.708.708L10.293 7.5H1.5a.5.5 0 0 0 0 1h8.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3z'
-            />
-          </svg>
-        ) : (
-          <svg
-            data-tooltip-id='my-tooltip'
-            data-tooltip-content='Login'
-            onClick={() => {
-              router.push('/login')
-            }}
-            width='24'
-            height='24'
-            fill='currentColor'
-            className={router.pathname === '/login' ? 'active-link' : 'icon-nav'}
+            className={router.pathname == '/login' ? 'active-link' : 'icon-nav'}
             viewBox='0 0 16 16'>
             <path
               fillRule='evenodd'
@@ -347,7 +150,7 @@ export default function Navigation() {
               d='M4.146 8.354a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L5.707 7.5H14.5a.5.5 0 0 1 0 1H5.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3z'
             />
           </svg>
-        )}
+        }
       </div>
     </nav>
   )

components/NavigationIcon.js

@@ -3,9 +3,7 @@ import Link from 'next/link'
 export default function NavigationIcon({ children, href }) {
   return (
     <Link href={href} passHref>
-      <a className='flex cursor-pointer text-white dark:text-white'>
-        {children}
-      </a>
+      <a className='cursor-pointer'>{children}</a>
     </Link>
   )
 }

components/Pagination.js

@@ -18,15 +18,15 @@ export default function Pagination({
           onClick={goToPreviousPage}
           className={
             isFirst
-              ? 'disabled-link flex cursor-not-allowed items-center justify-center rounded-lg rounded-r-none border-2 py-2 pl-4 pr-6 font-light'
-              : 'flex items-center justify-center rounded-lg rounded-r-none border-2 py-2 pl-4 pr-6 font-light hover:bg-light-white hover:text-app-dark-blue'
+              ? 'disabled-link flex cursor-not-allowed items-center justify-center rounded-lg rounded-r-none border-2 py-2 pl-4 pr-6 font-medium'
+              : 'flex items-center justify-center rounded-lg rounded-r-none border-2 py-2 pl-4 pr-6 font-medium hover:bg-app-pure-white hover:text-app-dark-blue'
           }
         >
           <TiArrowLeftThick className='mr-2' />
           <span>Prev</span>
         </a>
       </Link>
-      <p className='border-t-2 border-b-2 bg-light-white dark:bg-app-greyish-blue py-2 px-4 dark:text-app-pure-white text-app-dark-blue'>
+      <p className='border-t-2 border-b-2 bg-app-pure-white py-2 px-4 text-app-dark-blue'>
         Page {currentPage} of {totalPages}
       </p>
       <Link href={nextHref} as={nextHref}>
@@ -34,8 +34,8 @@ export default function Pagination({
           onClick={goToNextPage}
           className={
             isLast
-              ? 'disabled-link flex cursor-not-allowed items-center justify-center rounded-lg rounded-l-none border-2 py-2 pr-4 pl-6 font-light'
-              : 'flex items-center justify-center rounded-lg rounded-l-none border-2 py-2 pr-4 pl-6 font-light hover:bg-light-white hover:text-app-dark-blue'
+              ? 'disabled-link flex cursor-not-allowed items-center justify-center rounded-lg rounded-l-none border-2 py-2 pr-4 pl-6 font-medium'
+              : 'flex items-center justify-center rounded-lg rounded-l-none border-2 py-2 pr-4 pl-6 font-medium hover:bg-app-pure-white hover:text-app-dark-blue'
           }
         >
           <span>Next</span>

components/SearchBar.js

@@ -1,37 +1,36 @@
-import {useRouter} from 'next/router'
-import {useState} from 'react'
+import { useRouter } from 'next/router'
+import { useState } from 'react'
 import IconSearch from './icons/IconSearch'
 import SearchButton from './SearchButton'
-import {useTheme} from "next-themes";
 
 export default function SearchBar({
-                                      placeholder = 'Search for movies or TV series',
-                                      searchPath,
-                                  }) {
-    const router = useRouter()
-    const [query, setQuery] = useState('')
-    const { theme, setTheme } = useTheme()
-    const handleSearch = e => {
-        e.preventDefault()
-        if (query.length === 0) {
-            return
-        } else {
-            router.push(`${searchPath}${query.trim()}?page=1`)
-            setQuery('')
-        }
-    }
+  placeholder = 'Search for movies or TV series',
+  searchPath,
+}) {
+  const router = useRouter()
+  const [query, setQuery] = useState('')
 
-    return (
-        <form onSubmit={handleSearch} className='flex grow pb-6 md:pb-10 lg:mt-9'>
-            <IconSearch className='h-6 w-6 md:h-8 md:w-8 dark:pt-1 pt-2'/>
-            <input
-                className='md:heading-md md:placeholder:heading-md mx-4 transition duration-300 ease-in-out dark:text-white text-app-dark-blue w-full rounded dark:rounded-none p-1 dark:pt-0 dark:bg-app-dark-blue bg-light-white pb-[8px] text-base font-light caret-app-red placeholder:text-base placeholder:text-app-dark-blue dark:shadow-[0px] shadow-2xl  border-b-[2px]  placeholder:dark:text-app-placeholder dark:focus:border-app-pure-white border-app-greyish-blue focus:outline-none'
-                type='text'
-                placeholder={placeholder}
-                onChange={e => setQuery(e.target.value)}
-                value={query}
-            />
-            <SearchButton/>
-        </form>
-    )
+  const handleSearch = e => {
+    e.preventDefault()
+    if (query.length === 0) {
+      return
+    } else {
+      router.push(`${searchPath}${query.trim()}?page=1`)
+      setQuery('')
+    }
+  }
+
+  return (
+    <form onSubmit={handleSearch} className='flex grow pb-6 md:pb-10 lg:mt-9'>
+      <IconSearch className='h-6 w-6 md:h-8 md:w-8' />
+      <input
+        className='md:heading-md md:placeholder:heading-md mx-4 w-full rounded-none border-b border-app-dark-blue bg-app-dark-blue pb-[8px] text-base font-light caret-app-red placeholder:text-base placeholder:text-app-placeholder focus:border-b focus:border-app-greyish-blue focus:outline-none'
+        type='text'
+        placeholder={placeholder}
+        onChange={e => setQuery(e.target.value)}
+        value={query}
+      />
+      <SearchButton />
+    </form>
+  )
 }

components/SearchButton.js

@@ -2,7 +2,7 @@ export default function SearchButton() {
   return (
     <button
       type='submit'
-      className='text-capitalize flex items-center justify-center rounded-md bg-light-white dark:bg-app-greyish-blue py-2 px-3 text-xs text-app-dark-blue dark:text-app-pure-white hover:dark:bg-light-white hover:bg-app-dark-blue hover:text-app-pure-white  hover:dark:text-app-dark-blue'>
+      className='text-capitalize flex items-center justify-center rounded-md bg-app-greyish-blue py-2 px-3 text-xs text-app-pure-white hover:bg-app-pure-white hover:text-app-dark-blue'>
       Search
     </button>
   )

components/ThemeToggler.js

@@ -1,71 +0,0 @@
-import {useEffect, useState} from 'react'
-import {useTheme} from 'next-themes'
-
-export function ThemeToggler({parentComponent}) {
-    const [mounted, setMounted] = useState(false)
-    const {theme, setTheme} = useTheme()
-    useEffect(() => {
-        setMounted(true)
-        if (localStorage.getItem('theme')) setTheme(localStorage.getItem('theme'))
-        else setTheme('dark')
-    }, [])
-    useEffect(() => {
-        if (mounted) {
-            document.querySelector('.dark-mode-btn').addEventListener('click', () => {
-                document
-                    .querySelector('.dark-mode-btn')
-                    .classList.toggle('rotate-[360deg]')
-            })
-            localStorage.setItem('theme', theme)
-        }
-    }, [mounted])
-    if (!mounted) {
-        return null
-    } else {
-        if (parentComponent !== "sidebar")
-            return (
-                <div
-                    className={` right-16 top-20 z-50 rounded-3xl p-2 lg:block hidden lg:absolute static md:right-24 md:top-[33px] lg:right-5 lg:top-5  ${
-                        theme !== 'dark' ? 'bg-app-semi-dark-blue' : 'bg-app-pure-white'
-                    } h-9 w-9 text-white`}>
-                    <div className={'h-full w-full rounded-3xl'}>
-                        <div
-                            onClick={() => {
-                                setTheme(theme === 'light' ? 'dark' : 'light')
-                            }}
-                            className={`dark-mode-btn flex h-full w-full cursor-pointer items-center justify-center rounded-full transition  duration-500 ease-in-out `}>
-            <span
-                className={` ${
-                    theme === 'dark' ? 'text-black' : ''
-                } material-symbols-outlined`}>
-              {theme === 'dark' ? 'light_mode' : 'dark_mode'}
-            </span>
-                        </div>
-                    </div>
-                </div>
-            )
-        else
-            return (
-                <div
-                    className={`m-2 cursor-pointer rounded-xl border-2 border-gray-400 p-4  dark:border-gray-900  w-66 h-14 text-white`}>
-                    <div className={'h-full w-full rounded-3xl'}>
-                        <div
-                            onClick={() => {
-                                setTheme(theme === 'light' ? 'dark' : 'light')
-                            }}
-                            className={`dark-mode-btn flex h-full w-full cursor-pointer items-center justify-start gap-2 rounded-full transition  duration-500 ease-in-out `}>
-            <span
-                className={` ${
-                    theme === 'dark' ? 'text-white' : ''
-                } material-symbols-outlined`}>
-              {theme === 'dark' ? 'light_mode' : 'dark_mode'}
-            </span>
-                            <div>
-                                {theme === 'dark' ? 'Light Mode' : 'Dark Mode'}
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            )
-    }
-}

components/icons/AppIcon.js

@@ -4,7 +4,7 @@ export default function AppIcon() {
   const router = useRouter()
   return (
     <svg
-      className={`h-[24px] pt-[1px] w-[25px] lg:h-[25.6px] lg:w-[32px]  ${router.pathname == '/' ? 'active-link' : 'icon-nav'}`}
+      className={`h-[20px] w-[25px] lg:h-[25.6px] lg:w-[32px] ${router.pathname == '/' ? 'active-link' : 'icon-nav'}`}
       data-tooltip-id="my-tooltip"
       data-tooltip-content="Home"
       width='1em'

components/icons/IconCategoryMovie.js

@@ -9,6 +9,7 @@ export default function IconCategoryMovie({ className = '' }) {
     >
       <path
         d='M10.173 0H1.827A1.827 1.827 0 0 0 0 1.827v8.346C0 11.183.818 12 1.827 12h8.346A1.827 1.827 0 0 0 12 10.173V1.827A1.827 1.827 0 0 0 10.173 0ZM2.4 5.4H1.2V4.2h1.2v1.2ZM1.2 6.6h1.2v1.2H1.2V6.6Zm9.6-1.2H9.6V4.2h1.2v1.2ZM9.6 6.6h1.2v1.2H9.6V6.6Zm1.2-4.956V2.4H9.6V1.2h.756a.444.444 0 0 1 .444.444ZM1.644 1.2H2.4v1.2H1.2v-.756a.444.444 0 0 1 .444-.444ZM1.2 10.356V9.6h1.2v1.2h-.756a.444.444 0 0 1-.444-.444Zm9.6 0a.444.444 0 0 1-.444.444H9.6V9.6h1.2v.756Z'
+        fill='#FFF'
         opacity='.75'
       />
     </svg>

components/icons/IconNavHome.js

@@ -5,14 +5,15 @@ export default function IconHome() {
 
   return (
     <svg
-      data-tooltip-id='my-tooltip'
-      data-tooltip-content='Dashboard'
+     data-tooltip-id="my-tooltip"
+      data-tooltip-content="Dashboard"
       className={router.pathname == '/dashboard' ? 'active-link' : 'icon-nav'}
       fill='currentColor'
       width='20'
       height='20'
       viewBox='0 0 20 20'
-      xmlns='http://www.w3.org/2000/svg'>
+      xmlns='http://www.w3.org/2000/svg'
+    >
       <path d='M8 0H1C.4 0 0 .4 0 1v7c0 .6.4 1 1 1h7c.6 0 1-.4 1-1V1c0-.6-.4-1-1-1Zm0 11H1c-.6 0-1 .4-1 1v7c0 .6.4 1 1 1h7c.6 0 1-.4 1-1v-7c0-.6-.4-1-1-1ZM19 0h-7c-.6 0-1 .4-1 1v7c0 .6.4 1 1 1h7c.6 0 1-.4 1-1V1c0-.6-.4-1-1-1Zm0 11h-7c-.6 0-1 .4-1 1v7c0 .6.4 1 1 1h7c.6 0 1-.4 1-1v-7c0-.6-.4-1-1-1Z' />
     </svg>
   )

lib/tmdb.js

@@ -20,7 +20,7 @@ export function getGenre(endpoint) {
 }
 
 export function getMovieDetail(id) {
-  return `${TMDB_ENDPOINT}/movie/${id}?api_key=${TMDB_API_KEY}&append_to_response=videos,credits,recommendations`
+  return `${TMDB_ENDPOINT}/movie/${id}?api_key=${TMDB_API_KEY}`
 }
 
 export function getLinkByIMDB(id) {

package-lock.json

@@ -9,13 +9,11 @@
       "version": "0.1.0",
       "dependencies": {
         "axios": "^1.5.0",
-        "bootstrap": "^5.3.2",
         "moment": "^2.29.4",
         "next": "12.1.0",
-        "next-themes": "^0.2.1",
         "nprogress": "^0.2.0",
         "react": "17.0.2",
-        "react-bootstrap": "^2.9.0",
+        "react-bootstrap": "^2.8.0",
         "react-data-table-component": "^7.5.4",
         "react-dom": "17.0.2",
         "react-icons": "^4.3.1",
@@ -25,10 +23,8 @@
         "react-toastify": "^9.1.3",
         "react-tooltip": "^5.21.3",
         "react-youtube": "^10.1.0",
-        "reactstrap": "^9.2.0",
         "recoil": "^0.6.1",
         "scss": "^0.2.4",
-        "sitemap": "^7.1.1",
         "swr": "^1.2.2",
         "uuid": "^8.3.2"
       },
@@ -36,12 +32,10 @@
         "autoprefixer": "^10.4.3",
         "eslint": "8.11.0",
         "eslint-config-next": "12.1.0",
-        "eslint-config-prettier": "^9.0.0",
         "postcss": "^8.4.11",
         "prettier": "^2.6.1",
         "prettier-plugin-tailwindcss": "^0.1.8",
         "tailwindcss": "^3.0.23",
-        "video.js": "^8.5.2",
         "webpack": "^5.88.2"
       }
     },
@@ -2763,7 +2757,8 @@
     "node_modules/@types/node": {
       "version": "20.6.0",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-20.6.0.tgz",
-      "integrity": "sha512-najjVq5KN2vsH2U/xyh2opaSEz6cZMR2SetLIlxlj08nOcmPOemJmUK2o4kUzfLqfrWE0PIrNeE16XhYDd3nqg=="
+      "integrity": "sha512-najjVq5KN2vsH2U/xyh2opaSEz6cZMR2SetLIlxlj08nOcmPOemJmUK2o4kUzfLqfrWE0PIrNeE16XhYDd3nqg==",
+      "dev": true
     },
     "node_modules/@types/parse-json": {
       "version": "4.0.0",
@@ -2793,14 +2788,6 @@
         "@types/react": "*"
       }
     },
-    "node_modules/@types/sax": {
-      "version": "1.2.6",
-      "resolved": "https://registry.npmjs.org/@types/sax/-/sax-1.2.6.tgz",
-      "integrity": "sha512-A1mpYCYu1aHFayy8XKN57ebXeAbh9oQIZ1wXcno6b1ESUAfMBDMx7mf/QGlYwcMRaFryh9YBuH03i/3FlPGDkQ==",
-      "dependencies": {
-        "@types/node": "*"
-      }
-    },
     "node_modules/@types/scheduler": {
       "version": "0.16.3",
       "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.3.tgz",
@@ -2813,9 +2800,9 @@
       "peer": true
     },
     "node_modules/@types/warning": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/@types/warning/-/warning-3.0.1.tgz",
-      "integrity": "sha512-ywJmriP+nvjBKNBEMaNZgj2irZHoxcKeYcyMLbqhYKbDVn8yCIULy2Ol/tvIb37O3IBeZj3RU4tXqQTtGwoAMg=="
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@types/warning/-/warning-3.0.0.tgz",
+      "integrity": "sha512-t/Tvs5qR47OLOr+4E9ckN8AmP2Tf16gWq+/qA4iUGS/OOyHVO8wv2vjJuX8SNOUTJyWb+2t7wJm6cXILFnOROA=="
     },
     "node_modules/@typescript-eslint/parser": {
       "version": "5.62.0",
@@ -2918,98 +2905,6 @@
         "url": "https://opencollective.com/typescript-eslint"
       }
     },
-    "node_modules/@videojs/http-streaming": {
-      "version": "3.5.3",
-      "resolved": "https://registry.npmjs.org/@videojs/http-streaming/-/http-streaming-3.5.3.tgz",
-      "integrity": "sha512-dty8lsZk9QPc0i4It79tjWsmPiaC3FpgARFM0vJGko4k3yKNZIYkAk8kjiDRfkAQH/HZ3rYi5dDTriFNzwSsIg==",
-      "dev": true,
-      "dependencies": {
-        "@babel/runtime": "^7.12.5",
-        "@videojs/vhs-utils": "4.0.0",
-        "aes-decrypter": "4.0.1",
-        "global": "^4.4.0",
-        "m3u8-parser": "^7.1.0",
-        "mpd-parser": "^1.1.1",
-        "mux.js": "7.0.0",
-        "video.js": "^7 || ^8"
-      },
-      "engines": {
-        "node": ">=8",
-        "npm": ">=5"
-      },
-      "peerDependencies": {
-        "video.js": "^7 || ^8"
-      }
-    },
-    "node_modules/@videojs/http-streaming/node_modules/m3u8-parser": {
-      "version": "7.1.0",
-      "resolved": "https://registry.npmjs.org/m3u8-parser/-/m3u8-parser-7.1.0.tgz",
-      "integrity": "sha512-7N+pk79EH4oLKPEYdgRXgAsKDyA/VCo0qCHlUwacttQA0WqsjZQYmNfywMvjlY9MpEBVZEt0jKFd73Kv15EBYQ==",
-      "dev": true,
-      "dependencies": {
-        "@babel/runtime": "^7.12.5",
-        "@videojs/vhs-utils": "^3.0.5",
-        "global": "^4.4.0"
-      }
-    },
-    "node_modules/@videojs/http-streaming/node_modules/m3u8-parser/node_modules/@videojs/vhs-utils": {
-      "version": "3.0.5",
-      "resolved": "https://registry.npmjs.org/@videojs/vhs-utils/-/vhs-utils-3.0.5.tgz",
-      "integrity": "sha512-PKVgdo8/GReqdx512F+ombhS+Bzogiofy1LgAj4tN8PfdBx3HSS7V5WfJotKTqtOWGwVfSWsrYN/t09/DSryrw==",
-      "dev": true,
-      "dependencies": {
-        "@babel/runtime": "^7.12.5",
-        "global": "^4.4.0",
-        "url-toolkit": "^2.2.1"
-      },
-      "engines": {
-        "node": ">=8",
-        "npm": ">=5"
-      }
-    },
-    "node_modules/@videojs/http-streaming/node_modules/mux.js": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/mux.js/-/mux.js-7.0.0.tgz",
-      "integrity": "sha512-DeZmr+3NDrO02k4SREtl4VB5GyGPCz2fzMjDxBIlamkxffSTLge97rtNMoonnmFHTp96QggDucUtKv3fmyObrA==",
-      "dev": true,
-      "dependencies": {
-        "@babel/runtime": "^7.11.2",
-        "global": "^4.4.0"
-      },
-      "bin": {
-        "muxjs-transmux": "bin/transmux.js"
-      },
-      "engines": {
-        "node": ">=8",
-        "npm": ">=5"
-      }
-    },
-    "node_modules/@videojs/vhs-utils": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/@videojs/vhs-utils/-/vhs-utils-4.0.0.tgz",
-      "integrity": "sha512-xJp7Yd4jMLwje2vHCUmi8MOUU76nxiwII3z4Eg3Ucb+6rrkFVGosrXlMgGnaLjq724j3wzNElRZ71D/CKrTtxg==",
-      "dev": true,
-      "dependencies": {
-        "@babel/runtime": "^7.12.5",
-        "global": "^4.4.0",
-        "url-toolkit": "^2.2.1"
-      },
-      "engines": {
-        "node": ">=8",
-        "npm": ">=5"
-      }
-    },
-    "node_modules/@videojs/xhr": {
-      "version": "2.6.0",
-      "resolved": "https://registry.npmjs.org/@videojs/xhr/-/xhr-2.6.0.tgz",
-      "integrity": "sha512-7J361GiN1tXpm+gd0xz2QWr3xNWBE+rytvo8J3KuggFaLg+U37gZQ2BuPLcnkfGffy2e+ozY70RHC8jt7zjA6Q==",
-      "dev": true,
-      "dependencies": {
-        "@babel/runtime": "^7.5.5",
-        "global": "~4.4.0",
-        "is-function": "^1.0.1"
-      }
-    },
     "node_modules/@webassemblyjs/ast": {
       "version": "1.11.6",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.11.6.tgz",
@@ -3156,15 +3051,6 @@
         "@xtuc/long": "4.2.2"
       }
     },
-    "node_modules/@xmldom/xmldom": {
-      "version": "0.8.10",
-      "resolved": "https://registry.npmjs.org/@xmldom/xmldom/-/xmldom-0.8.10.tgz",
-      "integrity": "sha512-2WALfTl4xo2SkGCYRt6rDTFfk9R1czmBvUQy12gK2KuRKIpWEhcbbzy8EZXtz/jkRqHX8bFEc6FC1HjX4TUWYw==",
-      "dev": true,
-      "engines": {
-        "node": ">=10.0.0"
-      }
-    },
     "node_modules/@xtuc/ieee754": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/@xtuc/ieee754/-/ieee754-1.2.0.tgz",
@@ -3207,33 +3093,6 @@
         "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
       }
     },
-    "node_modules/aes-decrypter": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/aes-decrypter/-/aes-decrypter-4.0.1.tgz",
-      "integrity": "sha512-H1nh/P9VZXUf17AA5NQfJML88CFjVBDuGkp5zDHa7oEhYN9TTpNLJknRY1ie0iSKWlDf6JRnJKaZVDSQdPy6Cg==",
-      "dev": true,
-      "dependencies": {
-        "@babel/runtime": "^7.12.5",
-        "@videojs/vhs-utils": "^3.0.5",
-        "global": "^4.4.0",
-        "pkcs7": "^1.0.4"
-      }
-    },
-    "node_modules/aes-decrypter/node_modules/@videojs/vhs-utils": {
-      "version": "3.0.5",
-      "resolved": "https://registry.npmjs.org/@videojs/vhs-utils/-/vhs-utils-3.0.5.tgz",
-      "integrity": "sha512-PKVgdo8/GReqdx512F+ombhS+Bzogiofy1LgAj4tN8PfdBx3HSS7V5WfJotKTqtOWGwVfSWsrYN/t09/DSryrw==",
-      "dev": true,
-      "dependencies": {
-        "@babel/runtime": "^7.12.5",
-        "global": "^4.4.0",
-        "url-toolkit": "^2.2.1"
-      },
-      "engines": {
-        "node": ">=8",
-        "npm": ">=5"
-      }
-    },
     "node_modules/ajv": {
       "version": "6.12.6",
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
@@ -3305,7 +3164,8 @@
     "node_modules/arg": {
       "version": "5.0.2",
       "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
-      "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg=="
+      "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==",
+      "dev": true
     },
     "node_modules/argparse": {
       "version": "2.0.1",
@@ -3625,24 +3485,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/bootstrap": {
-      "version": "5.3.2",
-      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.2.tgz",
-      "integrity": "sha512-D32nmNWiQHo94BKHLmOrdjlL05q1c8oxbtBphQFb9Z5to6eGRDCm0QgeaZ4zFBHzfg2++rqa2JkqCcxDy0sH0g==",
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/twbs"
-        },
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/bootstrap"
-        }
-      ],
-      "peerDependencies": {
-        "@popperjs/core": "^2.11.8"
-      }
-    },
     "node_modules/brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -4075,12 +3917,6 @@
         "csstype": "^3.0.2"
       }
     },
-    "node_modules/dom-walk": {
-      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/dom-walk/-/dom-walk-0.1.2.tgz",
-      "integrity": "sha512-6QvTW9mrGeIegrFXdtQi9pk7O/nSK6lSdXW2eqUspN5LWD7UTji2Fqw5V2YLjBpHEoU9Xl/eUWNpDeZvoyOv2w==",
-      "dev": true
-    },
     "node_modules/electron-to-chromium": {
       "version": "1.4.513",
       "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.513.tgz",
@@ -4332,18 +4168,6 @@
         }
       }
     },
-    "node_modules/eslint-config-prettier": {
-      "version": "9.0.0",
-      "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-9.0.0.tgz",
-      "integrity": "sha512-IcJsTkJae2S35pRsRAwoCE+925rJJStOdkKnLVgtE+tEpqU0EVVM7OqrwxqgptKdX29NUwC82I5pXsGFIgSevw==",
-      "dev": true,
-      "bin": {
-        "eslint-config-prettier": "bin/cli.js"
-      },
-      "peerDependencies": {
-        "eslint": ">=7.0.0"
-      }
-    },
     "node_modules/eslint-import-resolver-node": {
       "version": "0.3.9",
       "resolved": "https://registry.npmjs.org/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.9.tgz",
@@ -5035,16 +4859,6 @@
       "integrity": "sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==",
       "dev": true
     },
-    "node_modules/global": {
-      "version": "4.4.0",
-      "resolved": "https://registry.npmjs.org/global/-/global-4.4.0.tgz",
-      "integrity": "sha512-wv/LAoHdRE3BeTGz53FAamhGlPLhlssK45usmGFThIi4XqnBmjKQ16u+RNbP7WvigRZDxUsM0J3gcQ5yicaL0w==",
-      "dev": true,
-      "dependencies": {
-        "min-document": "^2.19.0",
-        "process": "^0.11.10"
-      }
-    },
     "node_modules/globals": {
       "version": "13.21.0",
       "resolved": "https://registry.npmjs.org/globals/-/globals-13.21.0.tgz",
@@ -5239,12 +5053,6 @@
         "node": ">=0.8.19"
       }
     },
-    "node_modules/individual": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/individual/-/individual-2.0.0.tgz",
-      "integrity": "sha512-pWt8hBCqJsUWI/HtcfWod7+N9SgAqyPEaF7JQjwzjn5vGrpg6aQ5qeAFQ7dx//UH4J1O+7xqew+gCeeFt6xN/g==",
-      "dev": true
-    },
     "node_modules/inflight": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
@@ -5414,12 +5222,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/is-function": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/is-function/-/is-function-1.0.2.tgz",
-      "integrity": "sha512-lw7DUp0aWXYg+CBCN+JKkcE0Q2RayZnSvnZBlwgxHBQhqt5pZNVy4Ri7H9GmmXkdu7LUthszM+Tor1u/2iBcpQ==",
-      "dev": true
-    },
     "node_modules/is-generator-function": {
       "version": "1.0.10",
       "resolved": "https://registry.npmjs.org/is-generator-function/-/is-generator-function-1.0.10.tgz",
@@ -5749,12 +5551,6 @@
         "node": ">=4.0"
       }
     },
-    "node_modules/keycode": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/keycode/-/keycode-2.2.0.tgz",
-      "integrity": "sha512-ps3I9jAdNtRpJrbBvQjpzyFbss/skHqzS+eu4RxKLaEAtFqkjZaB6TZMSivPbLxf4K7VI4SjR0P5mRCX5+Q25A==",
-      "dev": true
-    },
     "node_modules/keyv": {
       "version": "4.5.3",
       "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.3.tgz",
@@ -5855,32 +5651,6 @@
         "node": ">=10"
       }
     },
-    "node_modules/m3u8-parser": {
-      "version": "6.2.0",
-      "resolved": "https://registry.npmjs.org/m3u8-parser/-/m3u8-parser-6.2.0.tgz",
-      "integrity": "sha512-qlC00JTxYOxawcqg+RB8jbyNwL3foY/nCY61kyWP+RCuJE9APLeqB/nSlTjb4Mg0yRmyERgjswpdQxMvkeoDrg==",
-      "dev": true,
-      "dependencies": {
-        "@babel/runtime": "^7.12.5",
-        "@videojs/vhs-utils": "^3.0.5",
-        "global": "^4.4.0"
-      }
-    },
-    "node_modules/m3u8-parser/node_modules/@videojs/vhs-utils": {
-      "version": "3.0.5",
-      "resolved": "https://registry.npmjs.org/@videojs/vhs-utils/-/vhs-utils-3.0.5.tgz",
-      "integrity": "sha512-PKVgdo8/GReqdx512F+ombhS+Bzogiofy1LgAj4tN8PfdBx3HSS7V5WfJotKTqtOWGwVfSWsrYN/t09/DSryrw==",
-      "dev": true,
-      "dependencies": {
-        "@babel/runtime": "^7.12.5",
-        "global": "^4.4.0",
-        "url-toolkit": "^2.2.1"
-      },
-      "engines": {
-        "node": ">=8",
-        "npm": ">=5"
-      }
-    },
     "node_modules/make-dir": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-2.1.0.tgz",
@@ -5964,15 +5734,6 @@
         "node": ">= 0.6"
       }
     },
-    "node_modules/min-document": {
-      "version": "2.19.0",
-      "resolved": "https://registry.npmjs.org/min-document/-/min-document-2.19.0.tgz",
-      "integrity": "sha512-9Wy1B3m3f66bPPmU5hdA4DR4PB2OfDU/+GS3yAB7IQozE3tqXaVv2zOjgla7MEGSRv95+ILmOuvhLkOK6wJtCQ==",
-      "dev": true,
-      "dependencies": {
-        "dom-walk": "^0.1.0"
-      }
-    },
     "node_modules/minimatch": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
@@ -6001,58 +5762,11 @@
         "node": "*"
       }
     },
-    "node_modules/mpd-parser": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/mpd-parser/-/mpd-parser-1.2.2.tgz",
-      "integrity": "sha512-QCfB1koOoZw6E5La1cx+W/Yd0EZlRhHMqMr4TAJez0eRTuPDzPM5FWoiOqjyo37W+ISPLzmfJACSbJFEBjbL4Q==",
-      "dev": true,
-      "dependencies": {
-        "@babel/runtime": "^7.12.5",
-        "@videojs/vhs-utils": "^3.0.5",
-        "@xmldom/xmldom": "^0.8.3",
-        "global": "^4.4.0"
-      },
-      "bin": {
-        "mpd-to-m3u8-json": "bin/parse.js"
-      }
-    },
-    "node_modules/mpd-parser/node_modules/@videojs/vhs-utils": {
-      "version": "3.0.5",
-      "resolved": "https://registry.npmjs.org/@videojs/vhs-utils/-/vhs-utils-3.0.5.tgz",
-      "integrity": "sha512-PKVgdo8/GReqdx512F+ombhS+Bzogiofy1LgAj4tN8PfdBx3HSS7V5WfJotKTqtOWGwVfSWsrYN/t09/DSryrw==",
-      "dev": true,
-      "dependencies": {
-        "@babel/runtime": "^7.12.5",
-        "global": "^4.4.0",
-        "url-toolkit": "^2.2.1"
-      },
-      "engines": {
-        "node": ">=8",
-        "npm": ">=5"
-      }
-    },
     "node_modules/ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
       "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
     },
-    "node_modules/mux.js": {
-      "version": "6.3.0",
-      "resolved": "https://registry.npmjs.org/mux.js/-/mux.js-6.3.0.tgz",
-      "integrity": "sha512-/QTkbSAP2+w1nxV+qTcumSDN5PA98P0tjrADijIzQHe85oBK3Akhy9AHlH0ne/GombLMz1rLyvVsmrgRxoPDrQ==",
-      "dev": true,
-      "dependencies": {
-        "@babel/runtime": "^7.11.2",
-        "global": "^4.4.0"
-      },
-      "bin": {
-        "muxjs-transmux": "bin/transmux.js"
-      },
-      "engines": {
-        "node": ">=8",
-        "npm": ">=5"
-      }
-    },
     "node_modules/mz": {
       "version": "2.7.0",
       "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz",
@@ -6142,16 +5856,6 @@
         }
       }
     },
-    "node_modules/next-themes": {
-      "version": "0.2.1",
-      "resolved": "https://registry.npmjs.org/next-themes/-/next-themes-0.2.1.tgz",
-      "integrity": "sha512-B+AKNfYNIzh0vqQQKqQItTS8evEouKD7H5Hj3kmuPERwddR2TxvDSFZuTj6T7Jfn1oyeUyJMydPl1Bkxkh0W7A==",
-      "peerDependencies": {
-        "next": "*",
-        "react": "*",
-        "react-dom": "*"
-      }
-    },
     "node_modules/next/node_modules/postcss": {
       "version": "8.4.5",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.5.tgz",
@@ -6449,18 +6153,6 @@
         "node": ">= 6"
       }
     },
-    "node_modules/pkcs7": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/pkcs7/-/pkcs7-1.0.4.tgz",
-      "integrity": "sha512-afRERtHn54AlwaF2/+LFszyAANTCggGilmcmILUzEjvs3XgFZT+xE6+QWQcAGmu4xajy+Xtj7acLOPdx5/eXWQ==",
-      "dev": true,
-      "dependencies": {
-        "@babel/runtime": "^7.5.5"
-      },
-      "bin": {
-        "pkcs7": "bin/cli.js"
-      }
-    },
     "node_modules/postcss": {
       "version": "8.4.29",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.29.tgz",
@@ -6635,15 +6327,6 @@
         "prettier": ">=2.2.0"
       }
     },
-    "node_modules/process": {
-      "version": "0.11.10",
-      "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz",
-      "integrity": "sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A==",
-      "dev": true,
-      "engines": {
-        "node": ">= 0.6.0"
-      }
-    },
     "node_modules/prop-types": {
       "version": "15.8.1",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
@@ -6722,14 +6405,14 @@
       }
     },
     "node_modules/react-bootstrap": {
-      "version": "2.9.0",
-      "resolved": "https://registry.npmjs.org/react-bootstrap/-/react-bootstrap-2.9.0.tgz",
-      "integrity": "sha512-dGh6fGjqR9MBzPOp2KbXJznt1Zy6SWepXYUdxMT18Zu/wJ73HCU8JNZe9dfzjmVssZYsJH9N3HHE4wAtQvNz7g==",
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/react-bootstrap/-/react-bootstrap-2.8.0.tgz",
+      "integrity": "sha512-e/aNtxl0Z2ozrIaR82jr6Zz7ss9GSoaXpQaxmvtDUsTZIq/XalkduR/ZXP6vbQHz2T4syvjA+4FbtwELxxmpww==",
       "dependencies": {
-        "@babel/runtime": "^7.22.5",
+        "@babel/runtime": "^7.21.0",
         "@restart/hooks": "^0.4.9",
-        "@restart/ui": "^1.6.6",
-        "@types/react-transition-group": "^4.4.6",
+        "@restart/ui": "^1.6.3",
+        "@types/react-transition-group": "^4.4.5",
         "classnames": "^2.3.2",
         "dom-helpers": "^5.2.1",
         "invariant": "^2.2.4",
@@ -6775,11 +6458,6 @@
         "react": "17.0.2"
       }
     },
-    "node_modules/react-fast-compare": {
-      "version": "3.2.2",
-      "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.2.tgz",
-      "integrity": "sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ=="
-    },
     "node_modules/react-icons": {
       "version": "4.11.0",
       "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.11.0.tgz",
@@ -6816,20 +6494,6 @@
         "react-dom": "^0.14.0 || ^15.0.0 || ^16 || ^17 || ^18"
       }
     },
-    "node_modules/react-popper": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-2.3.0.tgz",
-      "integrity": "sha512-e1hj8lL3uM+sgSR4Lxzn5h1GxBlpa4CQz0XLF8kx4MDrDRWY0Ena4c97PUeSX9i5W3UAfDP0z0FXCTQkoXUl3Q==",
-      "dependencies": {
-        "react-fast-compare": "^3.0.1",
-        "warning": "^4.0.2"
-      },
-      "peerDependencies": {
-        "@popperjs/core": "^2.0.0",
-        "react": "^16.8.0 || ^17 || ^18",
-        "react-dom": "^16.8.0 || ^17 || ^18"
-      }
-    },
     "node_modules/react-rating": {
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/react-rating/-/react-rating-2.0.5.tgz",
@@ -6929,23 +6593,6 @@
         "react": ">=0.14.1"
       }
     },
-    "node_modules/reactstrap": {
-      "version": "9.2.0",
-      "resolved": "https://registry.npmjs.org/reactstrap/-/reactstrap-9.2.0.tgz",
-      "integrity": "sha512-WWLTEG00qYav0E55PorWHReYTkz5IqkVmQNy0h6U81yqjSp9fOLFGV5pYSVeAUz+yRhU/RTE0oAWy22zr6sOIw==",
-      "dependencies": {
-        "@babel/runtime": "^7.12.5",
-        "@popperjs/core": "^2.6.0",
-        "classnames": "^2.2.3",
-        "prop-types": "^15.5.8",
-        "react-popper": "^2.2.4",
-        "react-transition-group": "^4.4.2"
-      },
-      "peerDependencies": {
-        "react": ">=16.8.0",
-        "react-dom": ">=16.8.0"
-      }
-    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@@ -7177,15 +6824,6 @@
         "queue-microtask": "^1.2.2"
       }
     },
-    "node_modules/rust-result": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/rust-result/-/rust-result-1.0.0.tgz",
-      "integrity": "sha512-6cJzSBU+J/RJCF063onnQf0cDUOHs9uZI1oroSGnHOph+CQTIJ5Pp2hK5kEQq1+7yE/EEWfulSNXAQ2jikPthA==",
-      "dev": true,
-      "dependencies": {
-        "individual": "^2.0.0"
-      }
-    },
     "node_modules/safe-array-concat": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/safe-array-concat/-/safe-array-concat-1.0.1.tgz",
@@ -7224,15 +6862,6 @@
         }
       ]
     },
-    "node_modules/safe-json-parse": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/safe-json-parse/-/safe-json-parse-4.0.0.tgz",
-      "integrity": "sha512-RjZPPHugjK0TOzFrLZ8inw44s9bKox99/0AZW9o/BEQVrJfhI+fIHMErnPyRa89/yRXUUr93q+tiN6zhoVV4wQ==",
-      "dev": true,
-      "dependencies": {
-        "rust-result": "^1.0.0"
-      }
-    },
     "node_modules/safe-regex-test": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/safe-regex-test/-/safe-regex-test-1.0.0.tgz",
@@ -7247,11 +6876,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/sax": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/sax/-/sax-1.3.0.tgz",
-      "integrity": "sha512-0s+oAmw9zLl1V1cS9BtZN7JAd0cW5e0QH4W3LWEK6a4LaLEA2OTpGYWDY+6XasBLtz6wkm3u1xRw95mRuJ59WA=="
-    },
     "node_modules/scheduler": {
       "version": "0.20.2",
       "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.20.2.tgz",
@@ -7360,29 +6984,6 @@
       "resolved": "https://registry.npmjs.org/sister/-/sister-3.0.2.tgz",
       "integrity": "sha512-p19rtTs+NksBRKW9qn0UhZ8/TUI9BPw9lmtHny+Y3TinWlOa9jWh9xB0AtPSdmOy49NJJJSSe0Ey4C7h0TrcYA=="
     },
-    "node_modules/sitemap": {
-      "version": "7.1.1",
-      "resolved": "https://registry.npmjs.org/sitemap/-/sitemap-7.1.1.tgz",
-      "integrity": "sha512-mK3aFtjz4VdJN0igpIJrinf3EO8U8mxOPsTBzSsy06UtjZQJ3YY3o3Xa7zSc5nMqcMrRwlChHZ18Kxg0caiPBg==",
-      "dependencies": {
-        "@types/node": "^17.0.5",
-        "@types/sax": "^1.2.1",
-        "arg": "^5.0.0",
-        "sax": "^1.2.4"
-      },
-      "bin": {
-        "sitemap": "dist/cli.js"
-      },
-      "engines": {
-        "node": ">=12.0.0",
-        "npm": ">=5.6.0"
-      }
-    },
-    "node_modules/sitemap/node_modules/@types/node": {
-      "version": "17.0.45",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-17.0.45.tgz",
-      "integrity": "sha512-w+tIMs3rq2afQdsPJlODhoUEKzFP1ayaoyl1CcnwtIlsVe7K7bA1NGm4s3PraqTLlXnbIN84zuBlxBWo1u9BLw=="
-    },
     "node_modules/slash": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
@@ -8076,12 +7677,6 @@
         "punycode": "^2.1.0"
       }
     },
-    "node_modules/url-toolkit": {
-      "version": "2.2.5",
-      "resolved": "https://registry.npmjs.org/url-toolkit/-/url-toolkit-2.2.5.tgz",
-      "integrity": "sha512-mtN6xk+Nac+oyJ/PrI7tzfmomRVNFIWKUbG8jdYFt52hxbiReFAXIjYskvu64/dvuW71IcB7lV8l0HvZMac6Jg==",
-      "dev": true
-    },
     "node_modules/use-isomorphic-layout-effect": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.1.2.tgz",
@@ -8126,59 +7721,6 @@
       "integrity": "sha512-ocyWc3bAHBB/guyqJQVI5o4BZkPhznPYUG2ea80Gond/BgNWpap8TOmLSeeQG7bnh2KMISxskdADG59j7zruhw==",
       "dev": true
     },
-    "node_modules/video.js": {
-      "version": "8.5.2",
-      "resolved": "https://registry.npmjs.org/video.js/-/video.js-8.5.2.tgz",
-      "integrity": "sha512-6/uNXQV3xSaKLpaPf/bVvr7omd+82sKUp0RMBgIt4PxHIe28GtX+O+GcNfI2fuwBvcDRDqk5Ei5AG9bJJOpulA==",
-      "dev": true,
-      "dependencies": {
-        "@babel/runtime": "^7.12.5",
-        "@videojs/http-streaming": "3.5.3",
-        "@videojs/vhs-utils": "^4.0.0",
-        "@videojs/xhr": "2.6.0",
-        "aes-decrypter": "^4.0.1",
-        "global": "4.4.0",
-        "keycode": "2.2.0",
-        "m3u8-parser": "^6.0.0",
-        "mpd-parser": "^1.0.1",
-        "mux.js": "^6.2.0",
-        "safe-json-parse": "4.0.0",
-        "videojs-contrib-quality-levels": "4.0.0",
-        "videojs-font": "4.1.0",
-        "videojs-vtt.js": "0.15.5"
-      }
-    },
-    "node_modules/videojs-contrib-quality-levels": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/videojs-contrib-quality-levels/-/videojs-contrib-quality-levels-4.0.0.tgz",
-      "integrity": "sha512-u5rmd8BjLwANp7XwuQ0Q/me34bMe6zg9PQdHfTS7aXgiVRbNTb4djcmfG7aeSrkpZjg+XCLezFNenlJaCjBHKw==",
-      "dev": true,
-      "dependencies": {
-        "global": "^4.4.0"
-      },
-      "engines": {
-        "node": ">=14",
-        "npm": ">=6"
-      },
-      "peerDependencies": {
-        "video.js": "^8"
-      }
-    },
-    "node_modules/videojs-font": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/videojs-font/-/videojs-font-4.1.0.tgz",
-      "integrity": "sha512-X1LuPfLZPisPLrANIAKCknZbZu5obVM/ylfd1CN+SsCmPZQ3UMDPcvLTpPBJxcBuTpHQq2MO1QCFt7p8spnZ/w==",
-      "dev": true
-    },
-    "node_modules/videojs-vtt.js": {
-      "version": "0.15.5",
-      "resolved": "https://registry.npmjs.org/videojs-vtt.js/-/videojs-vtt.js-0.15.5.tgz",
-      "integrity": "sha512-yZbBxvA7QMYn15Lr/ZfhhLPrNpI/RmCSCqgIff57GC2gIrV5YfyzLfLyZMj0NnZSAz8syB4N0nHXpZg9MyrMOQ==",
-      "dev": true,
-      "dependencies": {
-        "global": "^4.3.1"
-      }
-    },
     "node_modules/warning": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",

package.json

@@ -11,13 +11,11 @@
   },
   "dependencies": {
     "axios": "^1.5.0",
-    "bootstrap": "^5.3.2",
     "moment": "^2.29.4",
     "next": "12.1.0",
-    "next-themes": "^0.2.1",
     "nprogress": "^0.2.0",
     "react": "17.0.2",
-    "react-bootstrap": "^2.9.0",
+    "react-bootstrap": "^2.8.0",
     "react-data-table-component": "^7.5.4",
     "react-dom": "17.0.2",
     "react-icons": "^4.3.1",
@@ -27,10 +25,8 @@
     "react-toastify": "^9.1.3",
     "react-tooltip": "^5.21.3",
     "react-youtube": "^10.1.0",
-    "reactstrap": "^9.2.0",
     "recoil": "^0.6.1",
     "scss": "^0.2.4",
-    "sitemap": "^7.1.1",
     "swr": "^1.2.2",
     "uuid": "^8.3.2"
   },
@@ -38,12 +34,10 @@
     "autoprefixer": "^10.4.3",
     "eslint": "8.11.0",
     "eslint-config-next": "12.1.0",
-    "eslint-config-prettier": "^9.0.0",
     "postcss": "^8.4.11",
     "prettier": "^2.6.1",
     "prettier-plugin-tailwindcss": "^0.1.8",
     "tailwindcss": "^3.0.23",
-    "video.js": "^8.5.2",
     "webpack": "^5.88.2"
   }
 }

pages/404.js

@@ -5,11 +5,11 @@ export default function Custom404() {
   return (
     <div className='my-20 flex flex-col items-center justify-center'>
       <Head>
-        <title>404 - Not Found | Yaps</title>
+        <title>404 - Not Found | Watcho</title>
       </Head>
       <h1 className='my-20 text-xl md:text-4xl'>404 - Page Not Found</h1>
       <Link href='/' passHref>
-        <button className='rounded-md bg-app-greyish-blue p-2 px-4 hover:bg-light-white hover:text-app-dark-blue'>
+        <button className='rounded-md bg-app-greyish-blue p-2 px-4 hover:bg-app-pure-white hover:text-app-dark-blue'>
           Go home
         </button>
       </Link>

pages/_app.js

@@ -1,28 +1,23 @@
 import Router from 'next/router'
 import NProgress from 'nprogress'
-import {RecoilRoot} from 'recoil'
+import { RecoilRoot } from 'recoil'
 import Layout from '../components/Layout'
 import '../styles/globals.css'
 import '../styles/nprogress.css'
-import {ToastContainer} from 'react-toastify';
-import {ThemeProvider} from "next-themes";
 
-NProgress.configure({showSpinner: false})
+NProgress.configure({ showSpinner: false })
 Router.events.on('routeChangeStart', () => NProgress.start())
 Router.events.on('routeChangeComplete', () => NProgress.done())
 Router.events.on('routeChangeError', () => NProgress.done())
 
-function MyApp({Component, pageProps}) {
-    return (
-        <ThemeProvider attribute={"class"}>
-            <RecoilRoot>
-                <Layout>
-                    <ToastContainer/>
-                    <Component {...pageProps} />
-                </Layout>
-            </RecoilRoot>
-        </ThemeProvider>
-    )
+function MyApp({ Component, pageProps }) {
+  return (
+    <RecoilRoot>
+      <Layout>
+        <Component {...pageProps} />
+      </Layout>
+    </RecoilRoot>
+  )
 }
 
 export default MyApp

pages/_document.js

@@ -4,23 +4,13 @@ export default function Document() {
   return (
     <Html>
       <Head>
-        <link rel='shortcut icon' href='/logo.svg' type='image/x-icon' />
+        <link rel="shortcut icon" href="/logo.svg" type="image/x-icon" />
         <link rel='preconnect' href='https://fonts.googleapis.com' />
         <link
-          href='https://vjs.zencdn.net/8.5.2/video-js.css'
-          rel='stylesheet'
+          rel="stylesheet"
+          href="https://unicons.iconscout.com/release/v4.0.0/css/unicons.css"
         />
-        <link
-          rel='stylesheet'
-          href='https://unicons.iconscout.com/release/v4.0.0/css/unicons.css'
-        />
-        <link
-          rel='stylesheet'
-          href='https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=swap'
-        />
-        <link
-          rel='stylesheet'
-          href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'></link>
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"></link>
         <link rel='preconnect' href='https://fonts.gstatic.com' crossOrigin />
         <link
           href='https://fonts.googleapis.com/css2?family=Outfit:wght@300;500&display=swap'

pages/api/movie/[id].js

@@ -1,3 +1,4 @@
+import axios from 'axios';
 import { getLinkByIMDB, getMovieCasts, getMovieDetail } from '../../../lib/tmdb'
 
 export default async function handler(req, res) {
@@ -7,6 +8,10 @@ export default async function handler(req, res) {
     const response = await fetch(getMovieDetail(id))
     const response2 = await fetch(getMovieCasts(id))
 
+   
+   
+   
+   
     const data = await response.json()
     const data2 = await response2.json()
     const response3 = await fetch(getLinkByIMDB(data.imdb_id));

pages/api/tv/[id].js

@@ -8,7 +8,6 @@ export default async function handler(req, res) {
     const response2 = await fetch(getTvCasts(id))
     const data = await response.json()
     const data2 = await response2.json()
-
     res.status(200).json({
       detail: data,
       credits: data2,

pages/dashboard.js

@@ -3,7 +3,7 @@ import Card from '../Common/Card';
 import { Loader } from '../Common/Loader'
 import ToastMsg from '../Common/ToastMsg'
 import { getTorrentList } from '../service/service'
-import Head from 'next/head'
+
 const Dashboard = () => {
 
 
@@ -38,25 +38,23 @@ const Dashboard = () => {
   }
   return (
     <>
-    
-     <Head>
-        <title>Dashboard | Yaps</title>
-      </Head>
       <div className="flex justify-center">
-
         <div className='text-center mt-4 text-[32px] font-bold w-[95%]'>
           {loader ? <Loader /> : null}
           <h1>Dashboard</h1>
           <div className='text-[16px] font-md text-right mt-3'>
             <h1> {"Welcome " + userData?.first_name + " " + userData?.last_name}</h1>
           </div>
+
+
+
         </div>
 
       </div>
       <br />
       <br />
 
-      <div className='w-auto mb-[3rem] mx-4 md:mx-[9rem] dark:bg-card bg-white relative text-center flex rounded-xl overflow-hidden'>
+      <div className='w-auto mb-[3rem] mx-4 md:mx-[9rem] bg-card relative text-center flex rounded-xl overflow-hidden'>
 
         <div className={`flex-1 px-4 flex-wrap py-8 justify-center`}>
           {list.length > 0 ? list?.map((item, index) => {

pages/faq.jsx

@@ -1,101 +0,0 @@
-import React, { useState } from 'react'
-import Head from 'next/head'
-const faqData = [
-  {
-    question: 'What is YAPS?',
-    answer:
-      'YAPS (Yet Another Piracy Site) is a torrent site that allows users to download and share copyrighted content such as movies, music, software, and more.',
-  },
-  {
-    question: 'How does YAPS work?',
-    answer:
-      'Users can search for their desired content on YAPS and download it using a BitTorrent client. YAPS operates on a peer-to-peer network, meaning that users download files from other users who have already downloaded them.',
-  },
-  {
-    question: 'How can I protect my privacy while using YAPS?',
-    answer:
-      'To protect your privacy while using YAPS, consider using a VPN (Virtual Private Network) to hide your IP address and encrypt your internet connection. This will help prevent your online activities from being tracked.',
-  },
-  {
-    question: "What if I can't find the content I'm looking for on YAPS?",
-    answer:
-      "YAPS is a user-driven platform, and the availability of content depends on what other users have uploaded. If you can't find what you're looking for, it may not be available on YAPS.",
-  },
-  {
-    question: 'Is it safe to download from YAPS?',
-    answer:
-      "We allow only verified torrents to be uploaded on our site. However, there are no absolutes when it comes to protection. Users should always scan/test whatever they download and don't take anything for granted. Mistakes often happen as the uploaders are also humans, or someone could just simply want to trick us. From our side, as a site, we try our best to keep you protected but that does NOT mean you should let your guards down.",
-  },
-  {
-    question: 'Are there any rules about ratios?',
-    answer:
-      "No. Currently, we don't have any rule to maintain the ratio, but the users are still advised to maintain their ratio instead of doing a Hit and Run.",
-  },
-  {
-    question: 'What is Hit and Run ?',
-    answer:
-      'Hit and Run is a term used to describe a user who downloads a torrent and then does not seed it back for other users to download. This is considered bad etiquette and is frowned upon by the community.',
-  },
-  {
-    question: 'How long should I seed for?',
-    answer:
-      'Generally speaking, you should try to seed for as long as possible. However, if you are not able to, 1:1 or 2:1 are great ratios. For example, if you were to download a 1GB file, you should try to upload/seed 1 or 2 GBs.',
-  },
-  {
-    question: 'What is the difference between a seed and a leech?',
-    answer:
-      'A "Seed" is a user who has a complete copy of the file being shared and is actively sharing it with others, while a "Leech" is a user who is downloading the file but is not sharing it with others.',
-  },
-]
-
-const FAQ = () => {
-  const [openIndices, setOpenIndices] = useState([])
-
-  const toggleAnswer = index => {
-    if (openIndices.includes(index)) {
-      setOpenIndices(openIndices.filter(i => i !== index))
-    } else {
-      setOpenIndices([...openIndices, index])
-    }
-  }
-
-  return (
-    <div className='max-lg:ml-[10%]  min-[1700px]:ml-[-9%] min-[1900px]:ml-[-15%] min-[2000px]:ml-[-20%] min-[2300px]:ml-[-27%]'>
-      <Head>
-        <title>Faq | Yaps</title>
-      </Head>
-      <h1 className='mb-10 text-center text-2xl font-bold text-app-dark-blue dark:text-white '>
-        HELP CENTER
-      </h1>
-      <div className=' w-[80vw]'>
-        <div className='grid grid-cols-2 gap-x-4 gap-y-6 md:grid-cols-2 '>
-          {faqData.map((item, index) => {
-            return (
-              <div
-                key={index * 2}
-                className={`hover_effect-1 ${
-                  openIndices.includes(index) ? 'max-h-64' : 'max-h-16'
-                } cursor-pointer overflow-hidden rounded-lg bg-[#171E31] px-4 py-5 shadow-sm shadow-slate-800 transition duration-[0.5s] ease-in-out `}
-                onClick={() => {
-                  toggleAnswer(index)
-                }}>
-                <h3 className='text-xl font-light text-white '>
-                  {item.question}
-                </h3>
-                <div
-                  key={index}
-                  className={`${
-                    openIndices.includes(index) ? 'opacity-1  ' : 'opacity-0'
-                  } mt-6 text-gray-500 transition duration-300 ease-in-out`}>
-                  {item.answer}
-                </div>
-              </div>
-            )
-          })}
-        </div>
-      </div>
-    </div>
-  )
-}
-
-export default FAQ

pages/get-posts/[category].js

@@ -1,261 +1,185 @@
-import {SearchSVG} from '../../SVG/search'
-import React, {useEffect, useState} from 'react'
+import { SearchSVG } from '../../SVG/search'
+import React, { useEffect, useState } from 'react'
+
+import { getSearchResult, moviesListApi } from '../../service/service';
+import ToastMsg from '../../Common/ToastMsg';
+import { Loader } from '../../Common/Loader';
+import { useRouter } from 'next/router';
+import CardExpanded from '../../Common/CardExpanded';
+import { CompactList, ExpandedList, FilterIcon } from '../../SVG/listing';
+import CardCompact from '../../Common/CardCompact';
+
+
+
 
-import {getSearchResult, moviesListApi} from '../../service/service'
-import ToastMsg from '../../Common/ToastMsg'
-import {Loader} from '../../Common/Loader'
-import {useRouter} from 'next/router'
-import CardExpanded from '../../Common/CardExpanded'
-import {CompactList, ExpandedList} from '../../SVG/listing'
-import CardCompact from '../../Common/CardCompact'
-import Head from 'next/head'
-import {useTheme} from 'next-themes'
 
 const Latest = () => {
-    const router = useRouter()
-    const {category} = router.query
-    const categoryId = category ? category.split(':')[1] : null
+  const router = useRouter()
+  const { category, time } = router.query;
+  const categoryId = category ? category.split(':')[1] : "Movies";
 
-    // { name: "TV-Show", cat: "TV", time: "10D", color: "#7a1fb8" },
-    // { name: "Games", cat: "Games", time: "10D", color: "#AD1F2F" },
-    // { name: "Music", cat: "Music", time: "10D", color: "#411eed" },
-    // { name: "Anime", cat: "Anime", time: "10D", color: "#001F1F" },
-    // { name: "Books", cat: "Books", time: "10D", color: "#fD1Df1" },
-    // { name: "XXX", cat: "XXX", time: "10D", color: "#Fc3799" },  
-    // { name: "Other", cat: "Other", time: "10D", color: "#ff0000" }]
-    let data = [
-        {name: 'Movie', cat: 'Movies', time: '10D', color: '#ee7633'},
-        {
-            name: 'TV-Show',
-            cat: 'TV',
-            time: '10D',
-            light_color: '#7affb8',
-            dark_color: '#7a1fb8',
-        },
-        {
-            name: 'Games',
-            cat: 'Games',
-            time: '10D',
-            light_color: '#ADFF2F',
-            dark_color: '#AD1F2F',
-        },
-        {
-            name: 'Music',
-            cat: 'Music',
-            time: '10D',
-            light_color: '#418eed',
-            dark_color: '#411eed',
-        },
-        {
-            name: 'Anime',
-            cat: 'Anime',
-            time: '10D',
-            light_color: '#00FFFF',
-            dark_color: '#001F1F',
-        },
-        {
-            name: 'Books',
-            cat: 'Books',
-            time: '10D',
-            light_color: '#CDCD00',
-            dark_color: '#fD1Df1',
-        },
-        {
-            name: 'XXX',
-            cat: 'XXX',
-            time: '10D',
-            light_color: '#FF00FF',
-            dark_color: '#Fc3799',
-        },
-        {
-            name: 'Other',
-            cat: 'Other',
-            time: '10D',
-            light_color: '#ebad32',
-            dark_color: '#ff0000',
-        },
-    ]
-    const [movieList, setMovieList] = useState([])
-    const [ListType, setListType] = useState('expanded')
-    const [Filter, setFilter] = useState(false)
-    const [page, setPage] = useState(1)
-    const [loader, setLoader] = useState(false)
-    const [cat, setCat] = useState(categoryId)
-    const [search, setSearch] = useState(false)
-    const {theme, setTheme} = useTheme()
-    setTheme(theme)
-    useEffect(() => {
-        fetchMovieList(cat)
-    }, [page])
-    useEffect(() => {
-        fetchMovieListRefresh(category?.split(':')[1])
-        setCat(category?.split(':')[1])
-    }, [category])
+  let data = [{ name: "Movie", cat: "Movies", time: "10D", color: "#ee7633" },
+  { name: "TV-Show", cat: "TV", time: "10D", color: "#7affb8" },
+  { name: "Games", cat: "Games", time: "10D", color: "#ADFF2F" },
+  { name: "Music", cat: "Music", time: "10D", color: "#418eed" },
+  { name: "Anime", cat: "Anime", time: "10D", color: "#00FFFF" },
+  { name: "Books", cat: "Books", time: "10D", color: "#CDCD00" },
+  { name: "XXX", cat: "XXX", time: "10D", color: "#FF00FF" },
+  { name: "Other", cat: "Other", time: "10D", color: "#ebad32" }]
 
-    const fetchMovieList = cat => {
-        let category = cat ? cat : 'Movies'
-        let latest = ''
-        setLoader(true)
-        moviesListApi(page, category, latest)
-            .then(res => {
-                console.log('page', res?.data?.results)
-                setLoader(false)
-                setMovieList([...movieList, ...res.data.results])
-            })
-            .catch(err => {
-                console.log('error', err)
-                ToastMsg('Some thing went wrong ', 'error')
-                setLoader(false)
-            })
+  const [movieList, setMovieList] = useState([])
+  const [ListType, setListType] = useState('expanded');
+  const [Filter, setFilter] = useState(false);
+  const [page, setPage] = useState(1)
+  const [loader, setLoader] = useState(false)
+  const [cat, setCat] = useState(categoryId)
+  const [search, setSearch] = useState(false)
+
+  useEffect(() => {
+    fetchMovieList(cat);
+  }, [page])
+  useEffect(() => {
+    fetchMovieListRefresh(cat);
+    setCat(categoryId)
+  }, [categoryId])
+
+  const fetchMovieList = (cat) => {
+   
+    let category = cat ? cat : "Movies"
+    let latest = ""
+    setLoader(true)
+    moviesListApi(page, category, latest).then((res) => {
+      console.log("page", res?.data?.results)
+      setLoader(false)
+      setMovieList([...movieList, ...res.data.results])
+     
+    }).catch((err) => {
+      console.log("error", err)
+      ToastMsg("Some thing went wrong ", "error")
+      setLoader(false)
+    })
+
+  }
+
+  const fetchMovieListRefresh = (categoryId) => {
+
+    let latest = ""
+    setLoader(true)
+    moviesListApi(page, categoryId, latest).then((res) => {
+      console.log("page", res?.data?.results)
+      setLoader(false)
+      setMovieList(res.data.results)
+    }).catch((err) => {
+      console.log("error", err)
+      ToastMsg("Some thing went wrong ", "error")
+      setLoader(false)
+    })
+
+  }
+
+  const searchResult = (e) => {
+    e.preventDefault()
+    setLoader(true)
+    getSearchResult(search).then((res) => {
+      console.log("page", res?.data?.results)
+      setLoader(false)
+      setMovieList(res.data.results)
+    }).catch((err) => {
+      console.log("error", err)
+      ToastMsg("Some thing went wrong ", "error")
+      setLoader(false)
+    })
+  }
+  
+  const handleScroll = () => {
+    
+    if (
+      (window.innerHeight + window.scrollY) > (document.body.scrollHeight - 150) 
+    ) {
+     setTimeout(()=>{
+      setPage(page+1)
+     },100)
+     
     }
+  };
 
-    const fetchMovieListRefresh = categoryId => {
-        let latest = ''
-        setLoader(true)
-        moviesListApi(page, categoryId, latest)
-            .then(res => {
-                console.log('page', res?.data?.results)
-                setLoader(false)
-                setMovieList(res.data.results)
+  useEffect(() => {
+    window.addEventListener('scroll', handleScroll);
+    return () => {
+      window.removeEventListener('scroll', handleScroll);
+    };
+  }, [page]);
+
+
+  return (
+    <div className='text-center font-montserrat'>
+      {loader ? <Loader /> : null}
+
+      <div className='w-full justify-end'>
+
+        <form onSubmit={(e) => {
+          searchResult(e)
+
+        }} className='w-10/12 md:w-1/2 mx-auto flex my-3 items-center border-b-[1px] border-primary px-1'>
+          <input className='bg-transparent w-full py-4 font-light text-lg outline-none  placeholder:font-montserrat font-montserrat' onChange={(e) => { setSearch(e.target.value) }} placeholder='Start typing what you want ?' />
+          <div className='cursor-pointer' onClick={(e) => {
+            searchResult(e)
+            router.push(`/get-posts/keywords:${search}/`)
+          }}>
+            <SearchSVG />
+          </div>
+        </form>
+        <div className='mx-8  flex flex-wrap text-center justify-center'>
+          {
+            data.map((item, index) => {
+              return (
+                <div onClick={() => {
+                  setCat(item?.cat)
+                  setPage(1)
+                  router.push(`/get-posts/category:${item?.cat}`)
+                }} key={index} className="flex bg-primary/15 cursor-pointer  font-medium text-[14px] rounded lowercase my-1 mx-2 px-2 py-0.5 hover:bg-[#008000] hover:text-white"
+                  style={{ color: cat === item?.cat ? "#fff" : item?.color, background: cat === item?.cat ? "#008000" : "" }}>
+                  <label className='cursor-pointer'>{item?.name} </label></div>
+              )
             })
-            .catch(err => {
-                console.log('error', err)
-                ToastMsg('Some thing went wrong ', 'error')
-                setLoader(false)
-            })
-    }
+          }
 
-    const searchResult = e => {
-        e.preventDefault()
-        if (!movieList) {
-            setLoader(true)
-            getSearchResult(search)
-                .then(res => {
-                    console.log('page', res?.data?.results)
-                    setLoader(false)
-                    setMovieList(res.data.results)
-                })
-                .catch(err => {
-                    console.log('error', err)
-                    ToastMsg('Some thing went wrong ', 'error')
-                    setLoader(false)
-                })
-        }
-    }
 
-    const handleScroll = () => {
-        if (
-            window.innerHeight + window.scrollY >
-            document.body.scrollHeight - 150
-        ) {
-            setTimeout(() => {
-                setPage(page + 1)
-            }, 100)
-        }
-    }
-
-    useEffect(() => {
-        window.addEventListener('scroll', handleScroll)
-        return () => {
-            window.removeEventListener('scroll', handleScroll)
-        }
-    }, [page])
-
-    return (
-        <div className='font-montserrat text-center'>
-            <Head>
-                <title>Browse | Yaps</title>
-            </Head>
-            {!movieList.length > 0 ? <Loader/> : null}
-            <div className='w-full justify-end'>
-                <form
-                    onSubmit={e => {
-                        searchResult(e)
-                    }}
-                    className='mx-auto my-3 flex w-10/12 items-center border-b-[1px] border-primary px-1 md:w-1/2'>
-                    <input
-                        className='placeholder:font-montserrat font-montserrat w-full bg-transparent py-4 text-lg font-light outline-none placeholder:text-black dark:placeholder:text-app-pure-white'
-                        onChange={e => {
-                            setSearch(e.target.value)
-                        }}
-                        placeholder='Start typing what you want ?'
-                    />
-                    <div
-                        className='cursor-pointer'
-                        onClick={e => {
-                            searchResult(e)
-                            router.push(`/get-posts/keywords:${search}/`)
-                        }}>
-                        <SearchSVG/>
-                    </div>
-                </form>
-                <div className='mx-8  flex flex-wrap justify-center text-center'>
-                    {data.map((item, index) => {
-                        return (
-                            <div
-                                onClick={() => {
-                                    setCat(item?.cat)
-                                    setPage(1)
-                                    router.push(`/get-posts/category:${item?.cat}`)
-                                }}
-                                key={index}
-                                className={`category-text bg-primary/15 mx-2 my-1 flex cursor-pointer rounded px-2 py-0.5 text-[15px] font-light lowercase hover:bg-[#008000] !hover:text-[${item.hover_color}] `}
-                                style={{
-                                    color:
-                                        cat === item?.cat
-                                            ? '#fff'
-                                            : theme === 'light'
-                                                ? item?.dark_color
-                                                : item?.light_color,
-                                    background: cat === item?.cat ? '#008000' : '',
-                                }}>
-                                <label className='cursor-pointer'>{item?.name} </label>
-                            </div>
-                        )
-                    })}
-                </div>
-            </div>
-            <div className='w-full'>
-                <div className='absolute right-0 flex justify-end md:right-[4%]'>
-                    <div
-                        className={`px-4 py-[0.35rem] ${
-                            ListType === 'compact' ? 'bg-primary/30 text-primary' : ''
-                        } cursor-pointer rounded-xl transition-all duration-200`}
-                        onClick={() => {
-                            setListType('compact')
-                        }}>
-                        <CompactList/>
-                    </div>
-                    <div
-                        className={`px-4 py-[0.35rem] ${
-                            ListType === 'expanded' ? 'bg-primary/30 text-primary' : ''
-                        } cursor-pointer rounded-xl transition-all duration-200`}
-                        onClick={() => {
-                            setListType('expanded')
-                        }}>
-                        <ExpandedList/>
-                    </div>
-                </div>
-            </div>
-            <br/> <br/>
-            <div className='relative mb-[3rem]   flex w-auto overflow-hidden  rounded-xl text-center'>
-                <div className={`flex w-full flex-wrap justify-evenly p-2  py-8  `}>
-                    {movieList?.map((item, index) => {
-                        if (ListType === 'compact') {
-                            return (
-                                <CardCompact key={index} item={item} categoryId={categoryId}/>
-                            )
-                        } else {
-                            return (
-                                <CardExpanded key={index} item={item} categoryId={categoryId}/>
-                            )
-                        }
-                    })}
-                    {movieList.length === 0 ? <h1>No Data Found </h1> : null}
-                </div>
-            </div>
         </div>
-    )
+
+      </div>
+      <div className='w-full'>
+        <div className='flex justify-end absolute md:right-[4%] right-0'>
+          <div className={`px-4 py-[0.35rem] ${ListType === 'compact' ? 'text-primary bg-primary/30' : ''} rounded-xl cursor-pointer transition-all duration-200`} onClick={() => {
+            setListType('compact')
+          }} ><CompactList /></div>
+          <div className={`px-4 py-[0.35rem] ${ListType === 'expanded' ? 'text-primary bg-primary/30' : ''} rounded-xl cursor-pointer transition-all duration-200`} onClick={() => {
+            setListType('expanded')
+
+          }} ><ExpandedList /></div>
+        </div>
+      </div>
+      <br />  <br />
+
+      <div className='w-auto mb-[3rem]   relative text-center flex rounded-xl overflow-hidden'>
+
+        <div className={`flex w-full p-2 flex-wrap py-8  justify-evenly  `}>
+          {movieList?.map((item, index) => {
+            if (ListType === 'compact') {
+              return (
+                <CardCompact key={index} item={item} categoryId={categoryId} />
+              )
+            } else {
+              return (
+                <CardExpanded key={index} item={item} categoryId={categoryId} />
+              )
+            }
+          })}
+          {movieList.length === 0 ? <h1>No Data Found </h1> : null}
+        </div>
+      </div>
+    </div>
+  )
 }
 
 export default Latest

pages/index.js

@@ -2,109 +2,106 @@ import Head from 'next/head'
 import CardTrending from '../components/CardTrending'
 import Collection from '../components/Collection'
 import SearchBar from '../components/SearchBar'
-import {pathToSearchAll} from '../utils'
-import CollectionContinueWatching from "../components/CollectionContinueWatching";
-import {ThemeToggler} from "../components/ThemeToggler";
-import {useTheme} from "next-themes";
-export default function Home() {
-    const limitNormal = 6
-    const limitTrending = 10
-    return (
-        <>
-            <Head>
-                <title>Home | Yaps</title>
-            </Head>
-            <SearchBar searchPath={pathToSearchAll}/>
-            {/*Continue watching*/}
-            <CollectionContinueWatching
-            />
-            {/* Collection of different groups of movies */}
-            <Collection
-                isHomePage
-                isTrending
-                Component={CardTrending}
-                endpoint='/api/movie/trending/1'
-                href='/movie/trending/1'
-                limit={limitTrending}
-                title='Trending'
-            />
-            <Collection
-                isHomePage
-                endpoint='/api/movie/popular/1'
-                href='/movie/popular/1'
-                limit={limitNormal}
-                title='Popular'
-            />
-            <Collection
-                isHomePage
-                endpoint='/api/movie/now/1'
-                href='/movie/now/1'
-                limit={limitNormal}
-                title='Now playing'
-            />
-            <Collection
-                isHomePage
-                endpoint='/api/movie/upcoming/1'
-                href='/movie/upcoming/1'
-                limit={limitNormal}
-                title='Upcoming'
-            />
-            <Collection
-                isHomePage
-                endpoint='/api/movie/top/1'
-                href='/movie/top/1'
-                limit={limitNormal}
-                title='Top rated'
-            />
+import { pathToSearchAll } from '../utils'
 
-            {/* Collection of different groups of tv series */}
-            <Collection
-                isHomePage
-                isTrending
-                Component={CardTrending}
-                endpoint='/api/tv/trending/1'
-                href='/tv/trending/1'
-                limit={limitTrending}
-                media_type='tv'
-                title='Trending'
-                type='tv series'
-            />
-            <Collection
-                isHomePage
-                endpoint='/api/tv/popular/1'
-                href='/tv/popular/1'
-                limit={limitNormal}
-                media_type='tv'
-                title='Popular'
-                type='tv series'
-            />
-            <Collection
-                isHomePage
-                endpoint='/api/tv/airing/1'
-                href='/tv/airing/1'
-                limit={limitNormal}
-                media_type='tv'
-                title='Airing today'
-                type='tv series'
-            />
-            <Collection
-                isHomePage
-                endpoint='/api/tv/onair/1'
-                href='/tv/onair/1'
-                limit={limitNormal}
-                media_type='tv'
-                title='On air'
-                type='tv series'
-            />
-            <Collection
-                isHomePage
-                endpoint='/api/tv/top/1'
-                href='/tv/top/1'
-                limit={limitNormal}
-                media_type='tv'
-                title='Top rated'
-                type='tv series'
-            />
-        </>
-    )
+export default function Home() {
+  const limitNormal = 6
+  const limitTrending = 10
+
+  return (
+    <>
+      <Head>
+        <title>Home | Watcho</title>
+      </Head>
+      <SearchBar searchPath={pathToSearchAll} />
+
+      {/* Collection of different groups of movies */}
+      <Collection
+        isHomePage
+        isTrending
+        Component={CardTrending}
+        endpoint='/api/movie/trending/1'
+        href='/movie/trending/1'
+        limit={limitTrending}
+        title='Trending'
+      />
+      <Collection
+        isHomePage
+        endpoint='/api/movie/popular/1'
+        href='/movie/popular/1'
+        limit={limitNormal}
+        title='Popular'
+      />
+      <Collection
+        isHomePage
+        endpoint='/api/movie/now/1'
+        href='/movie/now/1'
+        limit={limitNormal}
+        title='Now playing'
+      />
+      <Collection
+        isHomePage
+        endpoint='/api/movie/upcoming/1'
+        href='/movie/upcoming/1'
+        limit={limitNormal}
+        title='Upcoming'
+      />
+      <Collection
+        isHomePage
+        endpoint='/api/movie/top/1'
+        href='/movie/top/1'
+        limit={limitNormal}
+        title='Top rated'
+      />
+
+      {/* Collection of different groups of tv series */}
+      <Collection
+        isHomePage
+        isTrending
+        Component={CardTrending}
+        endpoint='/api/tv/trending/1'
+        href='/tv/trending/1'
+        limit={limitTrending}
+        media_type='tv'
+        title='Trending'
+        type='tv series'
+      />
+      <Collection
+        isHomePage
+        endpoint='/api/tv/popular/1'
+        href='/tv/popular/1'
+        limit={limitNormal}
+        media_type='tv'
+        title='Popular'
+        type='tv series'
+      />
+      <Collection
+        isHomePage
+        endpoint='/api/tv/airing/1'
+        href='/tv/airing/1'
+        limit={limitNormal}
+        media_type='tv'
+        title='Airing today'
+        type='tv series'
+      />
+      <Collection
+        isHomePage
+        endpoint='/api/tv/onair/1'
+        href='/tv/onair/1'
+        limit={limitNormal}
+        media_type='tv'
+        title='On air'
+        type='tv series'
+      />
+      <Collection
+        isHomePage
+        endpoint='/api/tv/top/1'
+        href='/tv/top/1'
+        limit={limitNormal}
+        media_type='tv'
+        title='Top rated'
+        type='tv series'
+      />
+    </>
+  )
 }

pages/latest-top-10.js

@@ -1,132 +1,119 @@
 import React from 'react'
 import { Loader } from '../Common/Loader'
-import { moviesTopListApi } from '../service/service'
-import Head from 'next/head'
+import { moviesTopListApi } from '../service/service';
+
 import { useEffect, useState } from 'react'
-import { useRouter } from 'next/router'
-import Card from '../Common/Card'
-import CardGrid from '../Common/CardGrid'
-import ToastMsg from '../Common/ToastMsg'
-import { CompactList, ExpandedList } from '../SVG/listing'
+import { useRouter } from 'next/router';
+import Card from '../Common/Card';
+import CardGrid from '../Common/CardGrid';
+import ToastMsg from '../Common/ToastMsg';
+import { CompactList, ExpandedList } from '../SVG/listing';
+
 
 const LendingPage = () => {
-  const router = useRouter()
-  const { category, time } = router.query
-  const categoryId = category ? category.split(':')[1] : 'Movies'
 
-  let data = [
-    'Torrents',
-    'Movie',
-    'TV-Show',
-    'Games',
-    'Music',
-    'Anime',
-    'Books',
-    'Other',
-  ]
+  const router = useRouter()
+  const { category, time } = router.query;
+  const categoryId = category ? category.split(':')[1] : "Movies";
+
+  let data = ["Torrents", "Movie", "TV-Show", "Games", "Music", "Anime", "Books", "Other"]
 
   const [movieList, setMovieList] = useState([])
-  const [ListType, setListType] = useState('expanded')
-  const [Filter, setFilter] = useState(false)
+  const [ListType, setListType] = useState('expanded');
+  const [Filter, setFilter] = useState(false);
   const [page, setPage] = useState(1)
   const [loader, setLoader] = useState(false)
-  const [blur, setBlur] = useState(true)
+  const[blur,setBlur]=useState(true)
 
   useEffect(() => {
-    fetchMovieList(categoryId)
+
+    fetchMovieList(categoryId);
+
   }, [page])
 
-  const fetchMovieList = categoryId => {
-    let latest = time ? time : '10D'
+
+  const fetchMovieList = (categoryId) => {
+    let latest = time ? time : "10D"
     setLoader(true)
-    moviesTopListApi(page, categoryId, latest)
-      .then(res => {
-        console.log('page', res?.data?.top_posts_by_category)
-        setLoader(false)
-        setMovieList(res?.data?.top_posts_by_category)
-      })
-      .catch(err => {
-        console.log('error', err)
-        ToastMsg('Some thing went wrong ', 'error')
-        setLoader(false)
-      })
-  }
-  const css = {
-    top: '50%',
-    left: '50%',
-    right: 'auto',
-    bottom: 'auto',
-    marginRight: '-50%',
-    transform: 'translate(-50%, -50%)',
+    moviesTopListApi(page, categoryId, latest).then((res) => {
+      console.log("page", res?.data?.top_posts_by_category)
+      setLoader(false)
+      setMovieList(res?.data?.top_posts_by_category)
+    }).catch((err) => {
+      console.log("error", err)
+      ToastMsg("Some thing went wrong ", "error")
+      setLoader(false)
+    })
+
   }
+  const css ={ top: '50%',
+  left: '50%',
+  right: 'auto',
+  bottom: 'auto',
+  marginRight: '-50%',
+  transform: 'translate(-50%, -50%)',}
   return (
-    <div className='font-montserrat z-10 !overflow-visible text-center'>
-      <Head>
-        <title>Top 10 Movies | Yaps</title>
-      </Head>
+    <div className='text-center font-montserrat'>
       {loader ? <Loader /> : null}
       <br />
 
-      <span className='mt-3  pt-3 text-[30px] font-bold'>
-        Top 10 of All Categories
-      </span>
-      <div className='mx-0 mb-8 flex justify-between md:mx-16'></div>
-      <div className='relative m-2 flex w-full justify-center '>
-        <div className='  flex w-[54%] justify-center rounded-xl bg-app-shady-white p-2 align-middle dark:bg-app-semi-dark-blue'>
+      <span className='text-[30px]  font-bold mt-3 pt-3'>Top 10 of All Categories</span>
+      <div className='flex mx-0 md:mx-16 justify-between mb-8'>
+
+
+      </div>
+      <div className='flex justify-center m-2 w-full relative '>
+        <div className=" bg-card w-[54%] rounded-xl  justify-center align-middle p-2">
           <span>Top 10 Movies</span>
         </div>
       </div>
-      <div className='z-10 !overflow-visible'>
-        <div className='z-10  w-full !overflow-visible'>
-          <div className='absolute right-0 z-10 flex justify-end md:right-[4%]'>
-            <div
-              className={`px-4 py-[0.35rem] ${
-                ListType === 'compact' ? 'bg-primary/30 text-primary' : ''
-              } cursor-pointer rounded-xl transition-all duration-200`}
-              onClick={() => {
-                setListType('compact')
-              }}>
-              <CompactList />
-            </div>
-            <div
-              className={`px-4 py-[0.35rem] ${
-                ListType === 'expanded' ? 'bg-primary/30 text-primary' : ''
-              } cursor-pointer rounded-xl transition-all duration-200`}
-              onClick={() => {
-                setListType('expanded')
-              }}>
-              <ExpandedList />
-            </div>
-          </div>
+     <div>
+     <div className='w-full'>
+     <div className='flex justify-end absolute md:right-[4%] right-0'>
+          <div className={`px-4 py-[0.35rem] ${ListType === 'compact' ? 'text-primary bg-primary/30' : ''} rounded-xl cursor-pointer transition-all duration-200`} onClick={() => {
+            setListType('compact')
+          }} ><CompactList /></div>
+          <div className={`px-4 py-[0.35rem] ${ListType === 'expanded' ? 'text-primary bg-primary/30' : ''} rounded-xl cursor-pointer transition-all duration-200`} onClick={() => {
+            setListType('expanded')
+
+          }} ><ExpandedList /></div>
         </div>
-        <br />
-        <br />
-        <div className='z-1 relative  mb-[3rem] flex w-auto  overflow-visible rounded-xl p-2 text-center'>
-          <div
-            className={`z-1 flex flex-wrap justify-evenly overflow-visible py-8`}>
-            {movieList?.Movies?.map((item, index) => {
-              if (ListType === 'compact') {
-                return <Card key={index} item={item} categoryId={categoryId} />
-              } else {
-                return (
-                  <CardGrid key={index} item={item} categoryId={categoryId} />
-                )
-              }
-            })}
-          </div>
+        </div>
+        <br/>
+        <br/>
+        <div className='w-auto mb-[3rem]  p-2 relative text-center flex rounded-xl overflow-hidden'>
+          
+        <div className={`flex  flex-wrap py-8 justify-evenly`}>
+          {movieList?.Movies?.map((item, index) => {
+            if (ListType === 'compact') {
+              return (
+                <Card key={index} item={item} categoryId={categoryId} />
+              )
+            } else {
+              return (
+                <CardGrid key={index} item={item} categoryId={categoryId} />
+              )
+            }
+          })}
         </div>
       </div>
+      </div>
 
-      <div className='m-5 flex justify-center'>
-        <div className=' flex w-[50%]  justify-center rounded-xl  bg-app-shady-white p-2 align-middle dark:bg-app-semi-dark-blue'>
+
+
+
+      <div className='flex m-5 justify-center'>
+        <div className="flex bg-card w-[50%] rounded-xl  justify-center align-middle p-2">
           <span>Top 10 Anime Torrents</span>
         </div>
       </div>
-      <div className='relative mb-[3rem]  flex w-auto overflow-visible rounded-xl p-2 text-center'>
-        <div className={`flex  flex-wrap justify-evenly py-8`}>
+      <div className='w-auto mb-[3rem]  p-2 relative text-center flex rounded-xl overflow-hidden'>
+        <div className={`flex  flex-wrap py-8 justify-evenly`}>
           {movieList?.Anime?.map((item, index) => {
-            if (ListType === 'compact') {
-              return <Card key={index} item={item} categoryId={categoryId} />
+           if (ListType === 'compact') {
+              return (
+                <Card key={index} item={item} categoryId={categoryId} />
+              )
             } else {
               return (
                 <CardGrid key={index} item={item} categoryId={categoryId} />
@@ -135,81 +122,74 @@ const LendingPage = () => {
           })}
         </div>
       </div>
-      <div className='m-5 flex justify-center'>
-        <div className='  flex w-[50%]  justify-center rounded-xl bg-app-shady-white p-2 align-middle dark:bg-app-semi-dark-blue'>
+      <div className='flex m-5 justify-center'>
+        <div className="flex bg-card w-[50%] rounded-xl  justify-center align-middle p-2">
           <span>Top 10 TV Shows</span>
         </div>
       </div>
-      <div className='relative mb-[3rem]  flex w-auto overflow-visible rounded-xl p-2 text-center'>
-        <div className={`flex  flex-wrap justify-evenly py-8`}>
+      <div className='w-auto mb-[3rem]  p-2 relative text-center flex rounded-xl overflow-hidden'>
+
+        <div className={`flex  flex-wrap py-8 justify-evenly`}>
           {movieList?.TV?.map((item, index) => {
             if (ListType === 'compact') {
-              return <Card key={index} item={item} categoryId={categoryId} />
+              return (
+                <Card key={index} item={item} categoryId={categoryId}  />
+              )
             } else {
               return (
-                <CardGrid key={index} item={item} categoryId={categoryId} />
+                <CardGrid key={index} item={item} categoryId={categoryId}  />
               )
             }
           })}
         </div>
       </div>
 
-      <div className='m-5 flex justify-center'>
-        <div className='flex w-[50%]  justify-center rounded-xl  bg-app-shady-white p-2   align-middle dark:bg-app-semi-dark-blue'>
+
+
+      <div className='flex m-5 justify-center'>
+        <div className="flex bg-card w-[50%] rounded-xl  justify-center align-middle p-2">
           <span>Top 10 XXX</span>
         </div>
       </div>
-      <div className='relative mb-[3rem]  flex w-auto overflow-visible rounded-xl p-2 text-center'>
-        {blur ? (
-          <div
-            className='absolute bottom-[50%] right-[30%] z-10 m-auto flex justify-center rounded-md bg-[#204281] pl-[25px] pr-[25px] opacity-100 '
-            style={css}
-            onClick={() => setBlur(false)}>
-            Are You 18+ &#x1F441;
-          </div>
-        ) : null}
-        <div>
-          <div
-            className={`flex  flex-wrap justify-evenly py-8 ${
-              blur ? 'blur-md' : ''
-            }`}>
-            {movieList?.XXX?.map((item, index) => {
-              if (ListType === 'compact') {
-                return (
-                  <Card
-                    key={index}
-                    item={item}
-                    categoryId={categoryId}
-                    blur={blur}
-                    setBlur={setBlur}
-                  />
-                )
-              } else {
-                return (
-                  <CardGrid
-                    key={index}
-                    item={item}
-                    categoryId={categoryId}
-                    blur={blur}
-                    setBlur={setBlur}
-                  />
-                )
-              }
-            })}
+      <div className='w-auto mb-[3rem]  p-2 relative text-center flex rounded-xl overflow-hidden'>
+      {blur? <div className='opacity-100 absolute bottom-[50%] z-10 right-[30%] pl-[25px] pr-[25px] bg-[#204281] rounded-md m-auto flex justify-center ' style={css} onClick={()=>setBlur(false)} >Are You 18+ &#x1F441;</div>:null}
+        <div >
+        
+          <div className={`flex  flex-wrap py-8 justify-evenly ${blur?"blur-md":""}`}>
+          {movieList?.XXX?.map((item, index) => {
+            if (ListType === 'compact') {
+              return (
+                <Card key={index} item={item} categoryId={categoryId} blur={blur} setBlur={setBlur}  />
+              )
+            } else {
+              return (
+                <CardGrid key={index} item={item} categoryId={categoryId} blur={blur} setBlur={setBlur} />
+              )
+            }
+          })}
           </div>
         </div>
       </div>
 
-      <div className='m-5 flex justify-center'>
-        <div className='flex w-[50%] justify-center rounded-xl bg-app-shady-white p-2   align-middle dark:bg-app-semi-dark-blue'>
+
+
+      <div className='flex m-5 justify-center'>
+        <div className="flex bg-card w-[50%] rounded-xl  justify-center align-middle p-2">
           <span>Top 10 Music Torrents</span>
+        
+
+
+
         </div>
       </div>
-      <div className='relative mb-[3rem]  flex w-auto overflow-visible rounded-xl p-2 text-center'>
-        <div className={`flex  flex-wrap justify-evenly py-8`}>
+      <div className='w-auto mb-[3rem]  p-2 relative text-center flex rounded-xl overflow-hidden'>
+
+        <div className={`flex  flex-wrap py-8 justify-evenly`}>
           {movieList?.Music?.map((item, index) => {
-            if (ListType === 'compact') {
-              return <Card key={index} item={item} categoryId={categoryId} />
+           if (ListType === 'compact') {
+              return (
+                <Card key={index} item={item} categoryId={categoryId} />
+              )
             } else {
               return (
                 <CardGrid key={index} item={item} categoryId={categoryId} />
@@ -219,16 +199,24 @@ const LendingPage = () => {
         </div>
       </div>
 
-      <div className='m-5 flex justify-center'>
-        <div className='flex w-[50%] justify-center rounded-xl  bg-app-shady-white p-2 align-middle dark:bg-app-semi-dark-blue'>
+
+      <div className='flex m-5 justify-center'>
+        <div className="flex bg-card w-[50%] rounded-xl  justify-center align-middle p-2">
           <span>Top 10 Books Torrents</span>
+        
+
+
+
         </div>
       </div>
-      <div className='relative mb-[3rem]  flex w-auto overflow-visible rounded-xl p-2 text-center'>
-        <div className={`flex  flex-wrap justify-evenly py-8`}>
+      <div className='w-auto mb-[3rem]  p-2 relative text-center flex rounded-xl overflow-hidden'>
+
+        <div className={`flex  flex-wrap py-8 justify-evenly`}>
           {movieList?.Books?.map((item, index) => {
-            if (ListType === 'compact') {
-              return <Card key={index} item={item} categoryId={categoryId} />
+           if (ListType === 'compact') {
+              return (
+                <Card key={index} item={item} categoryId={categoryId} />
+              )
             } else {
               return (
                 <CardGrid key={index} item={item} categoryId={categoryId} />
@@ -238,16 +226,27 @@ const LendingPage = () => {
         </div>
       </div>
 
-      <div className='m-5 flex justify-center'>
-        <div className='flex w-[50%] justify-center rounded-xl  bg-app-shady-white p-2 align-middle dark:bg-app-semi-dark-blue'>
+      
+
+
+
+      <div className='flex m-5 justify-center'>
+        <div className="flex bg-card w-[50%] rounded-xl  justify-center align-middle p-2">
           <span>Top 10 Games Torrents</span>
+        
+
+
+
         </div>
       </div>
-      <div className='relative mb-[3rem]  flex w-auto overflow-visible rounded-xl p-2 text-center'>
-        <div className={`flex  flex-wrap justify-evenly py-8`}>
+      <div className='w-auto mb-[3rem]  p-2 relative text-center flex rounded-xl overflow-hidden'>
+
+        <div className={`flex  flex-wrap py-8 justify-evenly`}>
           {movieList?.Games?.map((item, index) => {
-            if (ListType === 'compact') {
-              return <Card key={index} item={item} categoryId={categoryId} />
+           if (ListType === 'compact') {
+              return (
+                <Card key={index} item={item} categoryId={categoryId} />
+              )
             } else {
               return (
                 <CardGrid key={index} item={item} categoryId={categoryId} />
@@ -257,16 +256,24 @@ const LendingPage = () => {
         </div>
       </div>
 
-      <div className='m-5 flex justify-center'>
-        <div className='flex w-[50%] justify-center rounded-xl  bg-app-shady-white p-2 align-middle dark:bg-app-semi-dark-blue'>
+
+      <div className='flex m-5 justify-center'>
+        <div className="flex bg-card w-[50%] rounded-xl  justify-center align-middle p-2">
           <span>Top 10 Documentaries Torrents</span>
+        
+
+
+
         </div>
       </div>
-      <div className='relative mb-[3rem]  flex w-auto overflow-visible rounded-xl p-2 text-center'>
-        <div className={`flex  flex-wrap justify-evenly py-8`}>
+      <div className='w-auto mb-[3rem]  p-2 relative text-center flex rounded-xl overflow-hidden'>
+
+        <div className={`flex  flex-wrap py-8 justify-evenly`}>
           {movieList?.Documentaries?.map((item, index) => {
-            if (ListType === 'compact') {
-              return <Card key={index} item={item} categoryId={categoryId} />
+           if (ListType === 'compact') {
+              return (
+                <Card key={index} item={item} categoryId={categoryId} />
+              )
             } else {
               return (
                 <CardGrid key={index} item={item} categoryId={categoryId} />
@@ -275,16 +282,23 @@ const LendingPage = () => {
           })}
         </div>
       </div>
-      <div className='m-5 flex justify-center'>
-        <div className='flex  w-[50%] justify-center rounded-xl  bg-app-shady-white p-2 align-middle dark:bg-app-semi-dark-blue'>
+      <div className='flex m-5 justify-center'>
+        <div className="flex bg-card w-[50%] rounded-xl  justify-center align-middle p-2">
           <span>Top 10 Apps Torrents</span>
+        
+
+
+
         </div>
       </div>
-      <div className='relative mb-[3rem]  flex w-auto overflow-visible rounded-xl p-2 text-center'>
-        <div className={`flex  flex-wrap justify-evenly py-8`}>
+      <div className='w-auto mb-[3rem]  p-2 relative text-center flex rounded-xl overflow-hidden'>
+
+        <div className={`flex  flex-wrap py-8 justify-evenly`}>
           {movieList?.Apps?.map((item, index) => {
-            if (ListType === 'compact') {
-              return <Card key={index} item={item} categoryId={categoryId} />
+           if (ListType === 'compact') {
+              return (
+                <Card key={index} item={item} categoryId={categoryId} />
+              )
             } else {
               return (
                 <CardGrid key={index} item={item} categoryId={categoryId} />

pages/login.js

@@ -1,103 +1,90 @@
-import {useRouter} from 'next/router';
-import React, {useState} from 'react';
-import {getProfileDetails, loginApi} from '../service/service';
-import {Loader} from '../Common/Loader';
+
+import { useRouter } from 'next/router';
+import React, { useState } from 'react';
+import { getProfileDetails, loginApi } from '../service/service';
+import { Loader } from '../Common/Loader';
 import ToastMsg from '../Common/ToastMsg';
-import Head from 'next/head'
 
 const Login = () => {
-    const router = useRouter()
-    const {page} = router.query;
-    const [email, setEmail] = useState("");
-    const [password, setPassword] = useState("")
-    const [loader, setLoader] = useState(false)
-    const [signupbtnclicked, toggleSignUpBtn] = useState(false)
-    const handleSubmit = (e) => {
-        e.preventDefault()
-        if (signupbtnclicked === false) {
-            if (!email) {
-                ToastMsg("Email is Required", "error")
-                return;
-            }
-            if (!email.match(/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{3}$/)) {
-                ToastMsg("Enter a valid email", "error")
-                return;
-            }
-            if (!password) {
-                ToastMsg("Password is Required", "error")
-                return;
-            }
-            let data = {email: email, password: password}
-            setLoader(true)
-            loginApi(data).then((res) => {
+  const router = useRouter()
+  const { page } = router.query;
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("")
+  const[loader,setLoader]=useState(false)
 
-                console.log("res", res.data.access)
-                handleProfileDetails(res.data.access)
-                localStorage.setItem("access_token", res.data.access)
-                localStorage.setItem("refresh_token", res.data.refresh)
-
-
-            }).catch((err) => {
-                setLoader(false)
-                console.log(err)
-            })
-        }
+  const handleSubmit =(e)=>{  
+    e.preventDefault()
+    
+    if (!email) {
+      ToastMsg("Email is Required", "error")
+      return;
     }
-
-    const handleProfileDetails = (token) => {
-        getProfileDetails(token).then((res) => {
-            setLoader(false)
-            console.log("resprofile", res.data)
-            localStorage.setItem("user_profile", JSON.stringify(res?.data))
-            if (page === "upload") {
-                window.location.href = "/upload";
-            } else {
-                window.location.href = "/";
-            }
-
-        }).catch((err) => {
-            setLoader(false)
-            console.log(err)
-        })
-
-
+    if(!email.match(/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{3}$/)){
+      ToastMsg("Enter a valid email", "error")
+      return;
     }
+    if (!password) {
+      ToastMsg("Password is Required", "error")
+      return;
+    }
+let data ={email:email,password:password}
+setLoader(true)
+    loginApi(data).then((res)=>{
+      
+      console.log("res",res.data.access)
+      handleProfileDetails(res.data.access)
+      localStorage.setItem("access_token",res.data.access)
+      localStorage.setItem("refresh_token",res.data.refresh)
+     
 
-    return (
-        <div className='flex h-[90vh] justify-center items-center'>
-            <Head>
-                <title>Login | Yaps</title>
-            </Head>
-            {loader ? <Loader/> : null}
-            <div className='flex-colomn w-[90%] text-center'>
-                <h1 className='text-[48px] justify-center'>Login</h1>
-                <form onSubmit={handleSubmit}>
-                    <div
-                        className='w-4/4 md:w-4/12 mx-auto flex my-3 items-center border-b-[1px] dark:placeholder:text-app-pure-white placeholder:text-app-dark-blue border-primary px-1'>
-                        <input value={email} type='text'
-                               className='bg-transparent w-full py-4 font-light text-lg outline-none  text-app-dark-blue dark:text-app-pure-white dark:placeholder:text-app-pure-white placeholder:text-app-dark-blue  placeholder:font-montserrat font-montserrat  '
-                               onChange={(e) => setEmail(e.target.value)} placeholder='Enter Email '/>
-                    </div>
-                    <div className='w-4/4  md:w-4/12 mx-auto flex my-3 items-center border-b-[1px] border-primary px-1'>
-                        <input value={password} type='password'
-                               className=' bg-transparent w-full py-4 font-light text-lg outline-none  placeholder:font-montserrat dark:placeholder:text-app-pure-white placeholder:text-app-dark-blue font-montserrat'
-                               onChange={(e) => setPassword(e.target.value)} placeholder='Enter Password '/>
-                    </div>
-                    <input
-                        className='px-[50px] mr-[20px] py-[0.35rem] bg-primary/10 rounded text-primary border-primary my-4 text-md hover:bg-primary/30'
-                        style={{border: "solid 0.5px", fontWeight: "400"}} type="submit" value={"Login"}/>
-                    <button
-                        className='px-[50px]  py-[0.35rem] bg-primary/10 text-primary rounded border-primary my-4 text-md hover:bg-primary/30'
-                        style={{border: "solid 0.5px", fontWeight: "400"}} onClick={() => {
-                        router.push("/register")
-                        toggleSignUpBtn(true)
-                    }}>Sign Up
-                    </button>
-                </form>
+    }).catch((err)=>{
+      setLoader(false)
+      console.log(err)
+    })
 
-            </div>
 
+  }
+
+  const handleProfileDetails =(token)=>{
+    getProfileDetails(token).then((res)=>{
+      setLoader(false)
+      console.log("resprofile",res.data)
+      localStorage.setItem("user_profile",JSON.stringify(res?.data))
+ if(page==="upload"){
+  window.location.href="/upload";
+ }
+ else{
+      window.location.href="/";
+ }
+
+    }).catch((err)=>{
+      setLoader(false)
+      console.log(err)
+    })
+
+
+
+  }
+
+  return (
+    <div className='flex h-[90vh] justify-center items-center'>
+      {loader?<Loader/>:null}
+      <div className='flex-colomn w-[90%] text-center'>
+        <h1 className='text-[48px] justify-center'>Login</h1>
+        <form onSubmit={handleSubmit} >
+        <div className='w-4/4 md:w-4/12 mx-auto flex my-3 items-center border-b-[1px] border-primary px-1'>
+          <input value={email} type='text' className='bg-transparent w-full py-4 font-light text-lg outline-none  placeholder:font-montserrat font-montserrat' onChange={(e) => setEmail(e.target.value)} placeholder='Enter Email ' />
         </div>
-    )
+        <div className='w-4/4  md:w-4/12 mx-auto flex my-3 items-center border-b-[1px] border-primary px-1'>
+          <input value={password} type='password' className='bg-transparent w-full py-4 font-light text-lg outline-none  placeholder:font-montserrat font-montserrat' onChange={(e) => setPassword(e.target.value)} placeholder='Enter Password ' />
+        </div>
+        <button className='px-[50px] mr-[20px] py-[0.35rem] bg-primary/10 text-primary border-primary my-4 text-md hover:bg-primary/30' style={{border:"solid 0.5px",fontWeight:"400"}}  type="submit" >Login</button>
+        <button className='px-[50px]  py-[0.35rem] bg-primary/10 text-primary border-primary my-4 text-md hover:bg-primary/30' style={{border:"solid 0.5px",fontWeight:"400"}}  onClick={()=>router.push("/register")} >Sign Up</button>
+        </form>
+      
+      </div>
+      
+    </div>
+  )
 }
 export default Login

pages/movie/[id].js

@@ -1,6 +1,6 @@
 import Head from 'next/head'
 import { useRouter } from 'next/router'
-import {  useState } from 'react'
+import { useEffect, useState } from 'react'
 import useSWR from 'swr'
 import FilmCasts from '../../components/FilmCasts'
 import FilmGenres from '../../components/FilmGenres'
@@ -12,12 +12,10 @@ import FilmResources from '../../components/FilmResources'
 import FilmSynopsis from '../../components/FilmSynopsis'
 import Loading from '../../components/Loading'
 import SearchBar from '../../components/SearchBar'
-import { fetcher, pathToSearchMovie, renderResults, sliceArray } from '../../utils'
+import { fetcher, pathToSearchMovie } 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()
@@ -45,9 +43,9 @@ const handleClose =()=>{
 
   return (
     <>
-   
+    
       <Head>
-        <title>{movie?.detail?.title} | YAPS</title>
+        <title>{movie?.detail?.title} | </title>
       </Head>
       <SearchBar
         placeholder='Search for movies'
@@ -94,25 +92,6 @@ 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 />
@@ -129,7 +108,7 @@ export function renderRating(rating) {
   }
 }
 
-export function renderLength(runtime) {
+function renderLength(runtime) {
   if (runtime !== 0 && runtime !== undefined) {
     return runtime + ' min?.'
   } else {
@@ -145,7 +124,7 @@ export function renderLanguage(languages) {
   }
 }
 
-export function renderYear(year) {
+function renderYear(year) {
   if (!year) {
     return 'N/A'
   } else {

pages/movie/genre/[id].js

@@ -15,7 +15,7 @@ export default function GenreMovie({ data, id, name, page }) {
   return (
     <div>
       <Head>
-        <title>{name} - Movies | Yaps</title>
+        <title>{name} - Movies | Watcho</title>
       </Head>
       <SearchBar
         placeholder='Search for movies'

pages/movie/index.js

@@ -8,7 +8,7 @@ export default function Movie({ data }) {
   return (
     <>
       <Head>
-        <title>Movies | Yaps</title>
+        <title>Movies | Watcho</title>
       </Head>
       <SearchBar
         placeholder='Search for movies'

pages/movie/now/[id].js

@@ -19,7 +19,7 @@ export default function NowPlayingMovies() {
   return (
     <div>
       <Head>
-        <title>Now Playing Movies | Yaps</title>
+        <title>Now Playing Movies | Watcho</title>
       </Head>
       <SearchBar
         placeholder='Search for movies'

pages/movie/popular/[id].js

@@ -19,7 +19,7 @@ export default function PopularMovies() {
   return (
     <div>
       <Head>
-        <title>Popular Movies | Yaps</title>
+        <title>Popular Movies | Watcho</title>
       </Head>
       <SearchBar
         placeholder='Search for movies'

pages/movie/top/[id].js

@@ -19,7 +19,7 @@ export default function TopRatedMovies() {
   return (
     <div>
       <Head>
-        <title>Top Rated Movies | Yaps</title>
+        <title>Top Rated Movies | Watcho</title>
       </Head>
       <SearchBar
         placeholder='Search for movies'

pages/movie/trending/[id].js

@@ -19,7 +19,7 @@ export default function TrendingMovies() {
   return (
     <div>
       <Head>
-        <title>Trending Movies | Yaps</title>
+        <title>Trending Movies | Watcho</title>
       </Head>
       <SearchBar
         placeholder='Search for movies'

pages/movie/upcoming.js

@@ -22,7 +22,7 @@ export default function UpcomingMovies() {
   return (
     <div>
       <Head>
-        <title>Upcoming Movies | Yaps</title>
+        <title>Upcoming Movies | Watcho</title>
       </Head>
       <SearchBar
         placeholder='Search for movies'

pages/movie/upcoming/[id].js

@@ -19,7 +19,7 @@ export default function UpcomingMovies() {
   return (
     <div>
       <Head>
-        <title>Upcoming Movies | Yaps</title>
+        <title>Upcoming Movies | Watcho</title>
       </Head>
       <SearchBar
         placeholder='Search for movies'

pages/play/movies.js

@@ -1,177 +0,0 @@
-import React, { useEffect, useState } from 'react'
-import { useRouter } from 'next/router'
-import Head from 'next/head'
-import useSWR from 'swr'
-import { BsFillLightbulbFill } from 'react-icons/bs'
-import { useTheme } from 'next-themes'
-
-const servers_ = [
-  {
-    servername: 'Vidsrc.to',
-    link: 'https://vidsrc.to/embed/movie/',
-  },
-  {
-    servername: 'Vidsrc.me',
-    link: 'https://vidsrc.me/embed/movie?',
-  },
-  {
-    servername: 'Moviesapi.club',
-    link: 'https://moviesapi.club/movie/',
-  },
-  {
-    servername: 'Blackvid',
-    link: 'https://blackvid.space/embed?tmdb=',
-  },
-]
-const fetcher = (...args) => fetch(...args).then(res => res.json())
-
-const Movies = () => {
-  const router = useRouter()
-  const { id, tmdb } = router.query
-  const me = tmdb ? `tmdb=${tmdb}` : `imdb=${id}`
-  const { theme } = useTheme()
-  const to = tmdb ? `${tmdb}` : `${id}`
-  const [lightStatus, switchLight] = useState(false)
-  const [videoServer, setVideoServer] = useState('vidsrc.to')
-  const { data } = useSWR(`/api/movie/${id}`, fetcher)
-  useEffect(() => {
-    if (localStorage.getItem('userWatched')) {
-      let data = JSON.parse(localStorage.getItem('userWatched'))
-      let moviePresent = false
-      for (let i in data.movies) {
-        if (id)
-          if (data.movies[i] === id) {
-            moviePresent = true
-          } else {
-            if (data.movies === tmdb) {
-              moviePresent = true
-            }
-          }
-      }
-      if (id || tmdb) {
-        if (!moviePresent) {
-          if (id) data.movies.push(id)
-          else data.movies.push(tmdb)
-          localStorage.setItem('userWatched', JSON.stringify(data))
-        }
-      }
-    } else {
-      if (id || tmdb)
-        localStorage.setItem(
-          'userWatched',
-          JSON.stringify({
-            movies: [id ? id : tmdb],
-            tv: [],
-          })
-        )
-    }
-  }, [id, tmdb])
-  useEffect(() => {
-    document.addEventListener('mousedown', event => {
-      if (
-        event.target !== 'iframe' &&
-        event.target.tagName.toLowerCase() !== 'span'
-      ) {
-        switchLight(false)
-      }
-    })
-  }, [])
-  return (
-    <>
-      <Head>
-        <title>Play Movies | Yaps</title>
-      </Head>
-      <div
-        className={` left-0 top-0 z-[997] bg-black  transition duration-300 ease-in-out ${
-          lightStatus
-            ? 'opacity-0.5 fixed h-screen w-full '
-            : 'h-0 w-0 opacity-0'
-        }`}></div>
-      <div className={'text-4xl'}>{data ? data.imdb.imdb.name : ''}</div>
-      <div className={`w-full  ${lightStatus ? '' : 'h-full'} z-[999] `}>
-        <div className={` flex  h-full w-full  flex-col`}>
-          <iframe
-            src={
-              videoServer !== 'vidsrc.to' ? videoServer : servers_[0].link + to
-            }
-            className={`z-[998] ${
-              lightStatus
-                ? 'absolute left-0 h-[80vh] w-full lg:left-[20%] lg:w-2/3 '
-                : 'h-[95vh] w-full'
-            }`}
-            allowFullScreen='allowfullscreen'></iframe>
-          <div
-            className={`${
-              lightStatus
-                ? 'absolute w-1/2 text-white dark:text-black '
-                : 'w-full '
-            } top-[100%] z-[999] flex flex-row items-center justify-start gap-10 bg-transparent  p-4 pl-0 lg:top-[90%] `}>
-            <div
-              onClick={() => switchLight(!lightStatus)}
-              className={
-                'flex flex-row items-center gap-1 transition duration-300 ease-in-out hover:cursor-pointer hover:text-orange-500'
-              }>
-              <BsFillLightbulbFill />
-              <span>Light</span>
-            </div>
-          </div>
-          <div
-            className={`${
-              lightStatus ? 'hidden' : 'flex'
-            }  flex h-36 w-full  items-center justify-start`}>
-            <div className={'flex h-full w-full flex-row rounded '}>
-              <div
-                className={`${
-                  theme === 'dark' ? 'bg-app-dark-blue' : ''
-                } flex h-full  w-1/3 flex-col items-center justify-center p-2 text-center`}>
-                {`You are watching `}
-                <div className={' font-bold'}>
-                  {data ? data.imdb.imdb.name : ''}
-                </div>
-                <div>
-                  {' '}
-                  If current server doesn't work please try other servers
-                  beside.
-                </div>
-              </div>
-              <div
-                className={`${
-                  theme === 'dark' ? 'bg-app-dark-blue' : ''
-                } h-full  w-2/3 text-black`}>
-                <div
-                  className={
-                    'flex h-10 w-full flex-row flex-wrap items-center justify-start gap-7 p-5'
-                  }>
-                  {servers_.map((server, index) => {
-                    return (
-                      <div
-                        onClick={() => {
-                          if (server.servername === 'Vidsrc.me')
-                            setVideoServer(server.link + me)
-                          else if (server.servername === 'Vidsrc.to')
-                            setVideoServer(server.link + to)
-                          else
-                            setVideoServer(
-                              server.link + data?.imdb.imdb.tmdb_id
-                            )
-                        }}
-                        className={` ${
-                          videoServer.includes(server.servername.toLowerCase())
-                            ? ' bg-app-greyish-blue text-white '
-                            : ''
-                        } h-12 w-max rounded p-4 pt-3 text-center transition  duration-300 ease-in-out hover:scale-110 hover:cursor-pointer hover:bg-app-greyish-blue hover:text-white dark:text-white`}
-                        key={index}>
-                        {server.servername}
-                      </div>
-                    )
-                  })}
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </>
-  )
-}
-export default Movies

pages/play/tv.js

@@ -1,508 +0,0 @@
-import React, { useEffect, useState } from 'react'
-import { useRouter } from 'next/router'
-import Head from 'next/head'
-import { AiOutlineDown, AiOutlineRight } from 'react-icons/ai'
-import useSWR from 'swr'
-import { BsFillLightbulbFill } from 'react-icons/bs'
-import {
-  BiSolidSkipNextCircle,
-  BiSolidSkipPreviousCircle,
-} from 'react-icons/bi'
-import { useTheme } from 'next-themes'
-
-const servers_ = [
-  {
-    servername: 'Vidsrc.to',
-    link: 'https://vidsrc.to/embed/tv/',
-  },
-  {
-    servername: 'Vidsrc.me',
-    link: 'https://vidsrc.me/embed/tv?',
-  },
-  {
-    servername: 'Moviesapi.club',
-    link: 'https://moviesapi.club/tv/',
-  },
-  {
-    servername: 'Blackvid',
-    link: 'https://blackvid.space/embed?tmdb=',
-  },
-]
-const fetcher = (...args) => fetch(...args).then(res => res.json())
-
-const Tv = () => {
-  const router = useRouter()
-  const { id, tmdb } = router.query
-  const { theme, setTheme } = useTheme()
-  const { data } = useSWR(`/api/tv/${tmdb}`, fetcher)
-  const [tvDetails, setTvDetails] = useState({
-    episode: 1,
-    season: 1,
-  })
-  const [season, SetSeason] = useState([])
-  const [episodes, setEpisodes] = useState({})
-  const [seasonDropDown, setSeasonDropDown] = useState(false)
-  const [episodeDropDown, setEpisodeDropDown] = useState(false)
-  const [videoServer, setVideoServer] = useState(`vidsrc.to`)
-  const [lightStatus, switchLight] = useState(false)
-  const [nextBtn, showNextBtn] = useState(true)
-  const [prevBtn, showPrevBtn] = useState(true)
-  const [nextprevbtnclicked, setnextprevbtnclicked] = useState(false)
-  useEffect(() => {
-    let temp = []
-    if (data)
-      if (data.detail.seasons[0].name.includes('Specials'))
-        for (let i = 1; i < data.detail.seasons.length; i++) {
-          temp.push(i)
-        }
-      else
-        for (let i = 1; i <= data.detail.seasons.length; i++) {
-          temp.push(i)
-        }
-    SetSeason(temp)
-    let episode = []
-    let c = 1
-    if (data) {
-      if (data.detail.seasons[0].name.includes('Specials')) {
-        for (let k = 0; k < temp.length; k++) {
-          for (let i = 1; i < data.detail.seasons[c].episode_count + 1; i++)
-            episode.push(i)
-          episodes[c] = episode
-          c++
-          episode = []
-        }
-      } else {
-        c = 0
-        for (let k = 0; k < temp.length; k++) {
-          for (let i = 1; i < data.detail.seasons[c].episode_count + 1; i++)
-            episode.push(i)
-          episodes[c + 1] = episode
-          c++
-          episode = []
-        }
-      }
-    }
-  }, [seasonDropDown, episodeDropDown, nextprevbtnclicked])
-  useEffect(() => {
-    console.log(theme)
-    if (localStorage.getItem('userWatched')) {
-      let data = JSON.parse(localStorage.getItem('userWatched'))
-      let tvPresent = -1
-      if (id || tmdb) {
-        for (let i in data.tv) {
-          if (id) {
-            if (data.tv[i][0] === id) {
-              tvPresent = i
-            }
-          } else {
-            if (data.tv[i][0] === tmdb) {
-              tvPresent = i
-            }
-          }
-        }
-      }
-      if (id || tmdb)
-        if (tvPresent !== -1) {
-          setTvDetails({ season: data.tv[i][1], episode: data.tv[i][2] })
-        } else {
-          if (id || tmdb) {
-            if (id) data.tv.push([id, tvDetails.season, tvDetails.episode])
-            else data.tv.push([tmdb, tvDetails.season, tvDetails.episode])
-            localStorage.setItem('userWatched', JSON.stringify(data))
-          }
-        }
-    } else {
-      if (id || tmdb)
-        localStorage.setItem(
-          'userWatched',
-          JSON.stringify({
-            movies: [],
-            tv: [[id ? id : tmdb, tvDetails.season, tvDetails.episode]],
-          })
-        )
-    }
-  }, [id, tmdb])
-  useEffect(() => {
-    if (data !== undefined) {
-      if (localStorage.getItem('userWatched')) {
-        let dataa = JSON.parse(localStorage.getItem('userWatched'))
-        let tvPresent = -1
-        if (id || tmdb) {
-          for (let i in dataa.tv) {
-            if (id) {
-              if (dataa.tv[i][0] === id) {
-                tvPresent = i
-              }
-            } else {
-              if (dataa.tv[i][0] === tmdb) {
-                tvPresent = i
-              }
-            }
-          }
-        }
-        if (id || tmdb)
-          if (tvPresent !== -1) {
-            if (id)
-              dataa.tv[tvPresent] = [id, tvDetails.season, tvDetails.episode]
-            else
-              dataa.tv[tvPresent] = [tmdb, tvDetails.season, tvDetails.episode]
-            localStorage.setItem('userWatched', JSON.stringify(dataa))
-          } else {
-            if (id || tmdb) {
-              if (id) dataa.tv.push([id, tvDetails.season, tvDetails.episode])
-              else dataa.tv.push([tmdb, tvDetails.season, tvDetails.episode])
-              localStorage.setItem('userWatched', JSON.stringify(dataa))
-            }
-          }
-      }
-      if (tvDetails.season === 1 && tvDetails.episode === 1) {
-        showPrevBtn(false)
-      } else {
-        showPrevBtn(true)
-      }
-      if (
-        tvDetails.season === season[season.length - 1] &&
-        tvDetails.episode ===
-          episodes[tvDetails.season][episodes[tvDetails.season].length - 1]
-      ) {
-        showNextBtn(false)
-      } else {
-        showNextBtn(true)
-      }
-      let inputstrings = `${data?.detail.name}season`
-      let inputStringe = `${data?.detail.name}episode`
-      if (
-        localStorage.getItem(inputstrings.replace(/\s+/g, '').toLowerCase())
-      ) {
-        localStorage.setItem(
-          inputstrings.replace(/\s+/g, '').toLowerCase(),
-          tvDetails.season
-        )
-      }
-      if (
-        localStorage.getItem(inputStringe.replace(/\s+/g, '').toLowerCase())
-      ) {
-        localStorage.setItem(
-          inputStringe.replace(/\s+/g, '').toLowerCase(),
-          tvDetails.episode
-        )
-      }
-      if (videoServer.includes('vidsrc.me'))
-        setVideoServer(
-          `https://vidsrc.me/embed/tv?${
-            tmdb ? `tmdb=${tmdb}` : `imdb=${id}`
-          }&season=${tvDetails.season}&episode=${tvDetails.episode}`
-        )
-      if (videoServer.includes('vidsrc.to'))
-        setVideoServer(
-          `https://vidsrc.to/embed/tv/${tmdb ? `${tmdb}` : `${id}`}/${
-            tvDetails.season
-          }/${tvDetails.episode}`
-        )
-      else if (videoServer.includes('moviesapi.club'))
-        setVideoServer(
-          `https://moviesapi.club/tv/${tmdb}-${tvDetails.season}-${tvDetails.episode}`
-        )
-      else if (videoServer.includes('blackvid.space'))
-        setVideoServer(
-          `https://blackvid.space/embed?tmdb=${tmdb}&season=${tvDetails.season}&episode=${tvDetails.episode}`
-        )
-    }
-  }, [tvDetails])
-  console.log(data?.detail?.seasons[0].poster_path)
-
-  //adding event listener for window to catch left click to remove light setting
-  useEffect(() => {
-    document.addEventListener('mousedown', event => {
-      if (
-        event.target !== 'iframe' &&
-        event.target.tagName.toLowerCase() !== 'span'
-      ) {
-        switchLight(false)
-      }
-    })
-  }, [])
-  return (
-    <>
-      <Head>
-        <title>Play Tv | Yaps</title>
-      </Head>
-      <div
-        className={`left-0  top-0 z-[997] w-full bg-black transition duration-300 ease-in-out ${
-          lightStatus ? 'opacity-1 fixed h-screen ' : 'h-0 w-0 opacity-0'
-        }`}></div>
-      <div
-        className={` flex w-full flex-col   ${
-          lightStatus ? '' : 'h-full'
-        } z-[999] h-full`}>
-        {/*<img src={`${TMDB_IMAGE_ENDPOINT}/${images}`}/>*/}
-        <div className={'h-16 w-full pb-2 text-3xl'}>
-          {data?.detail.name} S{tvDetails.season} E{tvDetails.episode}
-        </div>
-        <iframe
-          src={
-            videoServer !== 'vidsrc.to'
-              ? videoServer
-              : `https://vidsrc.to/embed/tv/${tmdb ? tmdb : id}/${
-                  tvDetails.season
-                }/${tvDetails.episode}`
-          }
-          className={'z-50 '}
-          style={{ width: '100%', height: '92vh' }}
-          allowFullScreen='allowfullscreen'></iframe>
-        <div
-          className={
-            'flex w-full flex-row items-center justify-between gap-10 bg-transparent p-4 pl-0'
-          }>
-          <div>
-            <div
-              className={'relative flex w-44 items-center justify-start gap-1'}>
-              <div className={'relative'}>
-                <BiSolidSkipPreviousCircle
-                  size={35}
-                  onClick={() => {
-                    setnextprevbtnclicked(true)
-                    let current_Episode = tvDetails.episode
-                    let current_Season = tvDetails.season
-                    if (episodes[current_Season]) {
-                      if (
-                        episodes[current_Season].indexOf(current_Episode) === 0
-                      ) {
-                        if (season.indexOf(tvDetails.season) !== 0) {
-                          setTvDetails({
-                            season: current_Season - 1,
-                            episode:
-                              episodes[current_Season - 1][
-                                episodes[current_Season].length - 1
-                              ],
-                          })
-                        }
-                      } else {
-                        setTvDetails(prev => {
-                          return { ...prev, episode: current_Episode - 1 }
-                        })
-                      }
-                    }
-                  }}
-                  className={`${
-                    prevBtn ? 'block' : 'hidden'
-                  } control-button transition duration-300 ease-in-out hover:scale-125`}
-                />
-                <div
-                  className={
-                    'tooltip-div absolute left-5 z-50 hidden w-10 bg-[#222222] text-center'
-                  }>
-                  Prev
-                </div>
-              </div>
-              <div
-                className={'relative'}
-                onClick={() => {
-                  let current_Episode = tvDetails.episode
-                  let current_Season = tvDetails.season
-                  setnextprevbtnclicked(true)
-                  if (episodes[tvDetails.season]) {
-                    if (
-                      episodes[tvDetails.season].indexOf(current_Episode) ===
-                      episodes[tvDetails.season].length - 1
-                    ) {
-                      if (
-                        season.indexOf(tvDetails.season) !==
-                        season.length - 1
-                      ) {
-                        setTvDetails({
-                          season: current_Season + 1,
-                          episode: 1,
-                        })
-                      }
-                    } else {
-                      setTvDetails(prev => {
-                        return { ...prev, episode: current_Episode + 1 }
-                      })
-                    }
-                  }
-                }}>
-                <BiSolidSkipNextCircle
-                  size={35}
-                  className={`${
-                    nextBtn ? 'block' : 'hidden'
-                  } control-button transition duration-300 ease-in-out hover:scale-125`}
-                />
-                <div
-                  className={
-                    'tooltip-div absolute left-5 z-50 hidden w-10 bg-[#222222] text-center'
-                  }>
-                  Next
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            className={`flex items-center justify-center gap-10 ${
-              lightStatus ? 'text-white' : ''
-            }`}>
-            <div
-              onClick={() => switchLight(!lightStatus)}
-              className={
-                'flex flex-row items-center gap-1 transition duration-300 ease-in-out hover:cursor-pointer hover:text-orange-500'
-              }>
-              <BsFillLightbulbFill />
-              <span>Light</span>
-            </div>
-            <div className={'relative w-32 '}>
-              <div
-                className={
-                  'z-50 flex cursor-pointer flex-row items-center justify-center   gap-2 rounded bg-[#151515] text-white  outline-0 dark:bg-inherit'
-                }
-                onClick={() => {
-                  setSeasonDropDown(!seasonDropDown)
-                  setEpisodeDropDown(false)
-                }}>
-                Season {tvDetails.season}
-                <span className={'pt-1 transition duration-300 ease-in-out'}>
-                  {seasonDropDown ? <AiOutlineDown /> : <AiOutlineRight />}
-                </span>
-              </div>
-              <div
-                className={` absolute  z-40  h-44 w-44  flex-col  items-center justify-center overflow-y-scroll font-normal text-white transition duration-300 ease-in-out ${
-                  seasonDropDown
-                    ? 'opacity-1 translate-y-0'
-                    : 'translate-y-[-150%]   opacity-0'
-                } `}>
-                <ul className={''}>
-                  {season !== [] ? (
-                    season.map((season, index) => {
-                      return (
-                        <li
-                          key={index}
-                          onClick={() => {
-                            setTvDetails({ season: season, episode: 1 })
-                            setSeasonDropDown(false)
-                          }}
-                          className={`dropdown-scroll relative flex  h-12 w-full items-center justify-evenly bg-app-semi-dark-blue pl-2 hover:cursor-pointer hover:bg-amber-700 ${
-                            tvDetails.season === season ? 'bg-amber-700' : ''
-                          }`}>
-                          Season <span>{season}</span>
-                        </li>
-                      )
-                    })
-                  ) : (
-                    <li>No Seasons</li>
-                  )}
-                </ul>
-              </div>
-            </div>
-            <div className={'relative w-32 '}>
-              <div
-                className={
-                  'z-50 flex flex-row items-center justify-center gap-2 rounded   bg-[#151515] text-white dark:bg-inherit'
-                }
-                onClick={() => {
-                  setEpisodeDropDown(!episodeDropDown)
-                  setSeasonDropDown(false)
-                }}>
-                Episode {tvDetails.episode}
-                <span className={'pt-1 transition duration-300 ease-in-out'}>
-                  {episodeDropDown ? <AiOutlineDown /> : <AiOutlineRight />}
-                </span>
-              </div>
-              <div
-                className={` absolute   z-40 h-44 w-44 flex-col  items-center  justify-center overflow-y-scroll bg-app-semi-dark-blue font-normal text-white transition duration-300 ease-in-out ${
-                  episodeDropDown
-                    ? 'opacity-1 translate-y-0'
-                    : 'translate-y-[-150%]   opacity-0'
-                } `}>
-                <ul className={''}>
-                  {episodes[tvDetails.season] ? (
-                    episodes[tvDetails.season].map((episode, index) => {
-                      return (
-                        <li
-                          key={index}
-                          onClick={() => {
-                            setTvDetails(prev => {
-                              return { ...prev, episode: episode }
-                            })
-                            setEpisodeDropDown(false)
-                          }}
-                          className={`dropdown-scroll relative  flex h-12 w-full items-center justify-evenly pl-2 hover:cursor-pointer hover:bg-amber-700 ${
-                            tvDetails.episode === episode ? 'bg-amber-700' : ''
-                          }`}>
-                          Episode <span>{episode}</span>
-                        </li>
-                      )
-                    })
-                  ) : (
-                    <li>No Episode</li>
-                  )}
-                </ul>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <div
-          className={` ${
-            lightStatus ? 'hidden' : 'flex'
-          } h-36 w-full  items-center justify-start`}>
-          <div className={'flex h-full w-full flex-row rounded '}>
-            <div
-              className={`h-full w-1/3 p-2 text-center text-black dark:text-white`}>
-              {`You are watching `}
-              <div className={' font-bold'}>{data ? data.detail.name : ''}</div>
-              <div>
-                {' '}
-                If current server doesn't work please try other servers beside.
-              </div>
-            </div>
-            <div className={` h-full w-2/3`}>
-              <div
-                className={
-                  'flex h-10 w-full flex-row flex-wrap items-center justify-start gap-7 p-5'
-                }>
-                {servers_.map((server, index) => {
-                  return (
-                    <div
-                      onClick={() => {
-                        if (server.servername === 'Vidsrc.me')
-                          setVideoServer(
-                            `${server.link}${
-                              tmdb ? `tmdb=${tmdb}` : `imdb=${id}`
-                            }&season=${tvDetails.season}&episode=${
-                              tvDetails.episode
-                            }`
-                          )
-                        else if (server.servername === 'Vidsrc.to')
-                          setVideoServer(
-                            `${server.link}${tmdb ? `${tmdb}` : `${id}`}/${
-                              tvDetails.season
-                            }/${tvDetails.episode}`
-                          )
-                        else if (server.servername === 'Moviesapi.club')
-                          setVideoServer(
-                            `${server.link}${tmdb}-${tvDetails.season}-${tvDetails.episode}`
-                          )
-                        else
-                          setVideoServer(
-                            `${server.link}${tmdb}&season=${tvDetails.season}&episode=${tvDetails.episode}`
-                          )
-                      }}
-                      className={`  ${
-                        videoServer.includes(server.servername.toLowerCase())
-                          ? 'bg-app-greyish-blue'
-                          : ''
-                      } h-8 w-max rounded p-3 text-center transition duration-300 ease-in-out hover:scale-110 hover:cursor-pointer dark:text-white `}
-                      key={index}>
-                      {server.servername}
-                    </div>
-                  )
-                })}
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </>
-  )
-}
-
-export default Tv

pages/post-detail/[id]/[slug].js

@@ -1,189 +1,149 @@
-import { useRouter } from 'next/router'
-import React, { useEffect, useState } from 'react'
-import { Loader } from '../../../Common/Loader'
-import {
-  getListComment,
-  movieDetailsPost,
-  postComment,
-} from '../../../service/service'
-import moment from 'moment'
-import { formatBytes } from '../../../Common/CardExpanded'
-import YouTube from 'react-youtube'
-import ToastMsg from '../../../Common/ToastMsg'
-import Head from 'next/head'
+import { useRouter } from 'next/router';
+import React, { useEffect, useState, useSyncExternalStore } from 'react'
+import { Loader } from '../../../Common/Loader';
+import { getListComment, movieDetailsPost, postComment } from '../../../service/service';
+import moment from 'moment';
+import { formatBytes } from '../../../Common/CardExpanded';
+import YouTube from "react-youtube";
 const Details = () => {
+
   let trackers = [
-    'udp://tracker.therarbg.com:6969/announce',
-    'udp://tracker.t-rb.org:6969/announce',
-    'udp://tracker.opentrackr.org:1337/announce',
-    'udp://opentracker.i2p.rocks:6969/announce',
-    'udp://tracker.openbittorrent.com:6969/announce',
-    'udp://open.demonii.com:1337/announce',
-    'udp://exodus.desync.com:6969/announce',
-    'udp://open.stealth.si:80/announce',
-    'udp://tracker.torrent.eu.org:451/announce',
-    'udp://tracker.moeking.me:6969/announce',
-    'udp://tracker1.bt.moack.co.kr:80/announce',
-    'udp://tracker.bitsearch.to:1337/announce',
-    'udp://explodie.org:6969/announce',
-    'udp://tracker.tiny-vps.com:6969/announce',
-    'udp://tracker.theoks.net:6969/announce',
-    'udp://p4p.arenabg.com:1337/announce',
-    'udp://movies.zsw.ca:6969/announce',
+    "udp://tracker.therarbg.com:6969/announce",
+    "udp://tracker.t-rb.org:6969/announce",
+    "udp://tracker.opentrackr.org:1337/announce",
+    "udp://opentracker.i2p.rocks:6969/announce",
+    "udp://tracker.openbittorrent.com:6969/announce",
+    "udp://open.demonii.com:1337/announce",
+    "udp://exodus.desync.com:6969/announce",
+    "udp://open.stealth.si:80/announce",
+    "udp://tracker.torrent.eu.org:451/announce",
+    "udp://tracker.moeking.me:6969/announce",
+    "udp://tracker1.bt.moack.co.kr:80/announce",
+    "udp://tracker.bitsearch.to:1337/announce",
+    "udp://explodie.org:6969/announce",
+    "udp://tracker.tiny-vps.com:6969/announce",
+    "udp://tracker.theoks.net:6969/announce",
+    "udp://p4p.arenabg.com:1337/announce",
+    "udp://movies.zsw.ca:6969/announce",
+
   ]
 
-  let temp = '&tr='
-  let tracker = ''
-  trackers.map(item => {
-    tracker =  tracker + temp + item
+
+
+  let temp = "&tr="
+  let tracker = ""
+  trackers.map((item) => {
+    tracker = tracker + temp + item
   })
-  const router = useRouter()
-  let id
-  let slug
+
+  const router = useRouter();
+  let id;
+  let slug;
   const [loader, setLoader] = useState(false)
   const [data, setData] = useState()
-  const [comment, setComment] = useState('')
-  const [eid, setEid] = useState('')
+  const [comment, setComment] = useState("")
+  const [eid, setEid] = useState("")
   const [commentList, setCommentList] = useState([])
-  const [magnateDownload, setMagnateDownload] = useState('')
-  const [torrentDownload, setTorrentDownload] = useState('')
-  const [highligth, setHighLight] = useState('Trackers')
+  const [magnateDownload, setMagnateDownload] = useState("")
+  const [torrentDownload, setTorrentDownload] = useState("")
+  const [highligth, setHighLight] = useState("Trackers")
 
   useEffect(() => {
     if (router.isReady) {
-      id = router.query.id
-      slug = router.query.slug
-      if (!id) return null
+      id = router.query.id;
+      slug = router.query.slug;
+      if (!id) return null;
       getDetails()
     }
-  }, [router.isReady])
+
+  }, [router.isReady]);
 
   const getDetails = () => {
     setLoader(true)
-    movieDetailsPost(id, slug)
-      .then(res => {
-        setLoader(false)
+    movieDetailsPost(id, slug).then((res) => {
+      setLoader(false)
 
-        let url = `magnet:?xt=urn:btih:${res?.data?.info_hash}&dn=${res?.data?.name}${tracker}`
-        let url_t = `https://m2t.mirrorbay.org/info-hash/${res?.data?.info_hash}/${res?.data?.name}/?apikey=therarbg`
-        setMagnateDownload(url)
-        setTorrentDownload(url_t)
+      let url = `magnet:?xt=urn:btih:${res?.data?.info_hash}&dn=${res?.data?.name}${trackers}`
+      let url_t = `https://m2t.mirrorbay.org/info-hash/${res?.data?.info_hash}/${res?.data?.name}/?apikey=therarbg`
+      setMagnateDownload(url)
+      setTorrentDownload(url_t)
 
-        setData(res?.data)
-        setEid(res?.data?.eid)
-        getCommentInfo(res?.data?.eid)
-      })
-      .catch(err => {
-        setLoader(false)
-        console.log(err)
-      })
+
+
+      setData(res?.data)
+      setEid(res?.data?.eid)
+      getCommentInfo(res?.data?.eid)
+
+    }).catch((err) => {
+      setLoader(false)
+      console.log(err)
+    })
   }
 
-  const getCommentInfo = value => {
+  const getCommentInfo = (value) => {
     setLoader(true)
-    let token = localStorage.getItem('access_token')
-    getListComment(value, token)
-      .then(res => {
-        console.log('response', res)
-        setLoader(false)
-        setCommentList(res?.data?.results)
-      })
-      .catch(err => {
-        setLoader(false)
-        console.log('error  :', err)
-      })
+    let token = localStorage.getItem("access_token")
+    getListComment(value, token).then((res) => {
+      console.log("response", res)
+      setLoader(false)
+      setCommentList(res?.data?.results)
+    }).catch((err) => {
+      setLoader(false)
+      console.log("error  :", err)
+    })
   }
   const postCommentInfo = () => {
     setLoader(true)
-    let token = localStorage.getItem('access_token')
+    let token = localStorage.getItem("access_token")
     if (!token) {
-      router.push('/login')
+      router.push("/login")
     }
     let data = {
       trb_post: eid,
-      comment: comment,
+      comment: comment
     }
-    postComment(data, token)
-      .then(res => {
-        console.log('response', res)
-        getCommentInfo(eid)
-      })
-      .catch(err => {
-        setLoader(false)
-        if (err?.res?.status === 401) {
-          window.location.hre = '/'
-        }
-        console.log('error  :', err)
-      })
+    postComment(data, token).then((res) => {
+      console.log("response", res)
+      getCommentInfo(eid)
+    }).catch((err) => {
+      setLoader(false)
+      if (err?.res?.status === 401) {
+        window.location.hre = "/"
+      }
+      console.log("error  :", err)
+    })
   }
 
+
   const opts = {
-    height: '300px',
-    width: '100%',
-    border: '8px',
+    height: "300px",
+    width: "100%",
+    border: "8px",
     playerVars: {
       autoplay: 0,
     },
-  }
-  const [disabledToast, setDisabledToast] = useState(false)
-  const copyToClipBoard = async () => {
-    if (disabledToast) {
-      return
-    }
-    try {
-      await navigator.clipboard.writeText(magnateDownload)
-      ToastMsg('Copied!', 'success')
-      setDisabledToast(true)
-      setTimeout(() => {
-        setDisabledToast(false)
-      }, 3000)
-    } catch (err) {
-      console.log('pp', err)
-      ToastMsg('Failed to copy!', 'error')
-    }
-  }
-  console.log(data);
+  };
 
   return (
     <div>
       {loader ? <Loader /> : null}
-      <Head>
-        <title>{data?.name} | Yaps</title>
-      </Head>
-      <div className='m-auto w-full pb-5'>
-        <div className='dark:bg-card flex w-full flex-col justify-start rounded-lg border-gray-200 border-opacity-30  bg-gray-600 bg-opacity-10 p-10  md:flex-row'>
-          <div className='relative mx-auto w-[50%] p-2 md:w-[15%]'>
-            <img
-              src={
-                data?.thumbnail
-                  ? data?.thumbnail
-                  : 'https://i.therarbg.com/np.jpg'
-              }
-              width={800}
-              height={100}
-              alt='movie'
-            />
+
+      <div className='w-full pb-5 m-auto'>
+        <div className="w-full bg-card bg-opacity-10 rounded-lg border-gray-200 border-opacity-30 justify-start flex flex-col md:flex-row">
+          <div className="w-[50%] md:w-[15%] mx-auto p-2 relative">
+            <img src={data?.thumbnail ? data?.thumbnail : "https://i.therarbg.com/np.jpg"} width={800} height={100} alt='movie' />
           </div>
 
-          <div className='long-and-truncated flex h-auto w-[94%] flex-col justify-around p-2 text-[16px] text-app-dark-blue text-opacity-80 dark:text-gray-200  md:w-[50%] '>
-            <h1>{data?.name}</h1>
+          <div className="w-[94%] md:w-[50%] flex flex-col justify-around text-gray-200 text-opacity-80 text-[16px] p-2 h-auto  long-and-truncated ">
+            <h1 >{data?.name}</h1>
             <div className='flex space-x-4 '>
-              <a
-                href={`/get-posts/category:${data?.category_str}`}
-                className='my-4 cursor-pointer border-primary bg-primary/10 px-2 text-xs text-primary hover:bg-primary/30'
-                style={{ border: 'none', fontWeight: '400' }}>
-                {data?.category_str}
-              </a>
-              <span
-                className='my-4 border-primary bg-primary/10 px-2 text-xs text-primary hover:bg-primary/30'
-                style={{ border: 'none', fontWeight: '400' }}>
-                {' '}
-                &#128077; {data?.imdb_data?.rating}
-              </span>
+              <a  href={`/get-posts/category:${data?.category_str}`}  className='cursor-pointer px-2 bg-primary/10 text-primary border-primary my-4 text-xs hover:bg-primary/30' style={{ border: "none", fontWeight: "400" }}>{data?.category_str}</a>
+              <span className='px-2 bg-primary/10 text-primary border-primary my-4 text-xs hover:bg-primary/30' style={{ border: "none", fontWeight: "400" }}> &#128077; {data?.imdb_data?.rating}</span>
               {/* <span className='px-2 bg-primary/10 text-primary border-primary my-4 text-xs hover:bg-primary/30' style={{ border: "none", fontWeight: "400" }}> &#x1F44D; 0</span> */}
             </div>
 
-            <div className='bottom-[0.7rem] flex w-full justify-between text-[13px]  text-app-dark-blue dark:text-gray-200'>
+
+            <div className='flex w-full justify-between text-gray-200 text-[13px] bottom-[0.7rem]'>
               <div>
                 <span>Seeders</span>
                 <span>Leechers</span>
@@ -196,198 +156,123 @@ const Details = () => {
                 <span>{data?.leechers}</span>
                 <span>{formatBytes(data?.size)}</span>
                 <span>{data?.downloads}</span>
-                <span>{moment(data?.timestamp).format('MMMM Do YYYY')}</span>
+                <span>{moment(data?.timestamp).format("MMMM Do YYYY")}</span>
               </div>
             </div>
           </div>
 
-          <div className='relative h-auto w-full min-w-0 flex-1 p-2 text-right text-[16px] text-gray-200 text-opacity-80 md:mx-1 md:w-[35%]'>
-            <div className='flex h-full flex-col justify-around'>
+          <div className="w-full md:w-[35%] text-gray-200 text-opacity-80 text-[16px] p-2 h-auto flex-1 min-w-0 md:mx-1 relative text-right" >
+            <div className='flex flex-col justify-around h-full'>
               <div className='flex flex-col items-end'>
-                <button
-                  className='my-3 w-full rounded border-primary bg-primary/10 bg-gradient-to-r from-green-400 via-purple-500 to-purple-600 px-[2rem] py-2 text-[15px] text-gray-100  hover:text-app-dark-blue  xl:w-[70%]'
-                  onClick={() => {
-                    window.open(torrentDownload, '_self')
-                  }}>
-                  Torrent Download
-                </button>
-               {data?.imdb && <button
-                  className='my-3 w-full rounded border-primary bg-primary/10 bg-gradient-to-r from-[#420075] via-purple-500 to-[#FF0054] px-[2rem] py-2 text-[15px] text-gray-100  hover:text-app-dark-blue  xl:w-[70%]'
-                  onClick={() => {
-                    router.push(`/play/${data?.category_str.toLowerCase()}?id=${data?.imdb}&tmdb=${data?.imdb_data.tmdb_id}`)
-                  }}>
-                  Play Now
-                </button>
-}
-                <button
-                  className='my-3 w-full rounded border-primary bg-primary/10  bg-gradient-to-r  from-violet-500 via-purple-500 to-indigo-900 px-[2rem] py-2 text-[15px] text-gray-100 hover:text-app-dark-blue xl:w-[70%]'
-                  onClick={() => {
-                    copyToClipBoard()
-                  }}>
-                  &#129522; Copy To Clipboard{' '}
-                </button>
-                <button
-                  className='w-full rounded border-primary bg-primary/10 bg-gradient-to-r  from-green-400  via-blue-500 to-blue-600 px-[2rem] py-2 text-[15px] text-gray-100 hover:text-app-dark-blue xl:w-[70%]'
-                  onClick={() => {
-                    window.open(magnateDownload, '_blank')
-                  }}>
-                  &#129522; Magnet Download{' '}
-                </button>
+                <button className='w-full xl:w-[70%] px-[2rem] py-2 bg-primary/10 text-gray-100 border-primary my-4 text-[15px] rounded bg-gradient-to-r from-green-400 via-purple-500  to-purple-600  hover:text-primary' onClick={() => {
+                  window.open(torrentDownload, '_blank')
+                }} >Torrent Download</button>
+                <button className='w-full xl:w-[70%] px-[2rem] py-2 bg-primary/10  border-primary  text-[15px] text-gray-100 rounded bg-gradient-to-r from-green-400 via-blue-500 to-blue-600 hover:text-primary' onClick={() => {
+                  window.open(magnateDownload, '_blank')
+                }}  >&#129522; Magnet Download</button>
               </div>
+              <div className='align-bottom flex bottom-2 justify-end'>
+                <button className='px-[1.4rem] w-[50%] xl:w-[35%] py-2 bg-primary/10 text-primary rounded border-primary mr-[0.4rem]  text-[13px] hover:bg-primary/30 mt-4' style={{ border: "none", fontWeight: "400" }} onClick={() => {
+                  window.location.reload()
+                }} > &#8634; Refresh</button>
+                <button className='px-[1.4rem] w-[50%] xl:w-[35%] py-2 bg-primary/10 text-primary rounded border-primary ml-[0.4rem] text-[13px] hover:bg-primary/30 mt-4' style={{ border: "none", fontWeight: "400" }} > !&#x20DD; Report</button>
 
-              <div className='bottom-2 flex justify-end align-bottom'>
-                <button
-                  className='mr-[0.4rem] mt-4 w-[50%] rounded border-primary bg-primary/10 px-[1.4rem] py-2 text-[13px]  text-primary hover:bg-primary/30 xl:w-[35%]'
-                  style={{ border: 'none', fontWeight: '400' }}
-                  onClick={() => {
-                    window.location.reload()
-                  }}>
-                  {' '}
-                  &#8634; Refresh
-                </button>
-                <button
-                  className='ml-[0.4rem] mt-4 w-[50%] rounded border-primary bg-primary/10 px-[1.4rem] py-2 text-[13px] text-primary hover:bg-primary/30 xl:w-[35%]'
-                  style={{ border: 'none', fontWeight: '400' }}>
-                  !Report
-                </button>
               </div>
             </div>
           </div>
         </div>
         <br />
-        <div
-          className={`mb-6 grid gap-2 ${
-            data?.imdb_data?.video_list[0]?.key
-              ? 'md:grid-cols-3'
-              : 'md:grid-cols-2'
-          }`}>
+        <div className={`grid gap-2 mb-6 ${data?.imdb_data?.video_list[0]?.key ? "md:grid-cols-3" : "md:grid-cols-2"}`}>
           <div>
-            <div className='mb-4 flex space-x-4 text-[13px]  text-app-dark-blue dark:text-gray-200'>
-              <span
-                className={`mb-[5px] cursor-pointer  rounded px-[0.5rem]  ${
-                  highligth === 'Files' ? 'bg-primary/10' : ''
-                }`}
-                onClick={() => setHighLight('Files')}>
-                Files
-              </span>
-              <span
-                className={`mb-[5px] cursor-pointer  rounded px-[0.5rem]  ${
-                  highligth === 'Trackers' ? 'bg-primary/10' : ''
-                }`}
-                onClick={() => setHighLight('Trackers')}>
-                Trackers
-              </span>
-              <span
-                className={`mb-[5px] cursor-pointer  rounded px-[0.5rem]  ${
-                  highligth === 'More' ? 'bg-primary/10' : ''
-                }`}
-                onClick={() => setHighLight('More')}>
-                More Info
-              </span>
+            <div className='flex space-x-4 text-gray-500 text-[13px] mb-4'>
+              <span className={`cursor-pointer mb-[5px]  px-[0.5rem] rounded  ${highligth === "Files" ? "bg-primary/10" : ""}`} onClick={() => setHighLight("Files")} >Files</span>
+              <span className={`cursor-pointer mb-[5px]  px-[0.5rem] rounded  ${highligth === "Trackers" ? "bg-primary/10" : ""}`} onClick={() => setHighLight("Trackers")} >Trackers</span>
+              <span className={`cursor-pointer mb-[5px]  px-[0.5rem] rounded  ${highligth === "More" ? "bg-primary/10" : ""}`} onClick={() => setHighLight("More")} >More Info</span>
             </div>
-            <div
-              className='dark:bg-card h-[300px] overflow-y-scroll rounded-lg border-gray-200 border-opacity-30 bg-white bg-opacity-10 p-2  text-app-dark-blue dark:text-gray-300'
-              style={{ fontSize: '14px' }}>
-              {trackers.map((item, index) => {
-                return (
-                  <p
-                    className='long-and-truncated w-fit break-all p-1 font-light'
-                    key={index}>
-                    {item}
-                  </p>
-                )
-              })}
-            </div>
-          </div>
-
-          {data?.imdb_data?.video_list[0]?.key ? (
-            <div className='text-gray-300'>
-              <span className='pl-5'>Trailer</span>
-
-              <YouTube
-                videoId={data?.imdb_data?.video_list[0]?.key}
-                style={{ borderRadius: '8px', marginTop: '17px' }}
-                opts={opts}
-              />
-            </div>
-          ) : null}
-
-          <div className=' text-app-dark-blue dark:text-gray-300'>
-            <span className='pl-5'>Similar Torrents</span>
-            <div
-              className='dark:bg-card h-[300px] w-full overflow-y-scroll rounded-lg border-gray-200 border-opacity-30  bg-white bg-opacity-10 pt-2'
-              style={{ marginTop: '17px' }}>
-              {data?.recomendations.length > 0 ? (
-                data?.recomendations?.map((item, index) => {
+            <div className='p-2 text-gray-300 overflow-y-scroll bg-card bg-opacity-10 h-[300px] rounded-lg border-gray-200 border-opacity-30' style={{ fontSize: "14px" }}>
+              {
+                trackers.map((item, index) => {
                   return (
-                    <div
-                      key={index}
-                      onClick={() => {
-                        let slug = item[`n`]
-                          .toLowerCase()
-                          .trim()
-                          .replace(/[^\w\s-]/g, '')
-                          .replace(/[\s_-]+/g, '-')
-                          .replace(/^-+|-+$/g, '')
-                        window.location.href = `/post-detail/${item?.pk}/${slug}/`
-                      }}
-                      className='long-and-truncated   m-3 w-fit cursor-pointer  break-all  text-app-dark-blue dark:text-gray-300'
-                      style={{ fontSize: '14px' }}>
-                      <p>{item[`n`]}</p>
-                      <div className='item-center flex text-[12px] text-off-white'>
-                        <span
-                          className='my-4 mr-3 rounded border-primary bg-primary/10 px-2 py-[1.5px] text-xs text-primary hover:bg-primary/30'
-                          style={{ border: 'none', fontWeight: '400' }}>
-                          {item['c']}
-                        </span>
-                        <span className='my-4 mr-3 rounded border-primary bg-primary/10 px-2 py-[1.5px] text-xs text-primary hover:bg-primary/30'>
-                          <i className='fa fa-database mx-4 text-primary'></i>{' '}
-                          {'  ' + formatBytes(item[`s`])}
-                        </span>
-                      </div>
-                    </div>
+                    <p className='p-1 long-and-truncated font-medium w-fit break-all' key={index}>
+                      {item}
+                    </p>
                   )
                 })
-              ) : (
+              }
+            </div>
+          </div>
+
+
+
+          {data?.imdb_data?.video_list[0]?.key ? <div className='text-gray-300'>
+            <span className='pl-5'>Trailer</span>
+
+            <YouTube videoId={data?.imdb_data?.video_list[0]?.key} style={{ borderRadius: "8px", marginTop: '17px' }}
+              opts={opts} />
+          </div>
+            : null}
+
+          <div className='text-gray-300'>
+            <span className='pl-5'>Similar Torrents</span>
+            <div className='bg-card pt-2 w-full bg-opacity-10 overflow-y-scroll rounded-lg  h-[300px] border-gray-200 border-opacity-30' style={{ marginTop: '17px' }}>
+              {data?.recomendations.length > 0 ?
+                data?.recomendations?.map((item, index) => {
+                  return (
+                    <div key={index} onClick={() => {
+                      let slug = item[`n`].toLowerCase().trim().replace(/[^\w\s-]/g, '').replace(/[\s_-]+/g, '-').replace(/^-+|-+$/g, '');
+                      window.location.href = `/post-detail/${item?.pk}/${slug}/`;
+                    }} className='cursor-pointer   text-gray-300 m-3 long-and-truncated  w-fit break-all' style={{ fontSize: "14px" }}>
+
+                      <p >
+                        {item[`n`]}
+                      </p>
+                      <div className='text-off-white flex item-center text-[12px]'>
+                        <span className='px-2 bg-primary/10 text-primary mr-3 py-[1.5px] rounded border-primary my-4 text-xs hover:bg-primary/30' style={{ border: "none", fontWeight: "400" }}>{item['c']}</span>
+                        <span className='px-2 bg-primary/10 text-primary mr-3 py-[1.5px] rounded border-primary my-4 text-xs hover:bg-primary/30'>
+                          <i className="fa fa-database text-primary mx-4"></i>  {"  " + formatBytes(item[`s`])}
+                        </span>
+                      </div>
+
+                    </div>
+
+                  )
+                })
+                :
                 <div className='nosimilar_torrent'>
                   <h1>Sorry No Similar Torrents available</h1>
-                </div>
-              )}
+                </div>}
+
+
             </div>
+
+          </div>
+
+        </div>
+
+        <div className="w-full mt-[2rem] p-10 bg-card bg-opacity-10 rounded-lg border-gray-200 border-opacity-30 justify-start inline-grid relative">
+          <div className='mb-2  w-[90%]'>
+            {
+              commentList?.map((item, index) => {
+                return (
+                  <div key={index} className='p-3 bg-card bg-opacity-10 rounded-lg border-gray-200 border-opacity-30'>
+                    <h1>{item?.info?.user}:</h1><span>
+                      {item?.comment || "This IS A GOOD movie"}
+                    </span>
+                  </div>
+                )
+              })
+            }
+          </div>
+          <div className='mb-2 w-[90%]'>
+            <input type="text" className='w-full  border-gray-200 w-[90%] rounded border-opacity-30 text-[12px] bg-card bg-opacity-10 p-2 px-3 text-gray-500' onChange={(e) => setComment(e.target.value)} placeholder="Write your comments here" />
+            <button onClick={postCommentInfo} className='px-2 py-[2.5px] rounded w-[100px] bg-primary/10 text-primary border-primary my-4 text-xs hover:bg-primary/30' style={{ border: "solid 0.5px", fontWeight: "400" }} >POST</button>
           </div>
         </div>
 
-        <div className='dark:bg-card relative mt-[2rem] inline-grid w-full justify-start rounded-lg border-gray-200 border-opacity-30 bg-white bg-opacity-10 p-10'>
-          <div className='mb-2  w-[90%]'>
-            {commentList?.map((item, index) => {
-              return (
-                <div
-                  key={index}
-                  className='dark:bg-card rounded-lg border-gray-200 border-opacity-30 bg-white bg-opacity-10 p-3'>
-                  <h1>{item?.info?.user}:</h1>
-                  <span>{item?.comment || 'This IS A GOOD movie'}</span>
-                </div>
-              )
-            })}
-          </div>
-          <div className='mb-2 w-[90%]'>
-            <input
-              type='text'
-              className='dark:bg-card  w-[90%] w-full rounded border-gray-200 border-opacity-30  bg-app-dark-blue bg-opacity-10 p-2 px-3 text-[12px] text-app-dark-blue placeholder:text-app-dark-blue dark:bg-white dark:text-gray-500 dark:placeholder:text-app-pure-white'
-              onChange={e => setComment(e.target.value)}
-              placeholder='Write your comments here'
-            />
-            <button
-              onClick={postCommentInfo}
-              className='my-4 w-[100px] rounded border-primary bg-primary/10 px-2 py-[2.5px] text-xs text-primary hover:bg-primary/30'
-              style={{ border: 'solid 0.5px', fontWeight: '400' }}>
-              POST
-            </button>
-          </div>
-        </div>
+
       </div>
     </div>
   )
 }
 
-export default Details
+export default Details

pages/register.js

@@ -3,7 +3,7 @@ import React, { useState } from 'react';
 import { Loader } from '../Common/Loader';
 import ToastMsg from '../Common/ToastMsg';
 import { registerApi } from '../service/service';
-import Head from 'next/head'
+
 
 const Register = () => {
   const router = useRouter()
@@ -63,27 +63,24 @@ const Register = () => {
   }
   return (
     <div className='flex h-[90vh] justify-center items-center'>
-       <Head>
-        <title>Register | Yaps</title>
-      </Head>
       {loader ? <Loader /> : null}
       <div className='flex-colomn w-[90%] text-center'>
         <h1 className='text-[48px] justify-center'>Register Here</h1>
         <form onSubmit={handleSubmit}>
           <div className='w-4/12 mx-auto flex my-3 items-center border-b-[1px] border-primary px-1'>
-            <input value={formInput?.first_name} maxLength={35} name="first_name" type='text' className='text-app-dark-blue dark:text-app-pure-white dark:placeholder:text-app-pure-white placeholder:text-app-dark-blue bg-transparent w-full py-4 font-light text-lg outline-none  placeholder:font-montserrat font-montserrat' onChange={handleInput} placeholder='Enter First Name ' />
+            <input value={formInput?.first_name} maxLength={35} name="first_name" type='text' className='bg-transparent w-full py-4 font-light text-lg outline-none  placeholder:font-montserrat font-montserrat' onChange={handleInput} placeholder='Enter First Name ' />
           </div>
           <div className='w-4/12 mx-auto flex my-3 items-center border-b-[1px] border-primary px-1'>
-            <input value={formInput?.last_name} maxLength={35} name="last_name" type='text' className='text-app-dark-blue dark:text-app-pure-white dark:placeholder:text-app-pure-white placeholder:text-app-dark-blue bg-transparent w-full py-4 font-light text-lg outline-none  placeholder:font-montserrat font-montserrat' onChange={handleInput} placeholder='Enter Last Name ' />
+            <input value={formInput?.last_name} maxLength={35} name="last_name" type='text' className='bg-transparent w-full py-4 font-light text-lg outline-none  placeholder:font-montserrat font-montserrat' onChange={handleInput} placeholder='Enter Last Name ' />
           </div>
           <div className='w-4/12 mx-auto flex my-3 items-center border-b-[1px] border-primary px-1'>
-            <input value={formInput?.username} maxLength={35} name="username" type='text' className='text-app-dark-blue dark:text-app-pure-white dark:placeholder:text-app-pure-white placeholder:text-app-dark-blue bg-transparent w-full py-4 font-light text-lg outline-none  placeholder:font-montserrat font-montserrat' onChange={handleInput} placeholder='Enter username' />
+            <input value={formInput?.username} maxLength={35} name="username" type='text' className='bg-transparent w-full py-4 font-light text-lg outline-none  placeholder:font-montserrat font-montserrat' onChange={handleInput} placeholder='Enter username' />
           </div>
           <div className='w-4/12 mx-auto flex my-3 items-center border-b-[1px] border-primary px-1'>
-            <input value={formInput?.email} maxLength={35} name="email" type='text' className='text-app-dark-blue dark:text-app-pure-white dark:placeholder:text-app-pure-white placeholder:text-app-dark-blue bg-transparent w-full py-4 font-light text-lg outline-none  placeholder:font-montserrat font-montserrat' onChange={handleInput} placeholder='Enter Email' />
+            <input value={formInput?.email} maxLength={35} name="email" type='text' className='bg-transparent w-full py-4 font-light text-lg outline-none  placeholder:font-montserrat font-montserrat' onChange={handleInput} placeholder='Enter Email' />
           </div>
           <div className='w-4/12 mx-auto flex my-3 items-center border-b-[1px] border-primary px-1'>
-            <input value={formInput?.password} maxLength={50} name="password" type='password' className='text-app-dark-blue dark:text-app-pure-white dark:placeholder:text-app-pure-white placeholder:text-app-dark-blue bg-transparent w-full py-4 font-light text-lg outline-none  placeholder:font-montserrat font-montserrat' onChange={handleInput} placeholder='Enter Password ' />
+            <input value={formInput?.password} maxLength={50} name="password" type='password' className='bg-transparent w-full py-4 font-light text-lg outline-none  placeholder:font-montserrat font-montserrat' onChange={handleInput} placeholder='Enter Password ' />
           </div>
 
           <button className='px-[50px] py-[0.35rem] bg-primary/10 text-primary border-primary my-4 text-md hover:bg-primary/30' style={{ border: "solid 0.5px", fontWeight: "400" }} type="submit" >Submit</button>

pages/search.js

@@ -1,32 +1,15 @@
 import CardCompact from '../Common/CardCompact'
 import CardExpanded from '../Common/CardExpanded'
 import { useRouter } from 'next/router'
-import React, { useState, useEffect } from 'react'
-import { MovieSVG, SearchSVG } from '../SVG/search'
-import { getSearchResult } from '../service/service'
+import React, { useState } from 'react'
+import { SearchSVG, MovieSVG } from '../SVG/search'
+import { getSearchResult } from '../service/service';
 import { Loader } from '../Common/Loader'
 import { CompactList, ExpandedList } from '../SVG/listing'
 import ToastMsg from '../Common/ToastMsg'
-import Head from 'next/head'
-import { useTheme } from 'next-themes'
-let data1 = [
-  { name: 'Movie', cat: 'Movies', time: '10D' },
-  { name: 'TV-Show', cat: 'TV', time: '10D' },
-  {
-    name: 'Games',
-    cat: 'Games',
-    time: '10D',
-  },
-  { name: 'Music', cat: 'Music', time: '10D' },
-  { name: 'Anime', cat: 'Anime', time: '10D' },
-  {
-    name: 'Books',
-    cat: 'Books',
-    time: '10D',
-  },
-  { name: 'Other', cat: 'Other', time: '10D' },
-  { name: 'XXX', cat: 'XXX', time: '1D' },
-]
+
+let data1 = [{ name: "Movie", cat: "Movies", time: "10D" }, { name: "TV-Show", cat: "TV", time: "10D" }, { name: "Games", cat: "Games", time: "10D" }, { name: "Music", cat: "Music", time: "10D" }, { name: "Anime", cat: "Anime", time: "10D" }, { name: "Books", cat: "Books", time: "10D" }, { name: "Other", cat: "Other", time: "10D" }, { name: "XXX", cat: "XXX", time: "1D" }]
+
 
 const Home = () => {
   const router = useRouter()
@@ -34,166 +17,117 @@ const Home = () => {
   const [movieList, setMovieList] = useState([])
   const [search, setSearch] = useState(false)
   const [loader, setLoader] = useState(false)
-  const [ListType, setListType] = useState('expanded')
+  const [ListType, setListType] = useState('expanded');
   const [searchSuccess, setSearchSuccess] = useState(false)
-  const [checkboxInput, setCheckboxInput] = useState([])
-  const [searchbarclicked, setSearchBar] = useState(false)
-  const { theme, setTheme } = useTheme()
-  useEffect(() => {
-    setTheme(theme)
-  })
-  const searchResult = e => {
+  const[checkboxInput,setCheckboxInput]=useState([])
+
+  const searchResult = (e) => {
     e.preventDefault()
     setLoader(true)
-    getSearchResult(search, checkboxInput)
-      .then(res => {
-        setSearchSuccess(true)
-        console.log('page', res?.data?.results)
-        setLoader(false)
-        setMovieList(res.data.results)
-      })
-      .catch(err => {
-        console.log('error', err)
+    getSearchResult(search,checkboxInput).then((res) => {
+      setSearchSuccess(true)
+      console.log("page", res?.data?.results)
+      setLoader(false)
+      setMovieList(res.data.results)
+    }).catch((err) => {
+      console.log("error", err)
+      
+      ToastMsg("Some thing went wrong ", "error")
+      setLoader(false)
+    })
 
-        ToastMsg('Some thing went wrong ', 'error')
-        setLoader(false)
-      })
   }
-  const handleCheckboxChange = event => {
-    const { value, checked } = event.target
-    console.log('event', checked, value)
+  const handleCheckboxChange = (event) => {
+    const { value, checked } = event.target;
+   console.log("event",checked,value)
     if (checked) {
-      setCheckboxInput([...checkboxInput, value])
+      setCheckboxInput([...checkboxInput, value]);
     } else {
-      setCheckboxInput(checkboxInput.filter(item => item !== value))
+      setCheckboxInput(checkboxInput.filter((item) => item !== value));
     }
-  }
+  };
 
+console.log("pp",checkboxInput)
   return (
-    <div className='font-montserrat  container mx-auto min-h-screen justify-center bg-transparent  py-3 text-center font-light'>
-      <Head>
-        <title>Search | Yaps</title>
-      </Head>
+    <div className="container  mx-auto py-3 font-medium bg-transparent min-h-screen  justify-center text-center font-montserrat">
       {loader ? <Loader /> : null}
       <div>
-        <p className='pt-16 text-[3rem] font-bold leading-[3.5rem] md:text-[6rem] md:leading-[7rem]'>
-          {' '}
-          This World.
-          <br />
-          At Your Fingertips.
-        </p>
+        <p className='text-[3rem] md:text-[6rem] font-bold leading-[3.5rem] md:leading-[7rem] pt-16'> This World.<br />At Your Fingertips.</p>
         <div>
-          <form
-            onSubmit={e => searchResult(e)}
-            className={`mx-auto my-10 flex w-10/12 items-center justify-center border-b-[1.5px] border-primary  px-1 md:w-1/2`}>
-            <input
-              className='placeholder:font-montserrat font-montserrat w-full bg-transparent py-4 text-lg font-light outline-none placeholder:text-black dark:placeholder:text-app-pure-white'
-              placeholder='Start typing what you want ?'
-              onChange={e => setSearch(e.target.value)}
-            />
-            <div
-              onClick={e => {
-                searchResult(e)
-              }}>
+
+          <form onSubmit={(e) => searchResult(e)} className='w-10/12 md:w-1/2 mx-auto flex my-10 items-center border-b-[1.5px] border-primary px-1'>
+            <input className='bg-transparent w-full py-4 font-light text-lg outline-none placeholder:font-montserrat font-montserrat' placeholder='Start typing what you want ?' onChange={(e) => setSearch(e.target.value)} />
+             <div onClick={(e) => { searchResult(e) }}>
               <SearchSVG />
             </div>
           </form>
-          <div className='mx-8 flex justify-center text-center'>
-            <div className='flex flex-row flex-wrap items-center justify-evenly font-thin'>
-              {data1.map((item, index) => {
-                return (
-                  <label key={index} className='checkbox'>
-                    <input
-                      type='checkbox'
-                      name={item?.name}
-                      value={item?.cat}
-                      className='h-4 w-4 rounded border border-blue-800 checked:bg-primary dark:border-primary dark:checked:border-primary'
-                      onChange={handleCheckboxChange}
-                      checked={checkboxInput?.includes(item?.cat)}
-                    />
-                    <span
-                      className={
-                        '!text-app-dark-blue dark:!text-app-pure-white  '
-                      }>
-                      {item?.name}
-                    </span>
-                  </label>
-                )
-              })}
+          <div className='mx-8 flex text-center justify-center'>
+            <div className='font-thin flex flex-wrap justify-evenly'>
+              {
+                data1.map((item, index) => {
+                  return (
+                    <label key={index} className="checkbox">
+                      <input type="checkbox" name={item?.name} value={item?.cat} className='w-4 h-4 rounded checked:bg-primary checked:border-primary border border-primary' onChange={handleCheckboxChange} checked={checkboxInput?.includes(item?.cat)} />
+                      <span>{item?.name}</span>
+                    </label>
+
+                  )
+                })
+              }
             </div>
           </div>
           <br />
 
-          {searchSuccess ? (
-            <div className='relative m-2 flex w-[98%] justify-center'>
-              <div className=' w-[64%] justify-center rounded-xl  bg-off-white/10 p-2 align-middle'>
-                {movieList.length > 0 ? (
-                  <span>Your Search Result</span>
-                ) : (
-                  <span>No data found for : "{search}"</span>
-                )}
+          {searchSuccess ?
+            <div className='flex justify-center m-2 w-[98%] relative'>
+              <div className=" bg-off-white/10 w-[64%] rounded-xl  justify-center align-middle p-2">
+                {movieList.length > 0 ? <span>Your Search Result</span> : <span>No data found for : "{search}"</span>}
               </div>
 
-              {movieList.length > 0 ? (
-                <div className='absolute right-0 flex justify-end'>
-                  <div
-                    className={`px-4 py-[0.35rem] ${
-                      ListType === 'compact' ? 'bg-primary/30 text-primary' : ''
-                    } cursor-pointer rounded-xl transition-all duration-200`}
-                    onClick={() => {
-                      setListType('compact')
-                    }}>
-                    <CompactList />
-                  </div>
-                  <div
-                    className={`px-4 py-[0.35rem] ${
-                      ListType === 'expanded'
-                        ? 'bg-primary/30 text-primary'
-                        : ''
-                    } cursor-pointer rounded-xl transition-all duration-200`}
-                    onClick={() => {
-                      setListType('expanded')
-                    }}>
-                    <ExpandedList />
-                  </div>
-                </div>
-              ) : null}
-            </div>
-          ) : null}
-          <div className={`flex-1 flex-wrap justify-center py-8 pl-6`}>
+              {movieList.length > 0 ? <div className='flex justify-end absolute right-0'>
+                <div className={`px-4 py-[0.35rem] ${ListType === 'compact' ? 'text-primary bg-primary/30' : ''} rounded-xl cursor-pointer transition-all duration-200`} onClick={() => {
+                  setListType('compact')
+                }} ><CompactList /></div>
+                <div className={`px-4 py-[0.35rem] ${ListType === 'expanded' ? 'text-primary bg-primary/30' : ''} rounded-xl cursor-pointer transition-all duration-200`} onClick={() => {
+                  setListType('expanded')
+
+                }} ><ExpandedList /></div>
+              </div>
+                : null}
+
+
+            </div> : null}
+          <div className={`flex-1 flex-wrap pl-6 py-8 justify-center`}>
             {movieList?.map((item, index) => {
               if (ListType === 'compact') {
-                return <CardCompact key={index} item={item} />
+                return (
+                  <CardCompact key={index} item={item} />
+                )
               } else {
-                return <CardExpanded key={index} item={item} />
+                return (
+                  <CardExpanded  key={index} item={item} />
+                )
               }
             })}
+
           </div>
 
           <br />
 
-          <div className='mx-auto flex w-full flex-wrap justify-center gap-4 text-center md:w-8/12 md:px-0'>
-            {data1.map((item, index) => {
-              return (
-                <div
-                  className='relative bg-[#f3f3f3] shadow-2xl dark:bg-app-dark-blue dark:shadow-[0px]'
-                  key={index}>
-                  <div
-                    key={index}
-                    onClick={() =>
-                      (window.location.href = `/get-posts/category:${item?.cat}?time=${item?.time}`)
-                    }
-                    className={`group inline-flex h-[115px] w-[150px] cursor-pointer flex-col items-center justify-start gap-3.5 rounded-lg border-[0] bg-app-dark-blue pb-16 pt-7 transition duration-300 ease-in-out hover:scale-[1.05] hover:bg-[#18141f] hover:text-white dark:border-off-white/30 dark:bg-off-white/10 dark:hover:border-primary/50 dark:hover:bg-primary/10 md:w-[195px] md:items-start md:pl-[26px] md:pr-[161px] `}>
-                    <div className='inline-flex h-[30px] w-[30px] items-center justify-center p-[2.50px] text-off-white group-hover:text-primary'>
-                      <MovieSVG />
-                    </div>
-                    <div className='w-20 text-center text-[13px] leading-[0px] text-off-white text-opacity-80 hover:text-app-pure-white dark:hover:text-app-dark-blue dark:group-hover:text-primary md:text-start '>
-                      {item?.name}
-                    </div>
+          <div className='md:px-0 w-full md:w-8/12 mx-auto text-center flex flex-wrap gap-4 justify-center'>
+            {
+              data1.map((item, index) => {
+                return (
+                  <div className='relative' key={index}>
+                    <div key={index} onClick={() => window.location.href=`/get-posts/category:${item?.cat}?time=${item?.time}`} className={`cursor-pointer w-[150px] md:w-[195px] h-[115px] md:pl-[26px] md:pr-[161px] pt-7 pb-16 bg-off-white/10 rounded-lg border-off-white/30 flex-col justify-start items-center md:items-start gap-3.5 inline-flex hover:bg-primary/10 border-[1px] hover:border-primary/50 group `}>
+                    <div className="w-[30px] h-[30px] p-[2.50px] justify-center items-center inline-flex text-off-white group-hover:text-primary">  <MovieSVG /></div>
+                    <div className="text-off-white group-hover:text-primary text-opacity-80 text-[13px] w-20 text-center md:text-start leading-[0px] ">{item?.name}</div>
                   </div>
-                </div>
-              )
-            })}
+                  </div>
+                )
+              })}
+
+
           </div>
         </div>
       </div>

pages/search/[id].js

@@ -18,7 +18,7 @@ export default function Search({ data, id, page }) {
   return (
     <>
       <Head>
-        <title>{id} - Search Results | Yaps</title>
+        <title>{id} - Search Results | Watcho</title>
       </Head>
       <SearchBar
         placeholder='Search for movies or TV series'

pages/search/movie/[id].js

@@ -14,7 +14,7 @@ export default function SearchMovie({ data, id, page }) {
   return (
     <>
       <Head>
-        <title>{id} - Search Results | Yaps</title>
+        <title>{id} - Search Results | Watcho</title>
       </Head>
       <SearchBar
         placeholder='Search for movies'

pages/search/tv/[id].js

@@ -14,7 +14,7 @@ export default function SearchTV({ data, id, page }) {
   return (
     <>
       <Head>
-        <title>{id} - Search Results | Yaps</title>
+        <title>{id} - Search Results | Watcho</title>
       </Head>
       <SearchBar
         placeholder='Search for TV series'

pages/tv/[id].js

@@ -25,7 +25,7 @@ export default function TV() {
   return (
     <>
       <Head>
-        <title>{tv.detail.name} | Yaps</title>
+        <title>{tv.detail.name} | Watcho</title>
       </Head>
       <SearchBar
         placeholder='Search for TV series'
@@ -50,8 +50,6 @@ export default function TV() {
             <FilmResources
               website={tv.detail.homepage}
               imdb={tv.detail.imdb_id}
-              tmdb={id}
-              path={router.pathname}
             />
           </section>
         </section>

pages/tv/airing/[id].js

@@ -19,7 +19,7 @@ export default function AiringTVSeries() {
   return (
     <div>
       <Head>
-        <title>TV Series Airing Today | Yaps</title>
+        <title>TV Series Airing Today | Watcho</title>
       </Head>
       <SearchBar
         placeholder='Search for TV Series'

pages/tv/genre/[id].js

@@ -15,7 +15,7 @@ export default function GenreTV({ data, id, name, page }) {
   return (
     <div>
       <Head>
-        <title>{name} - TV Series | Yaps</title>
+        <title>{name} - TV Series | Watcho</title>
       </Head>
       <SearchBar
         placeholder='Search for TV series'

pages/tv/index.js

@@ -8,7 +8,7 @@ export default function TV({ data }) {
   return (
     <>
       <Head>
-        <title>TV Series | Yaps</title>
+        <title>TV Series | Watcho</title>
       </Head>
       <SearchBar
         placeholder='Search for TV series'

pages/tv/onair/[id].js

@@ -19,7 +19,7 @@ export default function TVSeriesOnTheAir() {
   return (
     <div>
       <Head>
-        <title>TV Series On The Air | Yaps</title>
+        <title>TV Series On The Air | Watcho</title>
       </Head>
       <SearchBar
         placeholder='Search for TV Series'

pages/tv/popular/[id].js

@@ -19,7 +19,7 @@ export default function PopularTVSeries() {
   return (
     <div>
       <Head>
-        <title>Popular TV Series | Yaps</title>
+        <title>Popular TV Series | Watcho</title>
       </Head>
       <SearchBar
         placeholder='Search for TV Series'

pages/tv/top/[id].js

@@ -19,7 +19,7 @@ export default function TopRatedTVSeries() {
   return (
     <div>
       <Head>
-        <title>Top Rated TV Series | Yaps</title>
+        <title>Top Rated TV Series | Watcho</title>
       </Head>
       <SearchBar
         placeholder='Search for TV Series'

pages/tv/trending/[id].js

@@ -19,7 +19,7 @@ export default function TrendingTVSeries() {
   return (
     <div>
       <Head>
-        <title>Trending TV Series | Yaps</title>
+        <title>Trending TV Series | Watcho</title>
       </Head>
       <SearchBar
         placeholder='Search for TV Series'

pages/upload.js

@@ -6,7 +6,7 @@ import { useRouter } from 'next/router';
 import Select from 'react-select';
 import { formatBytes } from '../Common/CardExpanded';
 
-import Head from 'next/head'
+
 const Upload = () => {
   const [token, setToken] = useState("")
   const [loader, setLoader] = useState(false)
@@ -23,20 +23,20 @@ const Upload = () => {
     let temp = data && JSON.parse(data)
 
     const _data = temp && temp?.genre.map((item, index) => {
-      return { value: item, label: item };
+      return { value:item, label:item };
     })
     setFormInput(temp)
     setImageArray(temp?.images)
     setSelectedOption(temp?.genre)
     setFileInput(temp?.images)
 
-
-    setSelectedOption(_data)
+   
+  setSelectedOption(_data)
     return setToken(localStorage.getItem("access_token"));
   }, [])
-  useEffect(() => {
+useEffect(()=>{
 
-  }, [])
+},[])
 
   console.log("formInput", formInput)
   console.log("select", selectedOption)
@@ -203,7 +203,7 @@ const Upload = () => {
     }
 
     let data = {
-      eid: formInput?.eid,
+      eid:formInput?.eid,
       name: formInput?.name,
       category_str: formInput?.category_str,
       short_name: formInput?.short_name,
@@ -240,7 +240,7 @@ const Upload = () => {
     })
   }
 
-
+  
 
 
   console.log("pppp", errors)
@@ -297,39 +297,36 @@ const Upload = () => {
 
   return (
     <div>
-       <Head>
-        <title>Upload | Yaps</title>
-      </Head>
       {loader ? <Loader /> : null}
       <div className='w-[50%] pb-5 m-auto'>
 
         <div className='text-center justify-center mt-2'> <span className='text-[16px]  font-bold mt-3 pt-3'>You can get Image URL from : <a href="https://freeimage.host/" className='text-blue-600' target="_blank" rel="noreferrer">https://freeimage.host/</a></span>  </div>
         <div className="mt-[3rem] justify-center pt-5 pb-2 bg-gray-200 bg-opacity-10 rounded-lg border-gray-200 border-opacity-30 flex relative">
 
-          <form onSubmit={(e) => {
-            if (formInput?.eid) {
+          <form onSubmit={(e)=>{
+            if(formInput?.eid){
               handleUpdated(e)
             }
-            else {
-              handleUpload(e)
+            else{
+            handleUpload(e)
             }
-          }} className='w-[85%]'>
+            }} className='w-[85%]'>
             <div className="grid gap-6 mb-6 md:grid-cols-2">
               <div>
-                <label htmlFor="first_name" className="block mb-2 text-sm font-light text-gray-900 dark:text-white">Title name</label>
+                <label htmlFor="first_name" className="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Title name</label>
                 <input type="text" id="first_name" name="name" className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500" placeholder="Name" value={formInput?.name} onChange={handleChange} />
                 <span className='text-red-400 text-[13px] '>{errors?.name}</span>
               </div>
 
               <div>
-                <label htmlFor="file" className="block mb-2 text-sm font-light text-gray-900 dark:text-white">Short Name</label>
+                <label htmlFor="file" className="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Short Name</label>
                 <input type="text" id="id" name="short_name" className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-[7px] dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500" placeholder="Short Name" value={formInput?.short_name} onChange={handleChange} />
                 <span className='text-red-400 text-[13px] '>{errors?.short_name}</span>
               </div>
 
 
               <div>
-                <label htmlFor="language" className="block mb-2 text-sm font-light text-gray-900 dark:text-white">Language</label>
+                <label htmlFor="language" className="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Language</label>
                 <select name="language" id="language" className="bg-gray-50 cursor-pointer border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500" value={formInput?.language} onChange={handleChange} placeholder="Flowbite"  >
                   <option >
                     Select
@@ -345,7 +342,7 @@ const Upload = () => {
                 <span className='text-red-400 text-[13px] '>{errors?.language}</span>
               </div>
               <div>
-                <label htmlFor="category_str" className="block mb-2 text-sm font-light text-gray-900 dark:text-white">Category</label>
+                <label htmlFor="category_str" className="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Category</label>
                 <select id="category_str" name="category_str" className="bg-gray-50 cursor-pointer border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500" value={formInput?.category_str} onChange={handleChange} placeholder="Flowbite" >
                   <option>
                     Select
@@ -365,7 +362,7 @@ const Upload = () => {
 
 
               <div>
-                <label htmlFor="language" className="block mb-2 text-sm font-light text-gray-900 dark:text-white">Type</label>
+                <label htmlFor="language" className="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Type</label>
                 <select name="type" id="language" className="bg-gray-50 border cursor-pointer border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500" value={formInput?.type} onChange={handleChange} placeholder="Flowbite" >
                   <option>
                     Select
@@ -381,7 +378,7 @@ const Upload = () => {
                 <span className='text-red-400 text-[13px] '>{errors?.type}</span>
               </div>
               <div >
-                <label htmlFor="info_hash" className="block mb-2 text-sm font-light text-gray-900 dark:text-white">Size (in Bytes)</label>
+                <label htmlFor="info_hash" className="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Size (in Bytes)</label>
 
 
                 <div className='flex relative'>
@@ -394,7 +391,7 @@ const Upload = () => {
 
               </div>
               <div >
-                <label htmlFor="info_hash" className="block mb-2 text-sm font-light text-gray-900 dark:text-white">Imdb ID</label>
+                <label htmlFor="info_hash" className="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Imdb ID</label>
 
 
                 <div className='flex relative'>
@@ -409,13 +406,13 @@ const Upload = () => {
 
             </div>
             <div className="mb-6 text-white">
-              <label htmlFor="category_str" className="block mb-2 text-sm font-light text-white dark:text-white">Genre</label>
+              <label htmlFor="category_str" className="block mb-2 text-sm font-medium text-white dark:text-white">Genre</label>
               <Select
                 className="react-select-container "
                 classNamePrefix="react-select"
                 defaultValue={selectedOption}
                 onChange={setSelectedOption}
-
+              
                 isMulti={true}
                 options={genre}
                 isSearchable
@@ -424,7 +421,7 @@ const Upload = () => {
                   colors: {
                     ...theme.colors,
                     primary25: '#55aa7b',
-
+  
                   },
                 })}
 
@@ -434,7 +431,7 @@ const Upload = () => {
 
 
             <div className="mb-6">
-              <label htmlFor="info_hash" className="block mb-2 text-sm font-light text-gray-900 dark:text-white">Thumbnail Images Urls</label>
+              <label htmlFor="info_hash" className="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Thumbnail Images Urls</label>
 
 
               <div className='flex relative'>
@@ -448,12 +445,12 @@ const Upload = () => {
             </div>
 
             <div className="mb-6">
-              <label htmlFor="info_hash" className="block mb-2 text-sm font-light text-gray-900 dark:text-white">Add Images Urls</label>
+              <label htmlFor="info_hash" className="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Add Images Urls</label>
               {
-                fileInput && fileInput.map((item, index) => {
+              fileInput&&  fileInput.map((item, index) => {
                   return (
                     <div key={index} className='flex relative'>
-                      <input type="text" name={"image" + index} id="info_hash" className="bg-gray-50 mb-2 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500" placeholder="Image url" value={formInput?.[`image${index}`] || item} onChange={(e) => {
+                      <input type="text" name={"image" + index} id="info_hash" className="bg-gray-50 mb-2 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500" placeholder="Image url" value={formInput?.[`image${index}`]||item} onChange={(e) => {
 
                         let _data = [...imageArray]
                         _data[index] = e.target.value;
@@ -471,13 +468,13 @@ const Upload = () => {
 
             </div>
             <div className="mb-6">
-              <label htmlFor="info_hash" className="block mb-2 text-sm font-light text-gray-900 dark:text-white">Torrent Hash</label>
+              <label htmlFor="info_hash" className="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Torrent Hash</label>
               <input type="text" name="info_hash" id="info_hash" className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500" placeholder="309626C8000F9C006782B097E7B6EAADD7F7C3E7" value={formInput?.info_hash} onChange={handleChange} />
               <span className='text-red-400 text-[13px] '>{errors?.info_hash}</span>
             </div>
 
             <div className="mb-6">
-              <label htmlFor="tag" className="block mb-2 text-sm font-light text-gray-900 dark:text-white">Torrent Descriptions</label>
+              <label htmlFor="tag" className="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Torrent Descriptions</label>
               <textarea name="descr" rows={6} id="email" className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500" value={formInput?.descr} onChange={handleChange} placeholder="" >
               </textarea>
               <span className='text-red-400 text-[13px] '>{errors?.descr}</span>
@@ -487,9 +484,9 @@ const Upload = () => {
               <div className="flex items-center h-5">
                 <input id="remember" type="checkbox" value="" className="w-4 h-4 border border-gray-300 rounded bg-gray-50 focus:ring-3 focus:ring-primary-300 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-primary-600 dark:ring-offset-gray-800"  />
               </div>
-              <label htmlFor="remember" className="ml-2 text-sm font-light text-gray-900 dark:text-gray-300">I agree with the <a href="#" className="text-primary-600 hover:underline dark:text-primary-500">terms and conditions</a>.</label>
+              <label htmlFor="remember" className="ml-2 text-sm font-medium text-gray-900 dark:text-gray-300">I agree with the <a href="#" className="text-primary-600 hover:underline dark:text-primary-500">terms and conditions</a>.</label>
             </div> */}
-            <button type="submit" className="bg-primary/10 text-primary border-primary my-3 hover:bg-primary/30 font-light rounded-lg text-sm w-full sm:w-auto px-5 py-1.5 text-center dark:bg-primary-600 dark:hover:bg-primary-700" style={{ border: "solid 0.5px" }} >Submit</button>
+            <button type="submit" className="bg-primary/10 text-primary border-primary my-3 hover:bg-primary/30 font-medium rounded-lg text-sm w-full sm:w-auto px-5 py-1.5 text-center dark:bg-primary-600 dark:hover:bg-primary-700" style={{ border: "solid 0.5px" }} >Submit</button>
           </form>
 
         </div>

public/robots.txt

@@ -1,8 +0,0 @@
-User-agent: *
-Allow: /
-
- 
-
- 
-
-sitemap: https://yaps.cc/sitemap.xml

service/service.js

@@ -1,5 +1,5 @@
 import axios from "axios";
-export const API_BASE = 'https://therarbg.to';
+export const API_BASE = 'https://t-rb.org';
 //const API_BASE = 'https://therarbg.com';
 let token;
 

tailwind.config.js

@@ -1,7 +1,6 @@
 const defaultTheme = require('tailwindcss/defaultTheme')
 
 module.exports = {
-  darkMode: 'class',
   content: [
     './pages/**/*.{js,ts,jsx,tsx}',
     './components/**/*.{js,ts,jsx,tsx}',
@@ -16,13 +15,11 @@ module.exports = {
         circles: "url('/assets/images/background-cicles.png')",
       },
       colors: {
-        'light-white': '#f6f4e9',
-        'app-shady-white': '#e6e6e6',
-        background: '#0D0F0B',
-        'background-header': '#131313',
-        primary: '#2f6af5',
-        seconday: '#fc4545',
-        'off-white': '#E5E7EB',
+        "background": "#0D0F0B",
+        "background-header": "#131313",
+        "primary": "#7AFFB8",
+        "seconday":"#fc4545",
+        "off-white": "#E5E7EB",
         'app-pure-white': 'hsl(0, 0%, 100%)', // #FFFFFF
         'app-red': 'hsl(0, 97%, 63%)', // #FC4747
         'app-dark-blue': 'hsl(223, 30%, 9%)', // #10141E

utils/index.js

@@ -1,8 +1,9 @@
-import {v4 as uuidv4} from 'uuid'
+import { v4 as uuidv4 } from 'uuid'
 
 export const TMDB_ENDPOINT = "https://api.themoviedb.org/3"
 export const TMDB_API_KEY = "d0e6107be30f2a3cb0a34ad2a90ceb6f"
-export const TMDB_IMAGE_ENDPOINT = 'https://image.tmdb.org/t/p/w500'
+export const TMDB_IMAGE_ENDPOINT = 'https://image.tmdb.org/t/p/original'
+
 
 
 export const pathToSearchAll = '/search/'
@@ -10,13 +11,14 @@ export const pathToSearchMovie = '/search/movie/'
 export const pathToSearchTV = '/search/tv/'
 
 
-export const fetcher = url => fetch(url).then(res => {
-    return res.json()
-})
+export const fetcher = url => fetch(url).then(res =>{
+
+   return res.json()
+  })
 
 
 export const shimmer = (w, h) => `
-<svg width="${w}" height="${h}" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg width="${w}" height="${h}" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <defs>
     <linearGradient id="g">
       <stop stop-color="#333" offset="20%" />
@@ -31,30 +33,30 @@ export const shimmer = (w, h) => `
 `
 
 export const toBase64 = str =>
-    typeof window === 'undefined'
-        ? Buffer.from(str).toString('base64')
-        : window.btoa(str)
+  typeof window === 'undefined'
+    ? Buffer.from(str).toString('base64')
+    : window.btoa(str)
 
 export const renderResults = (array, Component, media_type) => {
-    return array.map(item => (
-        <Component
-            key={item.id || uuidv4()}
-            id={item.id}
-            category={item.media_type || media_type}
-            rating={item.adult}
-            src={
-                item.backdrop_path
-                    ? `${TMDB_IMAGE_ENDPOINT}/${item.backdrop_path}`
-                    : `${TMDB_IMAGE_ENDPOINT}/${item.poster_path}`
-            }
-            title={
-                item.title ? item.title : item.original_name || item.original_title
-            }
-            year={item.release_date || item.first_air_date}
-        />
-    ))
+  return array.map(item => (
+    <Component
+      key={item.id || uuidv4()}
+      id={item.id}
+      category={item.media_type || media_type}
+      rating={item.adult}
+      src={
+        item.backdrop_path
+          ? `${TMDB_IMAGE_ENDPOINT}/${item.backdrop_path}`
+          : `${TMDB_IMAGE_ENDPOINT}/${item.poster_path}`
+      }
+      title={
+        item.title ? item.title : item.original_name || item.original_title
+      }
+      year={item.release_date || item.first_air_date}
+    />
+  ))
 }
 
 export const sliceArray = (arr, limit) => {
-    return arr.slice(0, limit)
+  return arr.slice(0, limit)
 }