Front page video

package.json

@@ -25,7 +25,8 @@
     "@types/react-router": "^5.1.20",
     "@types/react-router-dom": "^5.3.3",
     "@types/testing-library__react": "^10.2.0",
-    "ionicons": "^7.0.0",
+    "axios": "^1.7.2",
+    "ionicons": "^7.4.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-icons": "^5.2.1",

src/components/FeaturedVideo.tsx

@@ -0,0 +1,80 @@
+import { IonFabButton, IonIcon } from "@ionic/react";
+import {
+  arrowBack,
+  arrowForward,
+  chevronCollapseOutline,
+  chevronForward,
+} from "ionicons/icons";
+import React, { useEffect, useState } from "react";
+
+function FeaturedVideo() {
+  const [videos, setVideos] = useState<string[]>([]);
+  const token = import.meta.env.VITE_STRAPY_TOKEN;
+  const [index, setIndex] = useState(0);
+
+  useEffect(() => {
+    fetch(
+      `${import.meta.env.VITE_STRAPI_URL}/api/main-page-videos?populate=*`,
+      {
+        method: "GET",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${token}`,
+        },
+      }
+    )
+      .then((res) => res.json())
+      .then((resp) => {
+        const data = resp.data;
+        const urls = data.map((video: any) => video.attributes.url);
+        const embedUrls: string[] = urls.map((video: string) =>
+          video.replace("watch?v=", "embed/")
+        );
+        setVideos(embedUrls);
+        console.log(videos);
+      });
+  }, []);
+
+  return (
+    <div>
+      <div className="flex justify-center">
+        <iframe
+          src={videos[index]}
+          title="Featured Videos"
+          allowFullScreen={true}
+          className="mx-0 rounded-lg w-10/12 md:w-9/12 lg:w-8/12 xl:w-6/12 2xl:w-5/12 mx-auto h-72 md:h-96"
+          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; fullscreen;"
+        ></iframe>
+      </div>
+      <div className="w-10/12 md:w-9/12 lg:w-8/12 xl:w-6/12 2xl:w-5/12 mx-auto flex justify-between">
+        {/* <IonFabButton
+          className="-mt-16 ml-2"
+          style={{ "--background": "orangered" }}
+        >
+          <IonIcon
+            icon={arrowBack}
+            onClick={() => {
+              console.log(index);
+              setIndex(index === 0 ? videos.length - 1 : index - 1);
+            }}
+          />
+        </IonFabButton> */}
+        <div></div>
+        <IonFabButton
+          className="-mt-16 mr-2"
+          style={{ "--background": "orangered" }}
+        >
+          <IonIcon
+            icon={arrowForward}
+            onClick={() => {
+              console.log(index);
+              setIndex(index === videos.length - 1 ? 0 : index + 1);
+            }}
+          />
+        </IonFabButton>
+      </div>
+    </div>
+  );
+}
+
+export default FeaturedVideo;

src/pages/Index.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import CenterDescriptionCards from "../components/CenterDescriptionCards";
 import Empower from "../components/Empower";
 import HelpInfographics from "../components/HelpInfographics";
+import FeaturedVideo from "../components/FeaturedVideo";
 import NewHero from "../components/NewHero";
 import SocialInfographics from "../components/SocialInfographics";
 import { useHistory } from "react-router";
@@ -26,6 +27,7 @@ const Index: React.FC = () => {
             </h1>
           </div>
         </div>
+        <FeaturedVideo />
         <HelpInfographics />
         <Empower
           description="Discover helpful resources and articles to promote mental health awareness and support for teens. Together, we can create a safe and nurturing environment for their well-being."