feat : add download btn in tutorial page for open vpn

src/pages/tutorial/section/Tutorials.tsx

@@ -11,9 +11,7 @@ const Tutorials = () => {
     queryFn:()=>{
       return axios.get('/home/category/learning')
     }
-  })
-  console.log(data?.data?.result);
-  
+  })  
   const [activeTutorial, setActiveTutorial] = useState<number>(1);
   return (
     <div className="relative w-full h-full flex flex-col px-4 py-4 text-start">

src/pages/tutorial/section/components/Leran.tsx

@@ -3,6 +3,8 @@ import { useQuery } from "@tanstack/react-query";
 import useAxios from "../../../../hooks/useAxios";
 import Alert from "../../../../components/alert/Alert";
 import { MdErrorOutline } from "react-icons/md";
+import Button from "../../../../components/button";
+import { saveAs } from "file-saver";
 
 const Learn = ({ activeTutorial }: LearnProps) => {
   const axios = useAxios();
@@ -45,15 +47,37 @@ const Learn = ({ activeTutorial }: LearnProps) => {
         <Alert type="danger" message="خطایی با این موضوع رخ داد: ">
           {error.message}
         </Alert>
-      ) : data?.data?.result.length === 0 ? (
+      ) : data?.data?.result?.learning.length === 0 &&
+        !data?.data?.result?.files ? (
         <div className="w-full h-full flex flex-col gap-3 justify-center items-center">
           <MdErrorOutline className="w-[5rem] h-[5rem]" />
           <p className="text-sm md:text-base"> اموزشی وجود ندارد </p>
         </div>
       ) : (
-        data?.data?.result.map(
-          (i: { id: string; title: string; medias: string[] }) => {
-            return (
+        <>
+          {/* Render files if they exist */}
+          {data?.data?.result?.files &&
+            data?.data?.result?.files.length > 0 && (
+              <div className="w-full h-full p-3 mb-3 flex flex-col justify-center items-center gap-2 bg-gray-900 rounded-md shadow-xl">
+                {data.data.result.files.map(
+                  (file: { id: number; title: string; file: string }) => (
+                    <div
+                      className="w-full h-full flex justify-between gap-4 items-center"
+                      key={file.id}
+                    >
+                      <p className="text-xs md:text-sm">{file.title}</p>
+                      <Button extra="!py-1" onClick={() => saveAs(file.file)}>
+                        دانلود
+                      </Button>
+                    </div>
+                  )
+                )}
+              </div>
+            )}
+
+          {/* Render learning items */}
+          {data?.data?.result?.learning.map(
+            (i: { id: string; title: string; medias: string[] }) => (
               <div
                 key={i.id}
                 className="relative w-full h-full flex flex-col justify-center items-center"
@@ -62,21 +86,19 @@ const Learn = ({ activeTutorial }: LearnProps) => {
                   {i.title}
                 </span>
                 <div className="relative w-full h-full flex flex-col justify-center items-center">
-                  {i.medias.map((medias, index) => {
-                    return (
-                      <img
-                        className="w-full md:w-1/2 mb-3 rounded-lg mx-auto h-full"
-                        src={medias}
-                        alt="images"
-                        key={index}
-                      />
-                    );
-                  })}
+                  {i.medias.map((media, index) => (
+                    <img
+                      className="w-full md:w-1/2 mb-3 rounded-lg mx-auto h-full"
+                      src={media}
+                      alt="images"
+                      key={index}
+                    />
+                  ))}
                 </div>
               </div>
-            );
-          }
-        )
+            )
+          )}
+        </>
       )}
     </div>
   );