calblueprint · miha-bhaskaran · Dec 2, 2023 · Mar 4, 2024 · Mar 6, 2024 · Mar 6, 2024
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -36,18 +36,20 @@ export default function RootLayout({
           integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
           crossOrigin=""
         />
-        <link
-          href="https://fonts.googleapis.com/css?family=Lato:200,300,400,700"
-          rel="stylesheet"
-          integrity="sha384-S/0sPWyivHb0nXEN1JbIZoAHSDK4PQv0Zdl6399sbd0mYRatVZsKWdfflTIgipPy"
-          crossOrigin=""
-        />
+        <link 
+           href='https://fonts.googleapis.com/css?family=Lato:400,700' 
+          rel='stylesheet' 
+          integrity="sha384-DelNu+PL/74bL4pHGH8gPG8J5Q6wrLpZiiVttBSvpOibBVQf3EOXerhZlmHcnZsI"
+          type='text/css'
+          crossOrigin=""
+        />
         <script
           src="https://unpkg.com/[email protected]/dist/leaflet.js"
           integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
           crossOrigin=""
         />
         <script src="html5-qrcode.min.js" />
+
       </head>
 
       <body className={inter.className}>{children}</body>

diff --git a/src/app/siteMapPage/page.tsx b/src/app/siteMapPage/page.tsx
@@ -5,7 +5,12 @@ import dynamic from 'next/dynamic';
 import NavBar from '../../components/userComponents/navBar/navBar';
 import FilterButton from '../../components/userComponents/FilterButton/FilterButton';
 
-const filterButtonContent: string[] = ['Virtual Tour Map', 'Exhibits Map'];
+
+const filterButtonContent: string[] = [
+  'Virtual Tour Map',
+  'Exhibits Map',
+];
+
 
 const SiteMap = dynamic(
   () => import('../../components/userComponents/SiteMap/SiteMap'),
@@ -16,51 +21,62 @@ const SiteMap = dynamic(
 );
 type ModeState = 'tours' | 'exhibits';
 
+
 /**
  * @returns Page for the interactive map
  */
 function MapPage() {
+
+
   const [selectedMap, setSelectedMap] = useState(filterButtonContent[0]); // "Virtual Tour Map" by default
   const [mode, setMode] = useState<ModeState>('tours');
 
-  // move tour logic here: need to share state between filter
-  const handleFilter = mapName => {
+  // move tour logic here: need to share state between filter 
+  const handleFilter = (mapName) => {
     setSelectedMap(mapName);
-    if (mapName === 'Virtual Tour Map') {
-      setMode('tours');
-    } else if (mapName === 'Exhibits Map') {
-      setMode('exhibits');
+    if (mapName === "Virtual Tour Map") {
+      setMode("tours");
+    } else if (mapName === "Exhibits Map") {
+      setMode("exhibits");
+
     }
   };
 
   const renderFilterContainer = () => (
-    <div className="mb-6 w-full pl-0 pr-0 ">
-      <div className="pt-9 pr-2 pl-2">
-        <p className="text-night font-lato text-2xl font-semibold">
-          Wildlife Care Center Maps
-        </p>
+
+    <div className="container mb-6  pl-0 pr-0 ">
+      <div className='pt-9 pr-2 pl-2 pb-7'>
+      <p className="text-night font-lato text-2xl font-semibold">Wildlife Care Center Maps</p>
       </div>
-      <div className="flex flex-row items-center gap-x-0  justify-center text-scary-forest text-center font-lato text-base font-medium pt-7 pr-2 pl-2 w-full">
+      <div className="flex flex-row items-center gap-x-0 pr-1 pl-1 w-full rounded-lg bg-mint-cream  border-mint-cream border-[5px]">
+
+
         {filterButtonContent &&
           filterButtonContent.map(text => (
-            <FilterButton
-              key={text}
-              content={text}
-              onClick={() => handleFilter(text)} // Fixed here
-              isSelected={selectedMap === text}
-            />
+
+            <FilterButton 
+            key={text} 
+            content={text} 
+            onClick={() => handleFilter(text)} // Fixed here
+            isSelected={selectedMap === text}/>
+
           ))}
+
+
       </div>
     </div>
   );
 
   return (
     <>
+
       <NavBar />
       <div className="pt-0 pl-2 pr-2 bg-ivory">
         {renderFilterContainer()}
         <div className=" w-full pr-2 pl-2 flex h-2/3 mb-8">
-          <SiteMap mode={mode} />
+
+        <SiteMap mode={mode} />
+
         </div>
       </div>
     </>

diff --git a/src/app/spotlightPage/[spotlightId]/page.tsx b/src/app/spotlightPage/[spotlightId]/page.tsx
@@ -4,12 +4,11 @@ import Link from 'next/link';
 import React, { useEffect, useState } from 'react';
 
 import { TourRow, DisplayRow } from '../../../types/types';
-import {
-  fetchRecommendedSpotlights,
-  fetchTour,
-} from '../../../supabase/tours/queries';
+
+import { fetchTour } from '../../../supabase/tours/queries';
 import NavBar from '../../../components/userComponents/navBar/navBar';
-import { fetchDisplayfromSpotlight } from '../../../supabase/tour_displays/queries';
+import { fetchDisplayfromSpotlight, fetchRelatedSpotlightIdsFromSpotlight } from '../../../supabase/tour_displays/queries';
+
 
 /**
  * @param root0 -

diff --git a/src/components/userComponents/FilterButton/FilterButton.tsx b/src/components/userComponents/FilterButton/FilterButton.tsx
@@ -19,18 +19,31 @@ interface FilterButtonProps {
  * @param onClick.onClick
  */
 
+
+
+
+
 /**
  *
  */
 function FilterButton({ content, onClick, isSelected }: FilterButtonProps) {
-  const selectedStyle = 'bg-mint-cream text-scary-forest';
+  const selectedStyle = 'bg-hunterGreen text-white font-lato text-base font-medium rounded-lg';
+
+
+  const buttonClass = `py-2 px-6 whitespace-nowrap border-solid text-scary-forest flex-grow font-lato text-base font-medium  ${
 
-  const buttonClass = `py-2 px-6 whitespace-nowrap border-[0.8px] border-scary-forest border-solid text-night flex-grow ${
     isSelected ? selectedStyle : ''
   }`;
 
   return (
-    <button type="button" className={buttonClass} onClick={onClick}>
+
+    <button
+      type="button"
+      className={buttonClass}
+      onClick={onClick}
+      style={{ outline: 'none' }}
+    >
+
       {content}
     </button>
   );

diff --git a/src/components/userComponents/SiteMap/DisplayPreviewCard.tsx b/src/components/userComponents/SiteMap/DisplayPreviewCard.tsx
@@ -31,6 +31,9 @@ function DisplayPreviewCard({
   const [loading, setLoading] = useState<boolean>(false);
   const [previewImage, setPreviewImage] = useState<string>('');
   const [name1, setname1] = useState<string>('');
+
+  const [tourType, setTourType] = useState<string>('');
+
   const { id, description, coordinates, category } = tour;
   // name, for tour title for exhibit
 
@@ -49,103 +52,107 @@ function DisplayPreviewCard({
     const fetchDetails = async () => {
       setLoading(true);
 
-      let imageUrl = '';
-      let displayName = '';
-
-      if ('name' in tour) {
+
+      let imageUrl = ''; 
+      let displayName = ''; 
+
+      if ('name' in tour) {  // because title is name for type TourExhibit
         // Fetch images for a tour
         const images = await fetchImagesForTour(tour.id);
         if (images && images.length > 0) {
-          imageUrl = images[0].url;
+          imageUrl = images[0].url; 
         }
-        displayName = tour.name;
+        displayName = tour.name; 
+        setTourType('tour');
       } else {
         // Handle as an ExhibitRow
-        const imageObj = await fetchExhibitImage(tour.id);
+        const imageObj = await fetchExhibitImage(tour.id); 
         if (imageObj) {
-          imageUrl = imageObj.image;
+          imageUrl = imageObj.image; 
         }
         displayName = tour.title;
+        setTourType('exhibit'); 
       }
+
 
       // Set state variables
       setPreviewImage(imageUrl);
       setname1(displayName);
       setLoading(false);
     };
 
+
     fetchDetails();
-  }, [tour]);
+  }, [tour]); 
+
+
 
   /** route this to spotlights */
 
   return (
-    <div className="flex flex-col items-center justify-center w-[25rem] h-[8.25rem] max-w-xs sm:max-w-sm md:max-w-md lg:max-w-lg mx-auto p-4 pb-[2.87rem] pr-[1.19rem] pl-[1.19rem] rounded-md">
-      <div
-        className="flex flex-row items-center rounded-md overflow-hidden bg-ivory cursor-pointer w-full sm:w-4/4 md:w-5/5 lg:w-2/2 xl:w-5/5 flex-shrink-0 shadow-xl"
-        aria-hidden="true"
-      >
-        {!loading && (
+
+      <div className="flex flex-col items-center justify-center w-[25rem] h-[8.25rem] max-w-xs sm:max-w-sm md:max-w-md lg:max-w-lg mx-auto p-4 pb-[2.87rem] pr-[1.19rem] pl-[1.19rem] rounded-md">
+        <div
+          className="flex flex-row items-center rounded-md overflow-hidden bg-ivory cursor-pointer w-full sm:w-4/4 md:w-5/5 lg:w-2/2 xl:w-5/5 flex-shrink-0 shadow-xl" 
+          aria-hidden="true"
+        >
+          {!loading && 
           <div className="relative w-[7.8125rem] z-10 h-[8.25rem] shrink-0 rounded-tl-md rounded-tr-none rounded-br-none rounded-bl-md">
+
             <Image
+
               src={previewImage}
-              alt="placeholder"
+              alt='placeholder'
               layout="fill"
               objectFit="cover"
-            />
-          </div>
-        )}
-        <div
-          className="justify-items-center align-middle z-20 overflow-hidden w-full h-full"
-          onClick={handleClick}
-          onKeyDown={e => {
-            if (handleClick && e.key === 'Enter') {
-              handleClick();
-            }
-          }}
-          role="button"
-          tabIndex={0}
-        >
-          <div className="">
-            <div
-              className="flex justify-end items-center pt-2 pr-2"
-              onClick={e => {
-                e.stopPropagation(); // This prevents the click from propagating to the parent link
-                handleClose(); // Then, your handleClose function is called
-              }}
-            >
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                width="14"
-                height="15"
-                viewBox="0 0 14 15"
-                fill="none"
-              >
-                <path
-                  d="M10.0523 11.0274L3.35083 4.32596M10.0524 4.32596L3.35083 11.0275"
-                  stroke="#272929"
-                  strokeWidth="1.11692"
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                />
-              </svg>
+            /> 
             </div>
-            <Link href={`/spotlightPage/${id}`}>
-              <h3 className="relative truncate text-asparagus pr-[0.31rem] pl-[0.75rem] pt-[0rem] uppercase font-light text-xs leading-normal">
+          }
+          <div
+            className="justify-items-center align-middle z-20 overflow-hidden w-full h-full"
+            onClick={handleClick}
+            onKeyDown={e => {
+              if (handleClick && e.key === 'Enter') {
+                handleClick();
+              }
+            }}
+            role="button"
+            tabIndex={0}
+          >
+            <div className=""> 
+            <div className="flex justify-end items-center pt-2 pr-2" onClick={(e) => {
+                  e.stopPropagation(); //  prevents the click from propagating to the parent link
+                  handleClose(); 
+                }}>
+                  <svg xmlns="http://www.w3.org/2000/svg" width="14" height="15" viewBox="0 0 14 15" fill="none">
+                    <path d="M10.0523 11.0274L3.35083 4.32596M10.0524 4.32596L3.35083 11.0275" stroke="#272929" stroke-width="1.11692" stroke-linecap="round" stroke-linejoin="round"/>
+                  </svg>
+                </div>
+              <Link href={`/spotlightPage/${id}`}>
+              <h3
+                className="relative truncate text-asparagus pr-[0.31rem] pl-[0.75rem] pt-[0rem] uppercase font-light text-xs leading-normal"
+
+              >
                 {category}
               </h3>
-              <h3 className="relative truncate font-medium font-lato text-night pr-[0.31rem] pl-[0.75rem] pt-[0.30rem] pb-[0rem] text-base leading-normal">
+              <h3
+                className="relative truncate font-medium font-lato text-night pr-[0.31rem] pl-[0.75rem] pt-[0.30rem] pb-[0rem] text-base leading-normal"
+
+              >
                 {name1}
               </h3>
-
+      
               <h4 className="relative font-lato h-[2rem] pr-[0.31rem] pt-[0rem] pl-[0.75rem] pb-[2.4rem] text-shadow line-clamp-2 text-sm">
                 {description}
               </h4>
-            </Link>
+              </Link>
+            </div>
           </div>
         </div>
       </div>
-    </div>
+
+
+
   );
 }