feat : formating code by prettier

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

@@ -6,6 +6,19 @@ import { MdErrorOutline } from "react-icons/md";
 import Button from "../../../../components/button";
 import { saveAs } from "file-saver";
 
+const getMediaType = (url: string) => {
+  const extension = url.split(".").pop()?.toLowerCase();
+  if (extension) {
+    if (["jpg", "jpeg", "png", "gif"].includes(extension)) {
+      return "image";
+    }
+    if (["mp4", "webm", "ogg"].includes(extension)) {
+      return "video";
+    }
+  }
+  return "unknown";
+};
+
 const Learn = ({ activeTutorial }: LearnProps) => {
   const axios = useAxios();
   const { data, isLoading, isFetching, error } = useQuery({
@@ -86,14 +99,31 @@ const Learn = ({ activeTutorial }: LearnProps) => {
                   {i.title}
                 </span>
                 <div className="relative w-full h-full flex flex-col justify-center items-center">
-                  {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}
-                    />
-                  ))}
+                  {i.medias.map((media, index) => {
+                    const mediaType = getMediaType(media);
+                    return (
+                      <div
+                        key={index}
+                        className="w-full md:w-1/2 mb-3 rounded-lg mx-auto h-full"
+                      >
+                        {mediaType === "image" ? (
+                          <img
+                            src={media}
+                            alt="media"
+                            className="w-full h-full object-cover rounded-lg"
+                          />
+                        ) : mediaType === "video" ? (
+                          <video
+                            src={media}
+                            controls
+                            className="w-full h-full object-cover rounded-lg"
+                          />
+                        ) : (
+                          <p>نوع فایل ناشناخته است</p>
+                        )}
+                      </div>
+                    );
+                  })}
                 </div>
               </div>
             )