added playlist route

app/(main)/playlist/[id]/page.tsx

@@ -1,5 +1,6 @@
 import { getPlaylistById } from "@/api/queries";
 import PlaylistVideos from "@/components/playlist";
+import { notFound, redirect } from "next/navigation";
 
 interface IParams {
   params: {
@@ -12,6 +13,10 @@ const Page = async ({ params }: IParams) => {
 
   const videos = await getPlaylistById(id);
 
+  if (videos?.data?.length === 0) {
+    notFound();
+  }
+
   return (
     <div className="video-item mt-6">
       <div className="container">

components/playlist/index.tsx

@@ -6,26 +6,31 @@ import aydym from "@/public/aydym-com.webp";
 import horjun from "@/public/horjun.png";
 import belet from "@/public/belet.jpg";
 import { v4 } from "uuid";
+import { useRouter, useSearchParams } from "next/navigation";
+import { useQuery } from "@tanstack/react-query";
+import { Queries } from "@/api/queries";
+import Loader from "../Loader";
 
 const PlaylistVideos = ({ id, data }: { id: string; data: any }) => {
-  const [index, setIndex] = useState<number>(0);
+  const searchParams = useSearchParams();
+  const videoId = searchParams.get("video");
 
   return (
     <div className="video-item-inner">
       <div className="video-item-wrapper flex flex-col md:flex-row md:items-start items-center gap-10 relative pb-14 w-full">
-        <InfoBlock data={data?.data[index]} />
+        <InfoBlock video_id={data?.data[Number(videoId)].id} />
 
         <div className="video-item-inner flex flex-col gap-4 grow-0">
           {data?.data.map(
             (item: any, i: number) =>
-              i !== index && (
+              i !== Number(videoId) && (
-                <button key={v4()} onClick={() => setIndex(i)}>
+                <Link href={`/playlist/${id}?video=${i}`} key={v4()}>
                   <VideoItem
                     id={item.id}
                     img={item.banner_url}
                     title={item.title}
                   />
-                </button>
+                </Link>
               )
           )}
         </div>
@@ -36,7 +41,21 @@ const PlaylistVideos = ({ id, data }: { id: string; data: any }) => {
 
 export default PlaylistVideos;
 
-const InfoBlock = ({ data }: { data: any }) => (
+const InfoBlock = ({ video_id }: { video_id: number }) => {
+  const { data, isFetching, error } = useQuery({
+    queryKey: ["video", video_id],
+    queryFn: () => Queries.getVideo(video_id),
+  });
+
+  if (isFetching)
+    return (
+      <div className="w-full h-[500px] sm:h-[667px] md:h-[600px] l flex items-center justify-center">
+        <Loader height={700} />
+      </div>
+    );
+  if (error) return <h1>{JSON.stringify(error)}</h1>;
+
+  return (
     <div className="flex gap-6 flex-1 w-full justify-between h-full">
       <div className="flex flex-col gap-6 w-full h-full">
         <div className="flex justify-between gap-[32px] w-full h-full">
@@ -44,27 +63,27 @@ const InfoBlock = ({ data }: { data: any }) => (
             <div className="flex flex-col gap-[40px] h-full  w-full">
               <div className="flex gap-[40px] flex-col  h-full  w-full">
                 <div className="w-full">
-                <VideoPlayer content={data} />
+                  <VideoPlayer content={data?.data} />
                 </div>
 
                 <div className="flex flex-col gap-6">
-                {data?.desc ? (
+                  {data?.data?.desc ? (
                     <p className="font-roboto text-lg w-full text-black">
-                    {data.desc}
+                      {data?.data.desc}
                     </p>
                   ) : null}
 
-                {data?.aydym_com_url ||
+                  {data?.data?.aydym_com_url ||
-                data?.horjun_content_url ||
+                  data?.data?.horjun_content_url ||
-                data?.belet_url ? (
+                  data?.data?.belet_url ? (
                     <div className="flex flex-col gap-6">
                       <h2 className="text-2xl font-semibold">
                         Beýleki platformalarda seret:
                       </h2>
                       <div className="flex gap-11 items-center">
-                      {data.aydym_com_url ? (
+                        {data?.data.aydym_com_url ? (
                           <Link
-                          href={data.aydym_com_url}
+                            href={data?.data.aydym_com_url}
                             target="_blank"
                             className="flex flex-col items-center justify-center gap-2"
                           >
@@ -78,9 +97,9 @@ const InfoBlock = ({ data }: { data: any }) => (
                             <h3>Aydym.com</h3>
                           </Link>
                         ) : null}
-                      {data.horjun_content_url ? (
+                        {data?.data.horjun_content_url ? (
                           <Link
-                          href={data.horjun_content_url}
+                            href={data?.data.horjun_content_url}
                             target="_blank"
                             className="flex flex-col items-center justify-center gap-2"
                           >
@@ -94,9 +113,9 @@ const InfoBlock = ({ data }: { data: any }) => (
                             <h3>HorjunTv</h3>
                           </Link>
                         ) : null}
-                      {data.belet_url ? (
+                        {data?.data.belet_url ? (
                           <Link
-                          href={data.belet_url}
+                            href={data?.data.belet_url}
                             target="_blank"
                             className="flex flex-col items-center justify-center gap-2"
                           >
@@ -121,6 +140,7 @@ const InfoBlock = ({ data }: { data: any }) => (
       </div>
     </div>
   );
+};
 
 const VideoPlayer = ({ content }: { content: any }) => {
   const [hasWindow, setHasWindow] = useState<boolean>(false);