Adding picture rotundra

src/pages/DashboardPage/DashboardPage.module.css

@@ -1,13 +1,26 @@
-.welcomeMessage {
+.dashboardContainer {
   display: flex;
-  gap: 1rem;
+  flex-direction: column;
+}
+
+.CardsContainer {
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  justify-content: space-between;
+  margin-bottom: 3rem;
 }
+
+.dashboardTitle {
+  font-size: 2rem;
+  font-weight: 600;
+  margin-bottom: 1rem;
+}
+
 /* make purple border around flightsToday */
 .cardStyle {
-  flex-basis: 33.3333%;
   display: flex;
-  justify-content: flex-end;
-  align-items: flex-start;
+  width: 15rem;
   height: 100px;
   background: transparent;
   border-radius: 5px;
@@ -28,7 +41,6 @@
 
 .flightNumber {
   font-size: 4rem;
-  font-family: Arial, Helvetica, sans-serif;
   padding: 1rem 0;
   color: var(--miracle-color-blue);
 }

src/pages/DashboardPage/DashboardPage.tsx

@@ -1,4 +1,5 @@
 import styles from "./DashboardPage.module.css";
+import Rotunda from "./components/Rotunda/Rotunda";
 import { useNavigationContext } from "../../context/Navigation.context";
 import { Tabs } from "../../layout/SideBar/SideBar.definitions";
 import { getDashboardData } from "../../api/queries";
@@ -11,6 +12,13 @@ const DashboardPage = () => {
   const { setCurrentTab } = useNavigationContext();
   const { getToken } = useAuth();
 
+  const images = [
+    "src/pages/DashboardPage/components/DJI_0632.jpeg",
+    "src/pages/DashboardPage/components/DJI_20230609100419_0001_V.jpeg",
+    "src/pages/DashboardPage/components/Campus_aerial_fall.jpg",
+    "src/pages/DashboardPage/components/Image 4-5-22 at 1.45 PM.jpg",
+  ];
+
   const { data: dashboardData, isLoading: dashboardLoading } =
     useQuery<DashboardData>({
       queryKey: ["dashboard"],
@@ -28,26 +36,33 @@ const DashboardPage = () => {
 
   return (
     <>
-      <div className={styles.welcomeMessage}>
-        <div className={styles.cardStyle}>
-          <div className={styles.flightNumber}>
-            {dashboardData?.["Flights Today"]}
-          </div>
-          <div className={styles.flightsToday}>FLIGHTS TODAY</div>
+      <div className={styles.dashboardContainer}>
+        <div className={styles.dashboardTitle}>
+          Welcome back to Miracle Flights
         </div>
-        <div className={styles.cardStyle}>
-          <div className={styles.flightNumber}>
-            {(Number(dashboardData?.["Flights This Week"]) || 0) +
-              (Number(dashboardData?.["Flights Today"]) || 0)}
+        <div className={styles.CardsContainer}>
+          <div className={styles.cardStyle}>
+            <div className={styles.flightNumber}>
+              {dashboardData?.["Flights Today"]}
+            </div>
+            <div className={styles.flightsToday}>FLIGHTS TODAY</div>
           </div>
-          <div className={styles.flightsWeek}>FLIGHTS THIS WEEK </div>
-        </div>
-        <div className={styles.cardStyle}>
-          <div className={styles.flightNumber}>
-            {dashboardData?.["All Total Flights"]}
+          <div className={styles.cardStyle}>
+            <div className={styles.flightNumber}>
+              {(Number(dashboardData?.["Flights This Week"]) || 0) +
+                (Number(dashboardData?.["Flights Today"]) || 0)}
+            </div>
+            <div className={styles.flightsWeek}>FLIGHTS THIS WEEK </div>
+          </div>
+          <div className={styles.cardStyle}>
+            <div className={styles.flightNumber}>
+              {dashboardData?.["All Total Flights"]}
+            </div>
+            <div className={styles.flightsEver}>FLIGHTS TOTAL</div>
           </div>
-          <div className={styles.flightsEver}>FLIGHTS EVER</div>
         </div>
+        <div className={styles.dashboardTitle}>Miracle Flights Pictures</div>
+        <Rotunda images={images} />
       </div>
     </>
   );

src/pages/DashboardPage/components/Rotunda/Rotunda.module.css

@@ -0,0 +1,63 @@
+.rotundaContainer {
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+}
+
+.imageContainer {
+  display: flex;
+  overflow-x: hidden;
+  white-space: nowrap;
+  transition: scroll-left 1s ease-in-out; /* Smoother transition for scrolling */
+}
+
+.rotundaImage {
+  width: 320px;
+  height: 180px;
+  flex-shrink: 0;
+  margin-right: 10px;
+  transition: transform 0.3s ease;
+}
+
+.rotundaImage:hover {
+  transform: scale(1.05);
+}
+
+.arrow {
+  position: absolute;
+  height: 100%;
+  display: flex; /* Enable flexbox */
+  align-items: center; /* Center content vertically */
+  justify-content: center; /* Center content horizontally */
+  background-color: #fff;
+  border: none;
+  color: var(--miracle-color-blue);
+  cursor: pointer;
+  font-size: 24px;
+  padding: 10px;
+  z-index: 100;
+  opacity: 0;
+  transition: opacity 0.3s ease;
+}
+
+.arrow:hover {
+  opacity: 1;
+}
+
+.Icon {
+  font-size: 24px;
+  top: 50%;
+}
+
+.arrow.left {
+  background: linear-gradient(to left, rgba(255, 255, 255, 0), #fff);
+  padding-right: 50px;
+}
+
+.arrow.right {
+  right: 0px;
+  background: linear-gradient(to right, rgba(255, 255, 255, 0), #fff);
+  padding-left: 50px;
+}

src/pages/DashboardPage/components/Rotunda/Rotunda.tsx

@@ -0,0 +1,112 @@
+import styles from "./Rotunda.module.css";
+import Icon from "../../../../components/CustomIcon/Icon";
+import React, { useEffect, useRef, useState } from "react";
+
+type RotundaProps = {
+  images: string[];
+};
+
+const Rotunda: React.FC<RotundaProps> = ({ images }) => {
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const [intervalId, setIntervalId] = useState<number | null>(null);
+  const [scrollPosition, setScrollPosition] = useState(0); // State to track scroll position
+
+  const scrollAmount = 330; // Image width + margin
+  const totalWidth = scrollAmount * images.length; // Total width of one full set of images
+
+  const scroll = () => {
+    if (scrollRef.current) {
+      const scrollElement = scrollRef.current;
+      scrollElement.scrollLeft += scrollAmount;
+      updateScrollPosition(scrollElement.scrollLeft);
+      if (scrollElement.scrollLeft >= totalWidth) {
+        scrollElement.scrollLeft -= totalWidth;
+        updateScrollPosition(scrollElement.scrollLeft);
+      }
+    }
+  };
+
+  useEffect(() => {
+    const id = setInterval(scroll, 15000) as unknown as number;
+    setIntervalId(id);
+    return () => {
+      clearInterval(id);
+      if (scrollRef.current) {
+        updateScrollPosition(scrollRef.current.scrollLeft);
+      }
+    };
+  }, []);
+
+  const handleArrowClick = (direction: "left" | "right") => {
+    if (scrollRef.current) {
+      const scrollElement = scrollRef.current;
+      if (direction === "right") {
+        scrollElement.scrollLeft += scrollAmount;
+      } else {
+        scrollElement.scrollLeft -= scrollAmount;
+      }
+      updateScrollPosition(scrollElement.scrollLeft);
+      if (scrollElement.scrollLeft >= totalWidth) {
+        scrollElement.scrollLeft -= totalWidth;
+      } else if (scrollElement.scrollLeft < 0) {
+        scrollElement.scrollLeft += totalWidth;
+      }
+      updateScrollPosition(scrollElement.scrollLeft);
+    }
+  };
+
+  const updateScrollPosition = (position: number) => {
+    setScrollPosition(position);
+  };
+
+  const handleMouseEnter = () => {
+    if (intervalId !== null) {
+      clearInterval(intervalId);
+    }
+  };
+  const handleMouseLeave = () => {
+    const id = setInterval(scroll, 15000) as unknown as number;
+    setIntervalId(id);
+  };
+
+  return (
+    <div className={styles.rotundaContainer}>
+      {scrollPosition > 0 && (
+        <div
+          className={`${styles.arrow} ${styles.left}`}
+          onClick={() => handleArrowClick("left")}
+        >
+          <Icon glyph="arrow-left" />
+        </div>
+      )}
+      <div
+        ref={scrollRef}
+        className={styles.imageContainer}
+        onMouseEnter={handleMouseEnter}
+        onMouseLeave={handleMouseLeave}
+      >
+        {images.concat(images).map(
+          (
+            image,
+            index, // Duplicate images for looping
+          ) => (
+            <img
+              key={index}
+              src={image}
+              alt={`Slide ${index}`}
+              className={styles.rotundaImage}
+            />
+          ),
+        )}
+      </div>
+      <div
+        className={`${styles.arrow} ${styles.right}`}
+        onClick={() => handleArrowClick("right")}
+      >
+        <Icon glyph="arrow-right" />
+      </div>
+    </div>
+  );
+};
+
+export default Rotunda;