Merge pull request #56 from hack4impact-calpoly/adjustingSelectedPOIC…

…omponent

Fixing save state bug among other things

src/app/example/page.tsx

@@ -1,4 +1,4 @@
-import POICardList from "@/components/POICardList";
+import POICardList from "@/components/poiList";
 export default function Page() {
   return (
     <div>

src/app/page.tsx

@@ -1,11 +1,10 @@
 import Navbar from "@/components/Navbar";
-import POICardList from "@/components/POICardList";
+import POICardList from "@/components/poiList";
 
 export default function Home() {
   return (
     <main>
       <Navbar />
-
       <POICardList></POICardList>
     </main>
   );

src/app/poi/page.tsx

@@ -1,8 +1,8 @@
 "use client";
 
 import { Suspense } from "react"; // Import Suspense from React
-import POICard from "@/components/POICard";
 import { useParams, useSearchParams } from "next/navigation";
+import Selected_POI_Page from "@/components/selectedPoi";
 
 function POIDetailContent() {
   const params = useParams();
@@ -12,10 +12,21 @@ function POIDetailContent() {
   const name = searchParams.get("name");
   const duration = searchParams.get("duration");
   const imageUrl = searchParams.get("url");
+  const description = searchParams.get("description");
+  const progress = parseInt(searchParams.get("progress") || "0", 10);
+  const totalPois = parseInt(searchParams.get("totalCards") || "0", 10);
 
   return (
     <div>
-      <POICard title={name || "Unknown POI"} duration={duration || "Unknown Duration"} imageUrl={imageUrl}></POICard>
+      <Selected_POI_Page
+        mainImage={imageUrl || ""}
+        name={name || "Unknown POI"}
+        content={description || "Description"}
+        audio_link="link"
+        duration={duration || "0:00"}
+        tour_progress={progress}
+        total_tours={totalPois}
+      />
     </div>
   );
 }

src/components/Key_Stats.tsx → src/components/keyStats.tsx

@@ -1,7 +1,7 @@
 import Link from "next/link";
 import React from "react";
 import { FaPlay } from "react-icons/fa";
-import styles from "./Key_Stats.module.css";
+import styles from "@/styles/keyStats.module.css";
 
 /*
 PlayAudio Component (1 of 3)
@@ -27,18 +27,14 @@ AudioDuration Component (2 of 3)
   - passed in as seconds, converted into a minute:second format
 */
 interface AD_Props {
-  duration_sec: number;
+  duration: string;
 }
-const AudioDuration: React.FC<AD_Props> = ({ duration_sec }) => {
+const AudioDuration: React.FC<AD_Props> = ({ duration }) => {
   //convert total seconds into minutes and seconds
-  const minutes = Math.floor(duration_sec / 60);
-  const seconds = duration_sec % 60;
 
   return (
     <div className={styles.section}>
-      <span className={styles.audioDuration}>
-        {minutes}:{seconds}
-      </span>
+      <span className={styles.audioDuration}>{duration}</span>
       <span className={styles.adText}>Audio Duration</span>
     </div>
   );
@@ -85,12 +81,12 @@ Main KeyStats Component (contains the previous three and is exported)
 */
 interface KS_Props {
   audio_link: string;
-  duration_sec: number;
+  duration: string;
   tour_progress: number;
   total_tours: number;
 }
 
-const KeyStats: React.FC<KS_Props> = ({ audio_link, duration_sec, tour_progress, total_tours }) => {
+const KeyStats: React.FC<KS_Props> = ({ audio_link, duration, tour_progress, total_tours }) => {
   return (
     <div className={styles.container}>
       <div className={styles.sideContainer}>
@@ -99,7 +95,7 @@ const KeyStats: React.FC<KS_Props> = ({ audio_link, duration_sec, tour_progress,
       </div>
       <div className={styles.centerContainer}>
         {/* Audio Duration Section */}
-        <AudioDuration duration_sec={duration_sec}></AudioDuration>
+        <AudioDuration duration={duration}></AudioDuration>
       </div>
       <div className={styles.sideContainer}>
         {/* Tour Progress Section */}

src/components/POICard.tsx → src/components/poiCard.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable @next/next/no-img-element */
 "use client";
-import styles from "./POICard.module.css";
+import styles from "@/styles/poiCard.module.css";
 import React from "react";
 
 interface POICardProps {