From 3893b858f4c370540b7466e23e4227e99ffe1f07 Mon Sep 17 00:00:00 2001
From: Miha <athmiha@berkeley.edu>
Date: Wed, 6 Mar 2024 00:38:58 -0800
Subject: [PATCH 01/21] done with popup styling

---
 src/app/layout.tsx | 1 +
 1 file changed, 1 insertion(+)
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 8bb23574..15472c8a 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -48,6 +48,7 @@ export default function RootLayout({
           crossOrigin=""
         />
         <script src="html5-qrcode.min.js" />
+        
       </head>
 
       <body className={inter.className}>{children}</body>

From 15e2cd0c807a86cae9dab806cf87ff1508a6f347 Mon Sep 17 00:00:00 2001
From: sarahhpeng <sarah.peng@berkeley.edu>
Date: Fri, 5 Apr 2024 00:35:03 -0700
Subject: [PATCH 02/21] updated package lock for npm install

---
 package-lock.json | 48 +++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 48 insertions(+)

diff --git a/package-lock.json b/package-lock.json
index 28856d05..a2f1aac9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3915,6 +3915,54 @@
       "resolved": "https://registry.npmjs.org/node-bin-setup/-/node-bin-setup-1.1.3.tgz",
       "integrity": "sha512-opgw9iSCAzT2+6wJOETCpeRYAQxSopqQ2z+N6BXwIMsQQ7Zj5M8MaafQY8JMlolRR6R1UXg2WmhKp0p9lSOivg=="
     },
+    "node_modules/node-domexception": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/node-domexception/-/node-domexception-1.0.0.tgz",
+      "integrity": "sha512-/jKZoMpw0F8GRwl4/eLROPA3cfcXtLApP0QzLmUT/HuPCZWyB7IY9ZrMeKw2O/nFIqPQB3PVM9aYm0F312AXDQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "dependencies": {
+        "nanoid": "^3.3.6",
+        "picocolors": "^1.0.0",
+        "source-map-js": "^1.0.2"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
+    "node_modules/node": {
+      "version": "21.7.1",
+      "resolved": "https://registry.npmjs.org/node/-/node-21.7.1.tgz",
+      "integrity": "sha512-j6NFfbKy3DBuaJh2X8lRZmS59oLr2XRtt0rTa9VsFj3ZcGbeK7xp40gZaI92AqNuRv1aL5dRueNqL6YuZFcjJg==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "node-bin-setup": "^1.0.0"
+      },
+      "bin": {
+        "node": "bin/node"
+      },
+      "engines": {
+        "npm": ">=5.0.0"
+      }
+    },
+    "node_modules/node-bin-setup": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/node-bin-setup/-/node-bin-setup-1.1.3.tgz",
+      "integrity": "sha512-opgw9iSCAzT2+6wJOETCpeRYAQxSopqQ2z+N6BXwIMsQQ7Zj5M8MaafQY8JMlolRR6R1UXg2WmhKp0p9lSOivg=="
+    },
     "node_modules/node-gyp-build": {
       "version": "4.7.0",
       "license": "MIT",

From 2ecb503310d853f6d254157338069e1d23a65377 Mon Sep 17 00:00:00 2001
From: Noah Hernandez <63211322+oahnh@users.noreply.github.com>
Date: Tue, 9 Apr 2024 14:43:46 -0700
Subject: [PATCH 03/21] Revert "fix: remove formatting changes to
 media/queries.tsx"

This reverts commit f6e1d691fc77c68cad08e5c4cbdf2e769d6a8cd0.
---
 src/supabase/media/queries.ts | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/supabase/media/queries.ts b/src/supabase/media/queries.ts
index e0505e0a..341c3354 100644
--- a/src/supabase/media/queries.ts
+++ b/src/supabase/media/queries.ts
@@ -34,9 +34,11 @@ export async function fetchImagesForDisplay(displayId: string | undefined) {
   return data;
 }
 
+
+
 /**
  *
- * @param tourId id of the tour to fetch images for
+ * @param tourId id of the tour to fetch images for 
  * @returns an array of image objects corresponding to the display
  */
 export async function fetchImagesForTour(
@@ -53,7 +55,7 @@ export async function fetchImagesForTour(
     throw new Error(error.message);
   }
 
-  return data;
+  return data; 
 }
 /**
  *

From 57b466896f15abb8822e2473a203f3dac9b73736 Mon Sep 17 00:00:00 2001
From: Noah Hernandez <63211322+oahnh@users.noreply.github.com>
Date: Tue, 9 Apr 2024 14:50:40 -0700
Subject: [PATCH 04/21] cont. rebase

---
 package-lock.json                             |   1 -
 package.json                                  |   2 +-
 .../[tourId]/[displayId]/page.tsx             |   2 +-
 src/app/featuredToursPage/page.tsx            |   5 +-
 src/app/globals.css                           |   4 +-
 src/app/newsFeedPage/page.tsx                 |   1 +
 src/app/siteMapPage/page.tsx                  |  40 +-
 .../[spotlightId]/[displayId]/page.tsx        |  40 +-
 src/app/spotlightPage/[spotlightId]/page.tsx  |  51 ++-
 src/app/spotlightPage/page.tsx                |  13 +-
 .../FilterButton/FilterButton.tsx             |   9 +-
 .../HomeWildlifeSpotlights.tsx                |   7 +-
 .../ImageScroller/ImageScroller.tsx           |   4 +-
 .../SiteMap/DisplayPreviewCard.tsx            | 106 ++---
 .../SiteMap/MapInteractionHandler.tsx         |   2 +-
 .../userComponents/SiteMap/SiteMap.tsx        |  68 ++--
 .../userComponents/emailPopup/page.tsx        | 153 ++++----
 src/supabase/category/queries.tsx             |  43 ++-
 src/supabase/exhibits/queries.tsx             |  44 +--
 src/supabase/media/queries.ts                 |   2 -
 src/supabase/tour_displays/queries.tsx        |  42 +-
 src/supabase/tours/queries.tsx                |  74 ++--
 src/types/supabase.ts                         | 362 ++++++++----------
 src/types/types.ts                            |   3 +-
 24 files changed, 539 insertions(+), 539 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index a2f1aac9..d16cbe1e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -19,7 +19,6 @@
         "leaflet": "^1.9.4",
         "moment": "^2.30.1",
         "next": "latest",
-        "node": "^21.7.1",
         "react": "latest",
         "react-bootstrap": "^2.9.0",
         "react-dom": "latest",
diff --git a/package.json b/package.json
index 2b17aba9..68e6728b 100644
--- a/package.json
+++ b/package.json
@@ -30,7 +30,7 @@
     "leaflet": "^1.9.4",
     "moment": "^2.30.1",
     "next": "latest",
-    "node": "^21.7.1",
+    "npm": "^10.2.4",
     "react": "latest",
     "react-bootstrap": "^2.9.0",
     "react-dom": "latest",
diff --git a/src/app/featuredToursPage/[tourId]/[displayId]/page.tsx b/src/app/featuredToursPage/[tourId]/[displayId]/page.tsx
index d464684c..fa56970c 100644
--- a/src/app/featuredToursPage/[tourId]/[displayId]/page.tsx
+++ b/src/app/featuredToursPage/[tourId]/[displayId]/page.tsx
@@ -137,4 +137,4 @@ export default function TourStopPage({
       </div>
     </div>
   );
-}
+}
\ No newline at end of file
diff --git a/src/app/featuredToursPage/page.tsx b/src/app/featuredToursPage/page.tsx
index 99293f28..3ea574a6 100644
--- a/src/app/featuredToursPage/page.tsx
+++ b/src/app/featuredToursPage/page.tsx
@@ -3,7 +3,10 @@
 import Link from 'next/link';
 import React, { useEffect, useState } from 'react';
 
-import { fetchAllTours } from '../../supabase/tours/queries';
+import {
+  fetchAllTours,
+  joinSpotlightsWithMedia,
+} from '../../supabase/tours/queries';
 import NavBar from '../../components/userComponents/navBar/navBar';
 import { TourRow } from '../../types/types';
 
diff --git a/src/app/globals.css b/src/app/globals.css
index 7ba50cc9..6503f969 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -94,9 +94,7 @@ These styles are applied automatically to certain div tags, but you can also cal
     )
     rgb(var(--background-start-rgb));
 } */
-body {
-  @apply bg-ivory;
-}
+body,
 html {
   height: 100%;
 }
diff --git a/src/app/newsFeedPage/page.tsx b/src/app/newsFeedPage/page.tsx
index ff52e004..10c3577b 100644
--- a/src/app/newsFeedPage/page.tsx
+++ b/src/app/newsFeedPage/page.tsx
@@ -7,6 +7,7 @@ import { NewsRow } from '../../types/types';
 import { fetchAllNewsByDate } from '../../supabase/news/queries';
 import NewsDisplay from '../../components/userComponents/NewsDisplay/NewsDisplay';
 
+
 /**
  * @returns news feed page
  */
diff --git a/src/app/siteMapPage/page.tsx b/src/app/siteMapPage/page.tsx
index 61b47755..bfc66d5a 100644
--- a/src/app/siteMapPage/page.tsx
+++ b/src/app/siteMapPage/page.tsx
@@ -5,7 +5,10 @@ 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'),
@@ -20,35 +23,35 @@ 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='pt-9 pr-2 pl-2'>
+      <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">
         {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>
@@ -56,11 +59,12 @@ function MapPage() {
 
   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]/[displayId]/page.tsx b/src/app/spotlightPage/[spotlightId]/[displayId]/page.tsx
index 8760be7e..c20c394d 100644
--- a/src/app/spotlightPage/[spotlightId]/[displayId]/page.tsx
+++ b/src/app/spotlightPage/[spotlightId]/[displayId]/page.tsx
@@ -1,5 +1,3 @@
-/* eslint-disable jsdoc/check-param-names */
-
 'use client';
 
 import Link from 'next/link';
@@ -10,11 +8,13 @@ import NavBar from '../../../../components/userComponents/navBar/navBar';
 import { fetchDisplayFromId } from '../../../../supabase/displays/queries';
 import { fetchDisplayfromSpotlight } from '../../../../supabase/tour_displays/queries';
 
-// eslint-disable-next-line jsdoc/require-param
 /**
- * @param root0 - For a spotlight, it's composed of displays which have their own pages.  This will handle one of those pages.
- * @param root0.params.displayId - Display ID
- * @param root0.params.spotlightId - Spotlight ID
+ *
+ *
+ * @param root0
+ * @param root0.params
+ * @param root0.params.displayId
+ * @param root0.params.spotlightId
  * @returns display page
  */
 export default function Page({
@@ -27,7 +27,6 @@ export default function Page({
     created_at: 'N/A',
     description: 'N/A',
     id: '0',
-    summary: 'N/A',
     title: 'N/A',
     updated_at: 'N/A',
   });
@@ -54,13 +53,12 @@ export default function Page({
 
         setOtherDisplays(responseDataOtherDisplays);
       } catch (error) {
-        // eslint-disable-next-line no-console
         console.error(error);
       }
     }
 
     fetchData();
-  }, [params.displayId, params.spotlightId]);
+  }, []);
 
   return (
     <div className="bg-[#ebf0e4]">
@@ -83,20 +81,16 @@ export default function Page({
       </h1>
 
       <div className="flex space-x-[14px] pl-[25px] pt-[16px] w-screen overflow-x-auto">
-        {otherDisplays.map(otherDisplay => (
-          <Link
-            key={otherDisplay.id}
-            href={`/spotlightPage/${params.spotlightId}/${otherDisplay.id}?spotlightId=${params.spotlightId}`}
-          >
-            <button
-              type="button"
-              className="bg-[#7CA24E] w-[163px] h-[74px] text-white font-bold rounded-2xl p-[25px]"
-            >
-              {otherDisplay.title}
-            </button>
-          </Link>
-        ))}
+      {otherDisplays.map( 
+            otherDisplay => (
+                <Link key={otherDisplay.id} href={`/spotlightPage/${params.spotlightId}/${otherDisplay.id}?spotlightId=${params.spotlightId}`} >
+                    <button type="button" className="bg-[#7CA24E] w-[163px] h-[74px] text-white font-bold rounded-2xl p-[25px]">
+                        {otherDisplay.title}
+                    </button>
+                </Link>
+
+            ))}
       </div>
     </div>
   );
-}
+}
\ No newline at end of file
diff --git a/src/app/spotlightPage/[spotlightId]/page.tsx b/src/app/spotlightPage/[spotlightId]/page.tsx
index 7db4edd8..e7862743 100644
--- a/src/app/spotlightPage/[spotlightId]/page.tsx
+++ b/src/app/spotlightPage/[spotlightId]/page.tsx
@@ -4,18 +4,18 @@ 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 -
- * @param root0.params -
- * @param root0.params.spotlightId - Spotlight ID of page that is linked on the spotlight page.
- * @returns a single spotlight page given a spotlight Id
+ * @param -.params
+ * @param -.params.spotlightId
+ * @param -.params.params
+ * @param -.params.params.spotlightId
+ * @param -.params.params
+ * @param -.params.params.spotlightId
+ * @returns a spotlight page given a spotlight Id
  */
 export default function Page({ params }: { params: { spotlightId: string } }) {
   const [spotlight, setSpotlight] = useState<TourRow>({
@@ -26,19 +26,15 @@ export default function Page({ params }: { params: { spotlightId: string } }) {
     spotlight: true,
     preview_text: 'N/A',
     stop_count: 0,
-    category: 'BuildingsAndServices',
-    coordinates: {},
   });
 
   const [displays, setDisplays] = useState<DisplayRow[]>([]);
 
-  const [recommendedSpotlights, setRecommendedSpotlights] = useState<TourRow[]>(
-    [],
-  );
+  // const [relatedSpolights, setRelatedSpotlight] = useState<TourRow[]>([])
 
   useEffect(() => {
     /**
-     *
+     * @returns data from tour table and display table
      */
     async function fetchData() {
       try {
@@ -49,17 +45,17 @@ export default function Page({ params }: { params: { spotlightId: string } }) {
         const responseDataForDisplays: DisplayRow[] =
           await fetchDisplayfromSpotlight(params.spotlightId);
         setDisplays(responseDataForDisplays);
-        const responseDataForRecommendedSpotlights: TourRow[] =
-          await fetchRecommendedSpotlights(params.spotlightId);
-        setRecommendedSpotlights(responseDataForRecommendedSpotlights);
+
+        // const responseDataForRelatedSpotlights: TourRow[] = await fetchRelatedSpotlightsfromSpotlightId(params.spotlightId);
+        // setRelatedSpotlight(responseDataForRelatedSpotlights);
+
       } catch (error) {
-        // eslint-disable-next-line no-console
         console.error(error);
       }
     }
 
     fetchData();
-  }, [params.spotlightId]);
+  }, []);
 
   return (
     <div className="bg-[#ebf0e4]">
@@ -95,28 +91,29 @@ export default function Page({ params }: { params: { spotlightId: string } }) {
           </Link>
         ))}
       </div>
-      if
+
       <h1 className="text-black font-Lato font-bold text-[18px] font-medium pl-[18px] pb-[16px]">
         Related Spotlights
       </h1>
+
       <ul className="list-none p-0 flex">
-        {recommendedSpotlights.map(recSpotlight => (
+        {/* {relatedSpolights.map(otherSpotlight => (
           <li
             className="pl-[18px] w-[162px] overflow-x-auto"
-            key={recSpotlight.id}
+            key={otherSpotlight.id}
           >
             <Link href={`/spotlightPage/${spotlight.id}`}>
               <div className="bg-[#386131] h-[169px] rounded-2xl p-[18px] flex flex-col" />
               <h4 className="text-black font-Lato text-20 font-bold mt-2">
-                {recSpotlight.name}
+                {otherSpotlight.name}
               </h4>
               <h2 className="text-gray font-Lato text-sm font-normal">
-                {recSpotlight.description}
+                {otherSpotlight.description}
               </h2>
             </Link>
           </li>
-        ))}
+        ))} */}
       </ul>
     </div>
   );
-}
+}
\ No newline at end of file
diff --git a/src/app/spotlightPage/page.tsx b/src/app/spotlightPage/page.tsx
index 3c879669..64500062 100644
--- a/src/app/spotlightPage/page.tsx
+++ b/src/app/spotlightPage/page.tsx
@@ -4,15 +4,15 @@ import Link from 'next/link';
 import React, { useEffect, useState } from 'react';
 import Image from 'next/image';
 
-import { joinAllSpotlightsWithMedia } from '../../supabase/tours/queries';
+import { fetchSpotlightTours } from '../../supabase/tours/queries';
 import NavBar from '../../components/userComponents/navBar/navBar';
-import { SpotlightWithMediaRow } from '../../types/types';
+import { TourRow } from '../../types/types';
 
 /**
  * @returns spotlights from tours table
  */
 function App() {
-  const [spotlights, setSpotlights] = useState<SpotlightWithMediaRow[]>([]);
+  const [spotlights, setSpotlights] = useState<TourRow[]>([]);
 
   useEffect(() => {
     /**
@@ -20,11 +20,9 @@ function App() {
      */
     async function fetchData() {
       try {
-        const responseData: SpotlightWithMediaRow[] =
-          await joinAllSpotlightsWithMedia();
+        const responseData: TourRow[] = await fetchSpotlightTours();
         setSpotlights(responseData);
       } catch (error) {
-        // eslint-disable-next-line no-console
         console.error(error);
       }
     }
@@ -56,12 +54,11 @@ function App() {
                   <div className="relative top-28">
                     <Image
                       key={spotlight.id}
-                      src={spotlight.media_url}
+                      src={spotlight.url}
                       alt="Media Image"
                       width={100}
                       height={214}
                       priority
-                      style={{ objectFit: 'cover' }}
                     />
                   </div>
                 </div>
diff --git a/src/components/userComponents/FilterButton/FilterButton.tsx b/src/components/userComponents/FilterButton/FilterButton.tsx
index ef66397d..ae198587 100644
--- a/src/components/userComponents/FilterButton/FilterButton.tsx
+++ b/src/components/userComponents/FilterButton/FilterButton.tsx
@@ -19,6 +19,9 @@ interface FilterButtonProps {
  * @param onClick.onClick
  */
 
+
+
+
 /**
  *
  */
@@ -30,7 +33,11 @@ function FilterButton({ content, onClick, isSelected }: FilterButtonProps) {
   }`;
 
   return (
-    <button type="button" className={buttonClass} onClick={onClick}>
+    <button
+      type="button"
+      className={buttonClass}
+      onClick={onClick}
+    >
       {content}
     </button>
   );
diff --git a/src/components/userComponents/HomeWildlifeSpotlights/HomeWildlifeSpotlights.tsx b/src/components/userComponents/HomeWildlifeSpotlights/HomeWildlifeSpotlights.tsx
index d2ce7b19..4f9b74f3 100644
--- a/src/components/userComponents/HomeWildlifeSpotlights/HomeWildlifeSpotlights.tsx
+++ b/src/components/userComponents/HomeWildlifeSpotlights/HomeWildlifeSpotlights.tsx
@@ -1,9 +1,7 @@
-/* eslint-disable jsdoc/require-param-description */
-/* eslint-disable jsdoc/check-param-names */
 import React, { useEffect, useState } from 'react';
 import { HiChevronRight } from 'react-icons/hi';
 import Link from 'next/link';
-import { joinAllSpotlightsWithMedia } from '../../../supabase/tours/queries';
+import { joinSpotlightsWithMedia } from '../../../supabase/tours/queries';
 import { SpotlightWithMediaRow } from '../../../types/types';
 
 /**
@@ -28,10 +26,9 @@ function HomeWildlifeSpotlights(): React.JSX.Element {
     async function fetchData() {
       try {
         const responseData: SpotlightWithMediaRow[] =
-          await joinAllSpotlightsWithMedia();
+          await joinSpotlightsWithMedia();
         setSpotlightsWithMedia(responseData);
       } catch (error) {
-        // eslint-disable-next-line no-console
         console.error('Error in fetch data: ', error);
       }
     }
diff --git a/src/components/userComponents/ImageScroller/ImageScroller.tsx b/src/components/userComponents/ImageScroller/ImageScroller.tsx
index 70bc6aa3..95c92eb7 100644
--- a/src/components/userComponents/ImageScroller/ImageScroller.tsx
+++ b/src/components/userComponents/ImageScroller/ImageScroller.tsx
@@ -48,8 +48,8 @@ export default function Carousel({ media }: CarouselProps) {
               objectFit="cover"
               priority
             />
-          </div>
-        ))}
+          )}
+        </div>
       </div>
       {media.length > 1 && (
         <button
diff --git a/src/components/userComponents/SiteMap/DisplayPreviewCard.tsx b/src/components/userComponents/SiteMap/DisplayPreviewCard.tsx
index f65d7e47..ed2d166e 100644
--- a/src/components/userComponents/SiteMap/DisplayPreviewCard.tsx
+++ b/src/components/userComponents/SiteMap/DisplayPreviewCard.tsx
@@ -49,90 +49,100 @@ function DisplayPreviewCard({
   useEffect(() => {
     const fetchDetails = async () => {
       setLoading(true);
-
-      let imageUrl = '';
-      let displayName = '';
-
-      if ('name' in tour) {
+  
+      let imageUrl = ''; 
+      let displayName = ''; 
+  
+      if ('name' in tour) { 
         // 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; 
       } 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;
+        displayName = tour.title; 
       }
-
+  
       // Set state variables
       setPreviewImage(imageUrl);
       setname1(displayName);
       setLoading(false);
     };
-
+  
     fetchDetails();
   }, [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
-              }}
-            >
-              <CloseIcon />
+            /> 
             </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(); // 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"
+  
+              >
                 {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>
+
+
   );
 }
 
diff --git a/src/components/userComponents/SiteMap/MapInteractionHandler.tsx b/src/components/userComponents/SiteMap/MapInteractionHandler.tsx
index 131a1c64..f98709a7 100644
--- a/src/components/userComponents/SiteMap/MapInteractionHandler.tsx
+++ b/src/components/userComponents/SiteMap/MapInteractionHandler.tsx
@@ -12,4 +12,4 @@ function RecenterMap({ center }) {
 
   return null;
 }
-export default RecenterMap;
+export default RecenterMap;
\ No newline at end of file
diff --git a/src/components/userComponents/SiteMap/SiteMap.tsx b/src/components/userComponents/SiteMap/SiteMap.tsx
index c0116ee4..e1938064 100644
--- a/src/components/userComponents/SiteMap/SiteMap.tsx
+++ b/src/components/userComponents/SiteMap/SiteMap.tsx
@@ -4,23 +4,21 @@ import L, { LatLngExpression } from 'leaflet';
 import React, { useEffect, useState } from 'react';
 import { LayersControl, MapContainer, TileLayer, Marker } from 'react-leaflet';
 import { renderToStaticMarkup } from 'react-dom/server';
-import { fetchAllSpotlights } from '../../../supabase/tours/queries';
+import { fetchSpotlightTours } from '../../../supabase/tours/queries';
 import { ExhibitRow, TourRow } from '../../../types/types';
 import Control from './Control';
 import DisplayPreviewCard from './DisplayPreviewCard';
-import {
-  fetchExhibit,
-  fetchAllExhibits,
-} from '../../../supabase/exhibits/queries';
+import { fetchExhibit, fetchAllExhibits } from '../../../supabase/exhibits/queries';
 import { getCategoryColor1 } from '../../../supabase/category/queries';
 import RecenterMap from './MapInteractionHandler';
 import { DefaultMarkerIcon, SelectedMarkerIcon } from '../../../../public/icons';
 
 const center: LatLngExpression = {
-  lat: 37.58748,
-  lng: -122.33101,
+  lat: 37.587480,
+  lng: -122.331010,
 };
 
+
 const tileLayer: { attribution: string; url: string } = {
   attribution: '',
   url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
@@ -30,7 +28,7 @@ const createDefaultMarkerIcon = (color: string) =>
   L.divIcon({
     html: renderToStaticMarkup(<DefaultMarkerIcon color={color} />),
     className: 'default-icon',
-    iconSize: [20, 20],
+    iconSize: [20, 20], 
   });
 
 const createSelectedMarkerIcon = (color: string) =>
@@ -40,6 +38,7 @@ const createSelectedMarkerIcon = (color: string) =>
     iconSize: [41, 40],
   });
 
+
 interface SiteMapProps {
   mode: 'tours' | 'exhibits';
 }
@@ -51,9 +50,7 @@ interface SiteMapProps {
  * @returns Interactive map based on React Leaflet, holds the markers which lead to exhibits
  */
 function SiteMap({ mode }: SiteMapProps) {
-  const [spotlightTours, setSpotlightTours] = useState<
-    TourRow[] | ExhibitRow[] | null
-  >(null);
+  const [spotlightTours, setSpotlightTours] = useState<TourRow[] | ExhibitRow[] | null>(null);
   const [colorsMap, setColorsMap] = useState<{ [key: string]: string }>({});
   const [selectedTour, setSelectedTour] = useState<TourRow | ExhibitRow | null>(
     null,
@@ -70,27 +67,24 @@ function SiteMap({ mode }: SiteMapProps) {
     async function fetchData() {
       try {
         let data;
-        if (mode === 'tours') {
-          data = await fetchAllSpotlights();
-        } else if (mode === 'exhibits') {
+        if (mode === "tours") {
+          data = await fetchSpotlightTours();
+        } else if (mode === "exhibits") {
           data = await fetchAllExhibits();
         }
         if (data) {
-          const colors = await Promise.all(
-            data.map(async item => ({
-              id: item.id,
-              color: await getCategoryColor1(item.category),
-            })),
-          );
-          const newColorsMap = colors.reduce(
-            (acc, curr) => ({
-              ...acc,
-              [curr.id]: curr.color,
-            }),
-            {},
-          );
+          const colors = await Promise.all(data.map(async (item) => ({
+            id: item.id,
+            color: await getCategoryColor1(item.category)
+            
+          })));
+          const newColorsMap = colors.reduce((acc, curr) => ({
+            
+            ...acc,
+            [curr.id]: curr.color
+          }), {});
           setColorsMap(newColorsMap);
-          console.log('Colors Map:', newColorsMap); // Log here
+          console.log("Colors Map:", newColorsMap); // Log here
         }
         setSpotlightTours(data ?? []);
       } catch (error) {
@@ -111,10 +105,7 @@ function SiteMap({ mode }: SiteMapProps) {
     }
   }, [selectedTour]);
 
-  const handleMarkerSelect = (
-    tour: TourRow | ExhibitRow,
-    markerIndex: number,
-  ) => {
+  const handleMarkerSelect = (tour: TourRow | ExhibitRow, markerIndex: number) => {
     setSelectedTour(tour);
     setSelectedMarker(markerIndex);
     setMapCenter(tour.coordinates as LatLngExpression);
@@ -141,8 +132,8 @@ function SiteMap({ mode }: SiteMapProps) {
     >
       <TileLayer {...tileLayer} />
       <LayersControl position="topright">
-        {spotlightTours &&
-          spotlightTours.map((tour, i) => {
+       
+        {spotlightTours && spotlightTours.map((tour, i) => {
             // Fetch the color for this tour/exhibit; fallback to a default color if not found
             const color = colorsMap[tour.id] || '#F17373'; // Fallback color
             return (
@@ -153,11 +144,8 @@ function SiteMap({ mode }: SiteMapProps) {
                   lng: (tour.coordinates as { lng: number })?.lng ?? 0,
                 }}
                 eventHandlers={{ click: () => handleMarkerSelect(tour, i) }}
-                icon={
-                  selectedMarker === i
-                    ? createSelectedMarkerIcon(color)
-                    : createDefaultMarkerIcon(color)
-                }
+                
+                icon={(selectedMarker === i ? createSelectedMarkerIcon(color) : createDefaultMarkerIcon(color))}
               />
             );
           })}
@@ -170,7 +158,7 @@ function SiteMap({ mode }: SiteMapProps) {
           </Control>
         )}
       </LayersControl>
-      {selectedTour == null && <RecenterMap center={center} />}
+      {selectedTour == null && <RecenterMap center={center} />} 
     </MapContainer>
   );
 }
diff --git a/src/components/userComponents/emailPopup/page.tsx b/src/components/userComponents/emailPopup/page.tsx
index e9c1518d..d0ebfc12 100644
--- a/src/components/userComponents/emailPopup/page.tsx
+++ b/src/components/userComponents/emailPopup/page.tsx
@@ -2,36 +2,36 @@
 
 import React, { Fragment, useState } from 'react';
 import { Dialog, Transition } from '@headlessui/react';
-import { PiPaperPlaneTiltBold, PiSealCheck } from 'react-icons/pi';
-import { VscClose } from 'react-icons/vsc';
-import { BiErrorCircle } from 'react-icons/bi';
+import { PiPaperPlaneTiltBold , PiSealCheck } from "react-icons/pi";
+import { VscClose } from "react-icons/vsc";
+import { BiErrorCircle } from "react-icons/bi";
 import Link from 'next/link';
 import supabase from '../../../supabase/client';
 
+
 /**
  *
  * @param root0
  * @param root0.backLink
  */
-function EmailSuccess({ backLink }: { backLink: string }) {
+function EmailSuccess({backLink}: {backLink: string}) {
   return (
+  
     <div className="absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 flex flex-col items-center">
       <div>
         <PiSealCheck className="text-[#3F6A38] text-5xl mb-2.5" />
       </div>
       <div>
         <h2 className="pl-[32px] pr-[32px] text-center font-Lato font-bold text-[19px] text-[#3B3B3B]">
-          THANKS FOR SUBSCRIBING!
+        THANKS FOR SUBSCRIBING!
         </h2>
       </div>
       <div>
         <p className="text-center text-sm font-Lato text-[#3B3B3B] pt-[10px] pl-[30px] pr-[30px] text-[16px]">
-          Your sign-up request was successful! Please check your email inbox to
-          confirm.
-        </p>
+        Your sign-up request was successful! Please check your email inbox to confirm.</p>
       </div>
-
-      <Link href={backLink}>
+        
+      <Link href={backLink} >
         <div className="flex items-center justify-center pt-[24px]">
           <button
             type="button"
@@ -41,8 +41,12 @@ function EmailSuccess({ backLink }: { backLink: string }) {
           </button>
         </div>
       </Link>
+      
     </div>
-  );
+
+
+
+  )
 }
 
 type EmailInputProps = {
@@ -51,7 +55,7 @@ type EmailInputProps = {
   handleSubmit: (e: any) => void;
   showError: boolean;
   errorMsg: string;
-};
+}
 
 /**
  *
@@ -62,52 +66,52 @@ type EmailInputProps = {
  * @param root0.showError
  * @param root0.errorMsg
  */
-function EmailInput({
-  inputValue,
-  handleChange,
-  handleSubmit,
-  showError,
-  errorMsg,
-}: EmailInputProps) {
+function EmailInput({inputValue, handleChange, handleSubmit, showError, errorMsg}: EmailInputProps) {
   return (
     <>
-      <div className="flex flex-col items-center justify-center absolute left-1/2 transform -translate-x-1/2 -translate-y-1/2">
-        <div className="mb-2.5">
-          <PiPaperPlaneTiltBold className="text-[#3F6A38] text-4xl" />
-        </div>
+    
 
-        <div>
-          <h2 className="pt-[10px] pl-[48.5px] pr-[48.5px] text-center font-Lato font-bold text-[19px] text-[#3B3B3B]">
-            JOIN OUR NEWSLETTER!
-          </h2>
-        </div>
-        <div>
-          <p className="text-center text-sm font-Lato text-[#3B3B3B] pt-[10px] pl-[30px] pr-[30px] text-[16px]">
-            Monthly updates on our work and involvement opportunities.
+      <div className="flex flex-col items-center justify-center absolute left-1/2 transform -translate-x-1/2 -translate-y-1/2">
+          <div className="mb-2.5"> 
+              <PiPaperPlaneTiltBold className="text-[#3F6A38] text-4xl" />
+          </div>
+          
+          <div>
+              <h2 className="pt-[10px] pl-[48.5px] pr-[48.5px] text-center font-Lato font-bold text-[19px] text-[#3B3B3B]">
+                  JOIN OUR NEWSLETTER!
+              </h2>
+          </div>
+          <div>
+            <p className="text-center text-sm font-Lato text-[#3B3B3B] pt-[10px] pl-[30px] pr-[30px] text-[16px]">
+              Monthly updates on our work and involvement opportunities.
           </p>
-        </div>
-        <div className="flex items-center justify-center pt-[15px]">
-          <input
-            type="text"
-            placeholder="Enter your email"
-            value={inputValue}
-            onChange={handleChange}
-            className={`font-Lato text-sm bg-gray-100 border rounded-md pl-[13px] w-[283px] h-[43px] items-center ${
-              inputValue ? 'text-black' : 'text-[#BDBDBD]'
-            }`}
-          />
-        </div>
+          </div>
+          <div className="flex items-center justify-center pt-[15px]">
+        <input
+          type="text"
+          placeholder="Enter your email"
+          value={inputValue}
+          onChange={handleChange}
+          className={`font-Lato text-sm bg-gray-100 border rounded-md pl-[13px] w-[283px] h-[43px] items-center ${
+            inputValue ? 'text-black' : 'text-[#BDBDBD]'
+          }`}
+        />
+      </div>
 
-        <div className="flex items-center justify-center">
-          <button
-            type="button"
-            className="bg-[#7CA24E] w-[283px] h-[43px] text-white rounded-2xl p-[21px] mt-[8px] flex items-center justify-center"
-            onClick={handleSubmit}
-          >
-            Subscribe
-          </button>
-        </div>
+      <div className="flex items-center justify-center">
+        <button
+          type="button"
+          className="bg-[#7CA24E] w-[283px] h-[43px] text-white rounded-2xl p-[21px] mt-[8px] flex items-center justify-center"
+          onClick={handleSubmit}
+        >
+          Subscribe
+        </button>
       </div>
+      </div>
+
+   
+
+
 
       {showError && (
         <div className="error-modal flex items-center">
@@ -115,13 +119,11 @@ function EmailInput({
           <div className="icon-container">
             <BiErrorCircle className="ml-[26px] text-[#E94444] text-[11px]" />
           </div>
-          <p className="pl-[2px] font-Lato text-[11px] text-[#E94444]">
-            {errorMsg}
-          </p>
+          <p className="pl-[2px] font-Lato text-[11px] text-[#E94444]">{errorMsg}</p>
         </div>
       )}
     </>
-  );
+  )
 }
 
 /**
@@ -129,37 +131,42 @@ function EmailInput({
  * @param root0.backLink
  * @param root0
  * @param root0.backLink
- * @returns an email pop up.
- * if no email is entered and the user clicks the submit button, an error message will pop up.
- * if an invalid email is entered and the user clicks the submit button, another error message will pop up.
+ * @returns an email pop up. 
+ * if no email is entered and the user clicks the submit button, an error message will pop up. 
+ * if an invalid email is entered and the user clicks the submit button, another error message will pop up. 
  * otherwise, if a valid email is submitted and properly subscribed, another pop up will appear that will tell the user they are subscribed and direct them to another page.
  */
-export default function EmailPopup({ backLink }: { backLink: string }) {
+export default function EmailPopup({backLink}: {backLink: string}
+ ) {
   const [isOpen, setIsOpen] = useState(true);
   const [inputValue, setInputValue] = useState('');
   const [showError, setShowError] = useState(false);
   const [errorMsg, setErrorMsg] = useState('');
   const [subscribed, setSubscribed] = useState(false);
 
+
   const closeModal = () => {
     setIsOpen(false);
-  };
+  }
 
-  const handleChange = e => {
+  const handleChange = (e) => {
     setInputValue(e.target.value);
     setShowError(false);
   };
 
-  // const { error } = await supabase.from('emails').insert({ id: 1, name: 'Denmark' })
 
-  const isValidEmail = email => {
+// const { error } = await supabase.from('emails').insert({ id: 1, name: 'Denmark' })
+  
+
+  const isValidEmail = (email) => {
     const emailRegex = /^[^\s@]+@[^\s@]+\.(com|ca)$/;
     return emailRegex.test(email);
   };
 
-  const handleSubmit = async e => {
+  const handleSubmit = async (e) => {
     e.preventDefault();
 
+    
     if (!inputValue.trim()) {
       // Handle the case for an empty email
       setShowError(true);
@@ -168,16 +175,17 @@ export default function EmailPopup({ backLink }: { backLink: string }) {
       // Handle the submission for a valid email
       try {
         // Insert the email into the Supabase database
-        const { error } = await supabase
-          .from('emails')
-          .insert({ emails: inputValue });
+        const { error } = await supabase.from('emails').insert({ emails: inputValue });
       } catch (error) {
-        console.error(error);
-        return error;
-      }
+          console.error(error);
+          return error;
+        }
+
 
       // miha's edits
 
+
+
       //
       setSubscribed(true);
       console.log('Valid email:', inputValue);
@@ -204,4 +212,5 @@ export default function EmailPopup({ backLink }: { backLink: string }) {
       )}
     </div>
   );
-}
+  
+}
\ No newline at end of file
diff --git a/src/supabase/category/queries.tsx b/src/supabase/category/queries.tsx
index 16e83ac5..fe10ca19 100644
--- a/src/supabase/category/queries.tsx
+++ b/src/supabase/category/queries.tsx
@@ -25,24 +25,29 @@ import supabase from '../client';
  */
 // eslint-disable-next-line import/prefer-default-export
 export async function getCategoryColor1(category: string) {
-  try {
-    const { data, error } = await supabase
-      .from('categories') // Adjust according to your actual table name
-      .select('color')
-      .eq('category', category); // Use this if you're sure there's only one entry per category
-
-    if (error) {
-      throw new Error(error.message);
-    }
+    try {
+        const { data, error } = await supabase
+            .from('categories') // Adjust according to your actual table name
+            .select('color')
+            .eq('category', category); // Use this if you're sure there's only one entry per category
+
+        if (error) {
+            throw new Error(error.message);
+        }
 
-    // Assuming 'color' is the column you want and each category has a unique color.
-    // 'data' would be the object containing 'color', so we return data.color.
-    // Check if 'data' exists to avoid accessing property 'color' of null.
-    console.log(`Color for ${category}:`, data[0].color);
-    return data ? data[0].color : null;
-  } catch (error) {
-    console.error(`Error fetching color for category ${category}:`, error);
-    // Return null or a default color to handle errors gracefully
-    return null;
-  }
+        // Assuming 'color' is the column you want and each category has a unique color.
+        // 'data' would be the object containing 'color', so we return data.color.
+        // Check if 'data' exists to avoid accessing property 'color' of null.
+        console.log(`Color for ${category}:`, data[0].color);
+        return data ? data[0].color : null;
+    } catch (error) {
+        console.error(`Error fetching color for category ${category}:`, error);
+        // Return null or a default color to handle errors gracefully
+        return null;
+    }
 }
+
+
+
+
+
diff --git a/src/supabase/exhibits/queries.tsx b/src/supabase/exhibits/queries.tsx
index 7ce896d3..7277c03b 100644
--- a/src/supabase/exhibits/queries.tsx
+++ b/src/supabase/exhibits/queries.tsx
@@ -15,6 +15,8 @@ export async function fetchAllExhibits(): Promise<ExhibitRow[]> {
   return data;
 }
 
+
+
 /**
  * Fetches a single exhibit from the database.
  * @param exhibitId - The id of the exhibit to fetch.
@@ -36,25 +38,21 @@ export async function fetchExhibit(exhibitId: string): Promise<ExhibitRow> {
  * @param exhibitId - The id of the exhibit to fetch.
  * @returns A promise that resolves to a ExhibitRow object.
  */
-export async function fetchExhibitImage(
-  exhibitId: string,
-): Promise<{ image: string }> {
-  const { data, error } = await supabase
-    .from('exhibits')
-    .select('image')
-    .eq('id', exhibitId)
-    .single();
+export async function fetchExhibitImage(exhibitId: string): Promise<{ image: string }> {
+    const { data, error } = await supabase
+        .from('exhibits')
+        .select('image')
+        .eq('id', exhibitId)
+        .single();
 
-  if (error) {
-    throw new Error(error.message);
-  }
+    if (error) {
+        throw new Error(error.message);
+    }
 
-  // Provide a default image URL if the image is null
-  const imageUrl =
-    data?.image ??
-    'https://buffer.com/cdn-cgi/image/w=1000,fit=contain,q=90,f=auto/library/content/images/size/w1200/2023/10/free-images.jpg'; // Adjust the default image path as needed
+    // Provide a default image URL if the image is null
+    const imageUrl = data?.image ?? "https://buffer.com/cdn-cgi/image/w=1000,fit=contain,q=90,f=auto/library/content/images/size/w1200/2023/10/free-images.jpg"; // Adjust the default image path as needed
 
-  return { image: imageUrl };
+    return { image: imageUrl };
 }
 
 /**
@@ -62,9 +60,7 @@ export async function fetchExhibitImage(
  * @param exhibitData - The exhibit to insert.
  * @returns A promise that resolves to a ExhibitRow object.
  */
-export async function insertExhibit(
-  exhibitData: ExhibitRow,
-): Promise<ExhibitRow | null> {
+export async function insertExhibit(exhibitData: ExhibitRow): Promise<ExhibitRow | null> {
   const { data, error } = await supabase.from('exhibits').insert(exhibitData);
   if (error) {
     throw new Error(error.message);
@@ -78,7 +74,7 @@ export async function insertExhibit(
  * @returns A promise that resolves to a ExhibitRow object.
  */
 export async function updateExhibit(
-  newExhibitData: ExhibitRow,
+    newExhibitData: ExhibitRow,
 ): Promise<ExhibitRow | null> {
   const { data, error } = await supabase
     .from('exhibits')
@@ -95,9 +91,7 @@ export async function updateExhibit(
  * @param exhibitData - The exhibit to upsert.
  * @returns A promise that resolves to a ExhibitRow object.
  */
-export async function upsertTour(
-  exhibitData: ExhibitRow,
-): Promise<ExhibitRow | null> {
+export async function upsertTour(exhibitData: ExhibitRow): Promise<ExhibitRow | null> {
   const { data, error } = await supabase.from('exhibits').upsert(exhibitData);
   if (error) {
     throw new Error(error.message);
@@ -110,9 +104,7 @@ export async function upsertTour(
  * @param exhibitId - The id of the exhibit to delete.
  * @returns A promise that resolves to a ExhibitRow object.
  */
-export async function deleteExhibit(
-  exhibitId: string,
-): Promise<ExhibitRow | null> {
+export async function deleteExhibit(exhibitId: string): Promise<ExhibitRow | null> {
   const { data, error } = await supabase
     .from('exhibits')
     .delete()
diff --git a/src/supabase/media/queries.ts b/src/supabase/media/queries.ts
index 341c3354..891ba21e 100644
--- a/src/supabase/media/queries.ts
+++ b/src/supabase/media/queries.ts
@@ -34,8 +34,6 @@ export async function fetchImagesForDisplay(displayId: string | undefined) {
   return data;
 }
 
-
-
 /**
  *
  * @param tourId id of the tour to fetch images for 
diff --git a/src/supabase/tour_displays/queries.tsx b/src/supabase/tour_displays/queries.tsx
index 0fae2ea9..9f4eead4 100644
--- a/src/supabase/tour_displays/queries.tsx
+++ b/src/supabase/tour_displays/queries.tsx
@@ -48,6 +48,46 @@ export async function fetchDisplayfromSpotlight(spotlightId: string) {
   return displays;
 }
 
+/**
+ * @param spotlightId - a spotlight ID
+ * @returns given a spotlight ID, get all the ids of the spotlight recommendations for related spotlights
+ */
+export async function fetchRelatedSpotlightIdsFromSpotlight(
+  spotlightId: string,
+) {
+  const { data, error } = await supabase
+    .from('spotlight_recommendations')
+    .select('*')
+    .eq('source_display_id', spotlightId);
+
+  if (error) {
+    throw new Error(
+      `An error occurred while trying to read tour displays: ${error}`,
+    );
+  }
+  const relatedSpotlightIds = data.map(item => item.target_display_id);
+  return relatedSpotlightIds;
+}
+
+/**
+ * @param relatedSpotlightIds - list of all the spotlight ids that go under related spotlights
+ * @returns the spotlights that have the corresponding ids
+ */
+export async function fetchRelatedSpotlightsfromIds(
+  relatedSpotlightIds: string[],
+) {
+  const { data, error } = await supabase
+    .from('tours')
+    .select('*')
+    .in('id', relatedSpotlightIds);
+
+  if (error) {
+    throw new Error(`Error updating display data: ${error.message}`);
+  }
+
+  return data;
+}
+
 /**
  * Fetches all tour displays for a single tour from the database sorted by display_order.
  * @param tourId - The id of the tour to fetch.
@@ -65,4 +105,4 @@ export async function fetchTourDisplays(
   }
   data.sort((a, b) => (a?.display_order || 0) - (b?.display_order || 0));
   return data;
-}
+}
\ No newline at end of file
diff --git a/src/supabase/tours/queries.tsx b/src/supabase/tours/queries.tsx
index 0ac78dda..fc0574c8 100644
--- a/src/supabase/tours/queries.tsx
+++ b/src/supabase/tours/queries.tsx
@@ -16,54 +16,19 @@ export async function fetchAllTours(): Promise<TourRow[]> {
 }
 
 /**
- * Fetches all spotlights from the database.
- * @returns A promise that resolves to an array of TourRow objects, selected based on being spotlights
+ * @returns all spotlight tours from the tours table
  */
-export async function fetchAllSpotlights(): Promise<TourRow[]> {
+export async function fetchSpotlightTours(): Promise<TourRow[] | null> {
   const { data, error } = await supabase
     .from('tours')
     .select('*')
-    .eq('spotlight', true);
+    .is('spotlight', true);
   if (error) {
-    throw new Error(
-      `An error occurred while trying to read tour displays: ${error}`,
-    );
-  }
-  return data;
-}
-
-/**
- * @param spotlightId - a spotlight ID
- * @returns A promise that resolves to an array of TourRow objects, selected based on being spotlights
- *
- * given a spotlight ID, get all the objects of the related spotlights
- * TODO: Switching this function to be a database function
- */
-export async function fetchRecommendedSpotlights(spotlightId: string) {
-  const { data, error } = await supabase.rpc('fetch_recommended_spotlights', {
-    source_spotlight_id: spotlightId,
-  });
-  if (error) {
-    throw new Error(
-      `An error occurred while trying to read tour displays: ${error}`,
-    );
+    throw new Error(`Error fetching spotlight tours: ${error.message}`);
   }
   return data;
 }
 
-/**
- * Queries all of the spotlights, then queries their join tables to retrieve the media associated with each of them.
- *  @returns A promise that resolves to an array of TourRow objects, selected based on being spotlights
- */
-export async function joinAllSpotlightsWithMedia() {
-  const { data, error } = await supabase.rpc('join_all_spotlights_with_media');
-  if (error) {
-    throw new Error(
-      `An error occurred while trying to read tour displays: ${error}`,
-    );
-  }
-  return data;
-}
 /**
  * Fetches a single tour from the database.
  * @param tourId - The id of the tour to fetch.
@@ -128,8 +93,35 @@ export async function upsertTour(tourData: TourRow): Promise<TourRow | null> {
   return newTour;
 }
 
+// Delete a tour
 /**
- * @returns A promise that resolves to an array of TourRow objects,
+ * @param id
+ */
+export async function deleteTour(id: number) {
+  const { data, error } = await supabase.from('tours').delete().eq('id', id);
+  if (error) {
+    throw new Error(error.message);
+  }
+  return data;
+}
+
+/**
+ * !!! WIP !!!
+ * @returns - Uses rpc to call Database function of the same name on Supabase.
+ * Used to call a join on a tour and the media table, in order to retrieve its cover image + the rest of the tour info.
+ */
+export async function joinSpotlightsWithMedia() {
+  const { data, error } = await supabase.rpc('join_spotlights_with_media');
+  if (error) {
+    throw new Error(
+      `An error occurred while trying to load spotlights: ${error.message}`,
+    );
+  }
+  return data;
+}
+
+/**
+ *
  */
 export async function joinToursWithMedia() {
   const { data, error } = await supabase.rpc('join_tours_with_media');
@@ -139,4 +131,4 @@ export async function joinToursWithMedia() {
     );
   }
   return data;
-}
+}
\ No newline at end of file
diff --git a/src/types/supabase.ts b/src/types/supabase.ts
index 3d2d2ff7..a17849f5 100644
--- a/src/types/supabase.ts
+++ b/src/types/supabase.ts
@@ -11,25 +11,25 @@ export type Database = {
     Tables: {
       categories: {
         Row: {
-          category: string | null;
-          color_hex: string;
-          created_at: string;
-          id: number;
-        };
+          category: string | null
+          color: string | null
+          created_at: string
+          id: number
+        }
         Insert: {
-          category?: string | null;
-          color_hex: string;
-          created_at?: string;
-          id?: number;
-        };
+          category?: string | null
+          color?: string | null
+          created_at?: string
+          id?: number
+        }
         Update: {
-          category?: string | null;
-          color_hex?: string;
-          created_at?: string;
-          id?: number;
-        };
-        Relationships: [];
-      };
+          category?: string | null
+          color?: string | null
+          created_at?: string
+          id?: number
+        }
+        Relationships: []
+      }
       display_media: {
         Row: {
           display_id: string;
@@ -69,7 +69,6 @@ export type Database = {
           created_at: string;
           description: string;
           id: string;
-          summary: string | null;
           title: string;
           updated_at: string | null;
         };
@@ -78,7 +77,6 @@ export type Database = {
           created_at?: string;
           description?: string;
           id: string;
-          summary?: string | null;
           title?: string;
           updated_at?: string | null;
         };
@@ -87,51 +85,11 @@ export type Database = {
           created_at?: string;
           description?: string;
           id?: string;
-          summary?: string | null;
           title?: string;
           updated_at?: string | null;
         };
         Relationships: [];
       };
-      emails: {
-        Row: {
-          emails: string | null;
-          id: number;
-        };
-        Insert: {
-          emails?: string | null;
-          id?: number;
-        };
-        Update: {
-          emails?: string | null;
-          id?: number;
-        };
-        Relationships: [];
-      };
-      exhibits: {
-        Row: {
-          coordinates: Json | null;
-          description: string;
-          id: string;
-          image: string | null;
-          title: string;
-        };
-        Insert: {
-          coordinates?: Json | null;
-          description: string;
-          id?: string;
-          image?: string | null;
-          title: string;
-        };
-        Update: {
-          coordinates?: Json | null;
-          description?: string;
-          id?: string;
-          image?: string | null;
-          title?: string;
-        };
-        Relationships: [];
-      };
       media: {
         Row: {
           created_at: string;
@@ -159,30 +117,6 @@ export type Database = {
         };
         Relationships: [];
       };
-      news: {
-        Row: {
-          content_link: string;
-          created_at: string;
-          id: string;
-          title: string;
-          updated_at: string | null;
-        };
-        Insert: {
-          content_link: string;
-          created_at?: string;
-          id?: string;
-          title: string;
-          updated_at?: string | null;
-        };
-        Update: {
-          content_link?: string;
-          created_at?: string;
-          id?: string;
-          title?: string;
-          updated_at?: string | null;
-        };
-        Relationships: [];
-      };
       spotlight_recommendations: {
         Row: {
           source_display_id: string;
@@ -278,95 +212,133 @@ export type Database = {
       };
       tours: {
         Row: {
-          category: Database['public']['Enums']['tour_category'];
-          coordinates: Json | null;
+          category: Database["public"]["Enums"]["tour_category"]
+          coordinates: Json | null
           created_at: string;
           description: string | null;
           id: string;
-          name: string;
-          preview_text: string | null;
+          name: string | null;
+          preview_text: string | null
           spotlight: boolean;
           stop_count: number | null;
         };
         Insert: {
-          category?: Database['public']['Enums']['tour_category'];
-          coordinates?: Json | null;
           created_at?: string;
           description?: string | null;
           id?: string;
-          name: string;
-          preview_text?: string | null;
+          name?: string | null;
           spotlight?: boolean;
           stop_count?: number | null;
         };
         Update: {
-          category?: Database['public']['Enums']['tour_category'];
-          coordinates?: Json | null;
           created_at?: string;
           description?: string | null;
           id?: string;
-          name?: string;
-          preview_text?: string | null;
+          name?: string | null;
           spotlight?: boolean;
           stop_count?: number | null;
         };
         Relationships: [];
       };
+      news: {
+        Row: {
+          content_link: string;
+          created_at: string;
+          id: string;
+          title: string;
+          updated_at: string | null;
+        };
+        Insert: {
+          content_link?: string;
+          category?: Database["public"]["Enums"]["tour_category"]
+          coordinates?: Json | null
+          created_at?: string;
+          id?: string;
+          title?: string;
+          preview_text?: string | null
+          updated_at?: string | null;
+        };
+        Update: {
+          content_link?: string;
+          category?: Database["public"]["Enums"]["tour_category"]
+          coordinates?: Json | null
+          created_at?: string;
+          id?: string;
+          title?: string;
+          preview_text?: string | null
+          updated_at?: string | null;
+        };
+        Relationships: [];
+      };
     };
     Views: {
       [_ in never]: never;
     };
     Functions: {
-      fetch_recommended_spotlights: {
-        Args: {
-          source_spotlight_id: string;
-        };
-        Returns: {
-          id: string;
-          name: string;
-          description: string;
-          created_at: string;
-          stop_count: number;
-          spotlight: boolean;
-          preview_text: string;
-          coordinates: Json;
-          category: Database['public']['Enums']['tour_category'];
-        }[];
-      };
       fetchimagesfordisplay: {
         Args: {
-          displayid: string;
-        };
+          displayid: string
+        }
         Returns: {
-          id: string;
-          url: string;
-          type: string;
-          title: string;
-          text: string;
-          created_at: string;
-        }[];
-      };
+          id: string
+          url: string
+          type: string
+          title: string
+          text: string
+          created_at: string
+        }[]
+      }
       fetchimagesfortour: {
         Args: {
-          tourid: string;
-        };
+          tourid: string
+        }
         Returns: {
-          id: string;
-          url: string;
-          type: string;
-          title: string;
-          text: string;
-          created_at: string;
-        }[];
-      };
+          id: string
+          url: string
+          type: string
+          title: string
+          text: string
+          created_at: string
+        }[]
+      }
       get_category_color: {
         Args: {
-          category_in: string;
-        };
-        Returns: string;
-      };
-      join_all_spotlights_with_media: {
-        Args: Record<PropertyKey, never>;
+          category_in: string
+        }
+        Returns: string
+      }
+      get_spotlight_recommendations: {
+        Args: {
+          source_display_id: string
+        }
+        Returns: {
+          id: string
+          name: string
+          description: string
+          created_at: string
+          stop_count: number
+          spotlight: boolean
+          preview_text: string
+          coordinates: Json
+          category: Database["public"]["Enums"]["tour_category"]
+        }[]
+      }
+      get_spotlight_tours: {
+        Args: Record<PropertyKey, never>
+        Returns: {
+          id: string
+          name: string
+          description: string
+          created_at: string
+          stop_count: number
+          spotlight: boolean
+          preview_text: string
+          coordinates: Json
+          category: Database["public"]["Enums"]["tour_category"]
+        }[]
+      }
+      join_spotlights_with_media: {
+        Args: Record<PropertyKey, never>
         Returns: {
           id: string;
           name: string;
@@ -374,117 +346,115 @@ export type Database = {
           created_at: string;
           stop_count: number;
           spotlight: boolean;
-          preview_text: string;
-          coordinates: Json;
-          category: Database['public']['Enums']['tour_category'];
+          preview_text: string
           media_url: string;
         }[];
       };
       join_tours_with_media: {
-        Args: Record<PropertyKey, never>;
+        Args: Record<PropertyKey, never>
         Returns: {
-          id: string;
-          name: string;
-          description: string;
-          created_at: string;
-          stop_count: number;
-          spotlight: boolean;
-          preview_text: string;
-          url: string;
-        }[];
-      };
+          id: string
+          name: string
+          description: string
+          created_at: string
+          stop_count: number
+          spotlight: boolean
+          preview_text: string
+          url: string
+        }[]
+      }
     };
     Enums: {
       media_type: 'image' | 'video' | 'link';
       tour_category:
-        | 'BuildingsAndServices'
-        | 'ParksAviariesEnclosures'
-        | 'SiteFeatures';
+        | "BuildingsAndServices"
+        | "ParksAviariesEnclosures"
+        | "SiteFeatures"
     };
     CompositeTypes: {
       [_ in never]: never;
     };
   };
-};
+}
 
-type PublicSchema = Database[Extract<keyof Database, 'public'>];
+type PublicSchema = Database[Extract<keyof Database, "public">]
 
 export type Tables<
   PublicTableNameOrOptions extends
-    | keyof (PublicSchema['Tables'] & PublicSchema['Views'])
+    | keyof (PublicSchema["Tables"] & PublicSchema["Views"])
     | { schema: keyof Database },
   TableName extends PublicTableNameOrOptions extends { schema: keyof Database }
-    ? keyof (Database[PublicTableNameOrOptions['schema']]['Tables'] &
-        Database[PublicTableNameOrOptions['schema']]['Views'])
+    ? keyof (Database[PublicTableNameOrOptions["schema"]]["Tables"] &
+        Database[PublicTableNameOrOptions["schema"]]["Views"])
     : never = never,
 > = PublicTableNameOrOptions extends { schema: keyof Database }
-  ? (Database[PublicTableNameOrOptions['schema']]['Tables'] &
-      Database[PublicTableNameOrOptions['schema']]['Views'])[TableName] extends {
-      Row: infer R;
+  ? (Database[PublicTableNameOrOptions["schema"]]["Tables"] &
+      Database[PublicTableNameOrOptions["schema"]]["Views"])[TableName] extends {
+      Row: infer R
     }
     ? R
     : never
-  : PublicTableNameOrOptions extends keyof (PublicSchema['Tables'] &
-      PublicSchema['Views'])
-  ? (PublicSchema['Tables'] &
-      PublicSchema['Views'])[PublicTableNameOrOptions] extends {
-      Row: infer R;
-    }
-    ? R
+  : PublicTableNameOrOptions extends keyof (PublicSchema["Tables"] &
+        PublicSchema["Views"])
+    ? (PublicSchema["Tables"] &
+        PublicSchema["Views"])[PublicTableNameOrOptions] extends {
+        Row: infer R
+      }
+      ? R
+      : never
     : never
-  : never;
 
 export type TablesInsert<
   PublicTableNameOrOptions extends
-    | keyof PublicSchema['Tables']
+    | keyof PublicSchema["Tables"]
     | { schema: keyof Database },
   TableName extends PublicTableNameOrOptions extends { schema: keyof Database }
-    ? keyof Database[PublicTableNameOrOptions['schema']]['Tables']
+    ? keyof Database[PublicTableNameOrOptions["schema"]]["Tables"]
     : never = never,
 > = PublicTableNameOrOptions extends { schema: keyof Database }
-  ? Database[PublicTableNameOrOptions['schema']]['Tables'][TableName] extends {
-      Insert: infer I;
+  ? Database[PublicTableNameOrOptions["schema"]]["Tables"][TableName] extends {
+      Insert: infer I
     }
     ? I
     : never
-  : PublicTableNameOrOptions extends keyof PublicSchema['Tables']
-  ? PublicSchema['Tables'][PublicTableNameOrOptions] extends {
-      Insert: infer I;
-    }
-    ? I
+  : PublicTableNameOrOptions extends keyof PublicSchema["Tables"]
+    ? PublicSchema["Tables"][PublicTableNameOrOptions] extends {
+        Insert: infer I
+      }
+      ? I
+      : never
     : never
-  : never;
 
 export type TablesUpdate<
   PublicTableNameOrOptions extends
-    | keyof PublicSchema['Tables']
+    | keyof PublicSchema["Tables"]
     | { schema: keyof Database },
   TableName extends PublicTableNameOrOptions extends { schema: keyof Database }
-    ? keyof Database[PublicTableNameOrOptions['schema']]['Tables']
+    ? keyof Database[PublicTableNameOrOptions["schema"]]["Tables"]
     : never = never,
 > = PublicTableNameOrOptions extends { schema: keyof Database }
-  ? Database[PublicTableNameOrOptions['schema']]['Tables'][TableName] extends {
-      Update: infer U;
+  ? Database[PublicTableNameOrOptions["schema"]]["Tables"][TableName] extends {
+      Update: infer U
     }
     ? U
     : never
-  : PublicTableNameOrOptions extends keyof PublicSchema['Tables']
-  ? PublicSchema['Tables'][PublicTableNameOrOptions] extends {
-      Update: infer U;
-    }
-    ? U
+  : PublicTableNameOrOptions extends keyof PublicSchema["Tables"]
+    ? PublicSchema["Tables"][PublicTableNameOrOptions] extends {
+        Update: infer U
+      }
+      ? U
+      : never
     : never
-  : never;
 
 export type Enums<
   PublicEnumNameOrOptions extends
-    | keyof PublicSchema['Enums']
+    | keyof PublicSchema["Enums"]
     | { schema: keyof Database },
   EnumName extends PublicEnumNameOrOptions extends { schema: keyof Database }
-    ? keyof Database[PublicEnumNameOrOptions['schema']]['Enums']
+    ? keyof Database[PublicEnumNameOrOptions["schema"]]["Enums"]
     : never = never,
 > = PublicEnumNameOrOptions extends { schema: keyof Database }
-  ? Database[PublicEnumNameOrOptions['schema']]['Enums'][EnumName]
-  : PublicEnumNameOrOptions extends keyof PublicSchema['Enums']
-  ? PublicSchema['Enums'][PublicEnumNameOrOptions]
-  : never;
+  ? Database[PublicEnumNameOrOptions["schema"]]["Enums"][EnumName]
+  : PublicEnumNameOrOptions extends keyof PublicSchema["Enums"]
+    ? PublicSchema["Enums"][PublicEnumNameOrOptions]
+    : never
diff --git a/src/types/types.ts b/src/types/types.ts
index 4be9f38f..48367c69 100644
--- a/src/types/types.ts
+++ b/src/types/types.ts
@@ -12,11 +12,10 @@ export type TourDisplaysRow =
   Database['public']['Tables']['tour_displays']['Row'];
 export type TourMediaRow = Database['public']['Tables']['tour_media']['Row'];
 export type TourRow = Database['public']['Tables']['tours']['Row'];
+export type SpotlightWithMediaRow = TourRow & { media_url: string };
 export type NewsRow = Database['public']['Tables']['news']['Row'];
 export type ExhibitRow = Database['public']['Tables']['exhibits']['Row'];
 export type SpotlightRow = {
   tour_row: TourRow;
   url: string;
 };
-export type SpotlightWithMediaRow = TourRow & { media_url: string };
-export type ToursWithMediaRow = TourRow & { media_url: string };

From 027bea85717a6295234480945f53f5cffab4265d Mon Sep 17 00:00:00 2001
From: Noah Hernandez <63211322+oahnh@users.noreply.github.com>
Date: Tue, 9 Apr 2024 15:04:33 -0700
Subject: [PATCH 05/21] cont. rebase

---
 src/app/layout.tsx                            |  13 +-
 src/app/siteMapPage/page.tsx                  |  11 +-
 .../FilterButton/FilterButton.tsx             |   6 +-
 .../SiteMap/DisplayPreviewCard.tsx            |  13 +-
 .../SiteMap/ExhibitPreviewCard.tsx            | 143 ++++++++
 .../userComponents/SiteMap/SiteMap.tsx        | 103 ++++--
 .../SiteMap/TourPreviewCard.tsx               | 140 ++++++++
 src/supabase/category/queries.tsx             |  48 +--
 src/supabase/media/queries.ts                 |   2 +
 src/types/supabase.ts                         | 340 ++++++++++--------
 10 files changed, 597 insertions(+), 222 deletions(-)
 create mode 100644 src/components/userComponents/SiteMap/ExhibitPreviewCard.tsx
 create mode 100644 src/components/userComponents/SiteMap/TourPreviewCard.tsx

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 15472c8a..1b0d3069 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -36,12 +36,13 @@ 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/leaflet@1.9.4/dist/leaflet.js"
           integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
diff --git a/src/app/siteMapPage/page.tsx b/src/app/siteMapPage/page.tsx
index bfc66d5a..53f27783 100644
--- a/src/app/siteMapPage/page.tsx
+++ b/src/app/siteMapPage/page.tsx
@@ -19,6 +19,8 @@ const SiteMap = dynamic(
 );
 type ModeState = 'tours' | 'exhibits';
 
+
+
 /**
  * @returns Page for the interactive map
  */
@@ -38,11 +40,13 @@ function MapPage() {
   };
 
   const renderFilterContainer = () => (
-    <div className="mb-6 w-full pl-0 pr-0 ">
-      <div className='pt-9 pr-2 pl-2'>
+    <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 => (
            
@@ -53,6 +57,7 @@ function MapPage() {
             isSelected={selectedMap === text}/>
           
           ))}
+ 
       </div>
     </div>
   );
diff --git a/src/components/userComponents/FilterButton/FilterButton.tsx b/src/components/userComponents/FilterButton/FilterButton.tsx
index ae198587..194e2674 100644
--- a/src/components/userComponents/FilterButton/FilterButton.tsx
+++ b/src/components/userComponents/FilterButton/FilterButton.tsx
@@ -26,9 +26,10 @@ interface FilterButtonProps {
  *
  */
 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-[0.8px] border-scary-forest border-solid text-night flex-grow ${
+  const buttonClass = `py-2 px-6 whitespace-nowrap border-solid text-scary-forest flex-grow font-lato text-base font-medium  ${
     isSelected ? selectedStyle : ''
   }`;
 
@@ -37,6 +38,7 @@ function FilterButton({ content, onClick, isSelected }: FilterButtonProps) {
       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
index ed2d166e..823247ca 100644
--- a/src/components/userComponents/SiteMap/DisplayPreviewCard.tsx
+++ b/src/components/userComponents/SiteMap/DisplayPreviewCard.tsx
@@ -32,6 +32,7 @@ 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
 
@@ -53,20 +54,22 @@ function DisplayPreviewCard({
       let imageUrl = ''; 
       let displayName = ''; 
   
-      if ('name' in tour) { 
+      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; 
         }
         displayName = tour.name; 
+        setTourType('tour');
       } else {
         // Handle as an ExhibitRow
         const imageObj = await fetchExhibitImage(tour.id); 
         if (imageObj) {
           imageUrl = imageObj.image; 
         }
-        displayName = tour.title; 
+        displayName = tour.title;
+        setTourType('exhibit'); 
       }
   
       // Set state variables
@@ -76,7 +79,7 @@ function DisplayPreviewCard({
     };
   
     fetchDetails();
-  }, [tour]);
+  }, [tour]); 
   
 
   /** route this to spotlights */
@@ -112,8 +115,8 @@ function DisplayPreviewCard({
           >
             <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
+                  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" strokeWidth="1.11692" strokeLinecap="round" strokeLinejoin="round"/>
diff --git a/src/components/userComponents/SiteMap/ExhibitPreviewCard.tsx b/src/components/userComponents/SiteMap/ExhibitPreviewCard.tsx
new file mode 100644
index 00000000..3e34511e
--- /dev/null
+++ b/src/components/userComponents/SiteMap/ExhibitPreviewCard.tsx
@@ -0,0 +1,143 @@
+import React, { useEffect, useState } from 'react';
+import { LatLngExpression } from 'leaflet';
+import { useMapEvents } from 'react-leaflet';
+import Link from 'next/link';
+import Image from 'next/image';
+import { ExhibitRow } from '../../../types/types';
+
+import { fetchExhibitImage } from '../../../supabase/exhibits/queries';
+
+interface ExhibitCardProps {
+  tour: ExhibitRow;
+  handleClose: () => void;
+  handleClick?: () => void;
+}
+
+/**
+ * @param ExhibitCardProps.display display to preview
+ * @param ExhibitCardProps.handleClick function to handle actions when clicked
+ * @param ExhibitCardProps.handleClose function to handle closing of preview card
+ * @param ExhibitCardProps.display.display
+ * @param ExhibitCardProps.display.handleClick
+ * @param ExhibitCardProps.display.handleClose
+ * @param ExhibitCardProps.display.tour
+ * @returns preview card component to display within leaflet map container
+ */
+function ExhibitPreviewCard({
+  tour,
+  handleClick,
+  handleClose,
+}: ExhibitCardProps) {
+  const [loading, setLoading] = useState<boolean>(false);
+  const [previewImage, setPreviewImage] = useState<string>('');
+  const [name1, setname1] = useState<string>('');
+
+  const { id, description, coordinates, category } = tour;
+  // name, for tour title for exhibit
+
+  // Map Context
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const map = useMapEvents({
+    click: e => {
+      if (!e.latlng.equals(coordinates as LatLngExpression)) {
+        handleClose();
+      }
+    },
+  });
+
+  // fetch image to use for preview
+  useEffect(() => {
+    const fetchDetails = async () => {
+      setLoading(true);
+  
+      let imageUrl = ''; 
+      let displayName = ''; 
+  
+
+    const imageObj = await fetchExhibitImage(tour.id); 
+    if (imageObj) {
+        imageUrl = imageObj.image; 
+    }
+    displayName = tour.title;
+
+      
+  
+      // Set state variables
+      setPreviewImage(imageUrl);
+      setname1(displayName);
+      setLoading(false);
+    };
+  
+    fetchDetails();
+  }, [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="relative w-[5.8125rem] z-10 h-full shrink-0 rounded-tl-md rounded-tr-none rounded-br-none rounded-bl-md">
+           
+            <Image
+            
+              src={previewImage}
+              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(); //  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" strokeWidth="1.11692" strokeLinecap="round" strokeLinejoin="round"/>
+                  </svg>
+                </div>
+              <Link href={`/spotlightPage/${id}`}>
+              <h3
+                className="relative truncate font-medium font-lato text-night pr-[0.31rem] pl-[0.75rem] pt-[0rem] 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>
+              <h6 className='relative pt-[0.2rem] pr-[1rem] text-silver font-lato text-xs text-right'>
+                Go to exhibit `&gt;` 
+                </h6>
+              </Link>
+              
+          
+            </div>
+            {/* <div>
+                <h6>Go to exhibit > </h6>
+            </div> */}
+          </div>
+        </div>
+      </div>
+
+
+  );
+}
+
+export default ExhibitPreviewCard;
diff --git a/src/components/userComponents/SiteMap/SiteMap.tsx b/src/components/userComponents/SiteMap/SiteMap.tsx
index e1938064..7cc46158 100644
--- a/src/components/userComponents/SiteMap/SiteMap.tsx
+++ b/src/components/userComponents/SiteMap/SiteMap.tsx
@@ -7,18 +7,16 @@ import { renderToStaticMarkup } from 'react-dom/server';
 import { fetchSpotlightTours } from '../../../supabase/tours/queries';
 import { ExhibitRow, TourRow } from '../../../types/types';
 import Control from './Control';
-import DisplayPreviewCard from './DisplayPreviewCard';
-import { fetchExhibit, fetchAllExhibits } from '../../../supabase/exhibits/queries';
+import { fetchAllExhibits } from '../../../supabase/exhibits/queries';
 import { getCategoryColor1 } from '../../../supabase/category/queries';
 import RecenterMap from './MapInteractionHandler';
 import { DefaultMarkerIcon, SelectedMarkerIcon } from '../../../../public/icons';
 
 const center: LatLngExpression = {
-  lat: 37.587480,
-  lng: -122.331010,
+  lat: 37.58748,
+  lng: -122.33101,
 };
 
-
 const tileLayer: { attribution: string; url: string } = {
   attribution: '',
   url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
@@ -28,7 +26,7 @@ const createDefaultMarkerIcon = (color: string) =>
   L.divIcon({
     html: renderToStaticMarkup(<DefaultMarkerIcon color={color} />),
     className: 'default-icon',
-    iconSize: [20, 20], 
+    iconSize: [20, 20],
   });
 
 const createSelectedMarkerIcon = (color: string) =>
@@ -38,7 +36,6 @@ const createSelectedMarkerIcon = (color: string) =>
     iconSize: [41, 40],
   });
 
-
 interface SiteMapProps {
   mode: 'tours' | 'exhibits';
 }
@@ -50,14 +47,16 @@ interface SiteMapProps {
  * @returns Interactive map based on React Leaflet, holds the markers which lead to exhibits
  */
 function SiteMap({ mode }: SiteMapProps) {
-  const [spotlightTours, setSpotlightTours] = useState<TourRow[] | ExhibitRow[] | null>(null);
+  const [spotlightTours, setSpotlightTours] = useState<
+    TourRow[] | ExhibitRow[] | null
+  >(null);
   const [colorsMap, setColorsMap] = useState<{ [key: string]: string }>({});
   const [selectedTour, setSelectedTour] = useState<TourRow | ExhibitRow | null>(
     null,
   );
   const [mapCenter, setMapCenter] = useState<LatLngExpression>(center);
   const [selectedMarker, setSelectedMarker] = useState<number | null>(null);
-  const [resetCenter, setResetCenter] = useState(center); // New state to trigger recentering
+  // const [resetCenter, setResetCenter] = useState(center); // New state to trigger recentering
 
   // fetch tours where spotlight == True
   useEffect(() => {
@@ -67,24 +66,45 @@ function SiteMap({ mode }: SiteMapProps) {
     async function fetchData() {
       try {
         let data;
-        if (mode === "tours") {
+        if (mode === 'tours') {
           data = await fetchSpotlightTours();
-        } else if (mode === "exhibits") {
+        } else if (mode === 'exhibits') {
           data = await fetchAllExhibits();
         }
-        if (data) {
-          const colors = await Promise.all(data.map(async (item) => ({
-            id: item.id,
-            color: await getCategoryColor1(item.category)
-            
-          })));
-          const newColorsMap = colors.reduce((acc, curr) => ({
-            
-            ...acc,
-            [curr.id]: curr.color
-          }), {});
+        if (data && mode === 'tours') {
+          const colors = await Promise.all(
+            data.map(async item => ({
+              id: item.id,
+              color: await getCategoryColor1(item.category),
+            })),
+          );
+          const newColorsMap = colors.reduce(
+            (acc, curr) => ({
+              ...acc,
+              [curr.id]: curr.color,
+            }),
+            {},
+          );
+          setColorsMap(newColorsMap);
+
+          console.log('Colors Map:', newColorsMap); // Log here
+        } else if (data && mode === 'exhibits') {
+          const colors = await Promise.all(
+            data.map(async item => ({
+              id: item.id,
+              color: await getCategoryColor1(item.title),
+            })),
+          );
+          const newColorsMap = colors.reduce(
+            (acc, curr) => ({
+              ...acc,
+              [curr.id]: curr.color,
+            }),
+            {},
+          );
           setColorsMap(newColorsMap);
-          console.log("Colors Map:", newColorsMap); // Log here
+
+          console.log('Colors Map:', newColorsMap); // Log here
         }
         setSpotlightTours(data ?? []);
       } catch (error) {
@@ -105,7 +125,10 @@ function SiteMap({ mode }: SiteMapProps) {
     }
   }, [selectedTour]);
 
-  const handleMarkerSelect = (tour: TourRow | ExhibitRow, markerIndex: number) => {
+  const handleMarkerSelect = (
+    tour: TourRow | ExhibitRow,
+    markerIndex: number,
+  ) => {
     setSelectedTour(tour);
     setSelectedMarker(markerIndex);
     setMapCenter(tour.coordinates as LatLngExpression);
@@ -113,7 +136,6 @@ function SiteMap({ mode }: SiteMapProps) {
 
   const handlePreviewClose = () => {
     setSelectedTour(null);
-    setResetCenter(center); // Trigger recentering
   };
 
   return (
@@ -127,13 +149,14 @@ function SiteMap({ mode }: SiteMapProps) {
         width: '100%',
         minHeight: '544px',
         zIndex: '10',
+        marginBottom: '25px',
       }}
       key={new Date().getTime()}
     >
       <TileLayer {...tileLayer} />
       <LayersControl position="topright">
-       
-        {spotlightTours && spotlightTours.map((tour, i) => {
+        {spotlightTours &&
+          spotlightTours.map((tour, i) => {
             // Fetch the color for this tour/exhibit; fallback to a default color if not found
             const color = colorsMap[tour.id] || '#F17373'; // Fallback color
             return (
@@ -144,21 +167,39 @@ function SiteMap({ mode }: SiteMapProps) {
                   lng: (tour.coordinates as { lng: number })?.lng ?? 0,
                 }}
                 eventHandlers={{ click: () => handleMarkerSelect(tour, i) }}
-                
-                icon={(selectedMarker === i ? createSelectedMarkerIcon(color) : createDefaultMarkerIcon(color))}
+                icon={
+                  selectedMarker === i
+                    ? createSelectedMarkerIcon(color)
+                    : createDefaultMarkerIcon(color)
+                }
               />
             );
           })}
-        {selectedTour && (
+        {/* {selectedTour && (
           <Control position="bottomright">
             <DisplayPreviewCard
               tour={selectedTour}
               handleClose={handlePreviewClose}
             />
           </Control>
+        )} */}
+        {selectedTour && (
+          <Control position="bottomright">
+            {mode === 'tours' ? (
+              <TourPreviewCard
+                tour={selectedTour as TourRow} // Assuming you have proper type checks or type casting
+                handleClose={handlePreviewClose}
+              />
+            ) : (
+              <ExhibitPreviewCard
+                tour={selectedTour as ExhibitRow} // Assuming you have proper type checks or type casting
+                handleClose={handlePreviewClose}
+              />
+            )}
+          </Control>
         )}
       </LayersControl>
-      {selectedTour == null && <RecenterMap center={center} />} 
+      {selectedTour == null && <RecenterMap center={center} />}
     </MapContainer>
   );
 }
diff --git a/src/components/userComponents/SiteMap/TourPreviewCard.tsx b/src/components/userComponents/SiteMap/TourPreviewCard.tsx
new file mode 100644
index 00000000..e495fed3
--- /dev/null
+++ b/src/components/userComponents/SiteMap/TourPreviewCard.tsx
@@ -0,0 +1,140 @@
+import React, { useEffect, useState } from 'react';
+import { LatLngExpression } from 'leaflet';
+import { useMapEvents } from 'react-leaflet';
+import Link from 'next/link';
+import Image from 'next/image';
+import { TourRow } from '../../../types/types';
+import { fetchImagesForTour } from '../../../supabase/media/queries';
+// import { fetchExhibitImage } from '../../../supabase/exhibits/queries';
+
+interface TourCardProps {
+  tour: TourRow;
+  handleClose: () => void;
+  handleClick?: () => void;
+}
+
+/**
+ * @param TourCardProps.display display to preview
+ * @param TourCardProps.handleClick function to handle actions when clicked
+ * @param TourCardProps.handleClose function to handle closing of preview card
+ * @param TourCardProps.display.display
+ * @param TourCardProps.display.handleClick
+ * @param TourCardProps.display.handleClose
+ * @param TourCardProps.display.tour
+ * @returns preview card component to display within leaflet map container
+ */
+function TourPreviewCard({
+  tour,
+  handleClick,
+  handleClose,
+}: TourCardProps) {
+  const [loading, setLoading] = useState<boolean>(false);
+  const [previewImage, setPreviewImage] = useState<string>('');
+  const [name1, setname1] = useState<string>('');
+  
+  const { id, description, coordinates, category } = tour;
+  // name, for tour title for exhibit
+
+  // Map Context
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const map = useMapEvents({
+    click: e => {
+      if (!e.latlng.equals(coordinates as LatLngExpression)) {
+        handleClose();
+      }
+    },
+  });
+
+  // fetch image to use for preview
+  useEffect(() => {
+    const fetchDetails = async () => {
+      setLoading(true);
+  
+      let imageUrl = ''; 
+      let displayName = ''; 
+  
+    // Fetch images for a tour
+    const images = await fetchImagesForTour(tour.id);
+    if (images && images.length > 0) {
+        imageUrl = images[0].url; 
+    }
+    displayName = tour.name; 
+    // Set state variables
+    setPreviewImage(imageUrl);
+    setname1(displayName);
+    setLoading(false);
+    };
+  
+    fetchDetails();
+  }, [tour]); 
+  
+
+  /** route this to spotlights */
+
+  return (
+      <div className="flex flex-col items-center justify-center w-[25rem] h-[7.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-[5.8125rem] z-10 h-full shrink-0 rounded-tl-md rounded-tr-none rounded-br-none rounded-bl-md">
+           
+            <Image
+            
+              src={previewImage}
+              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-[0.5rem]" 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}`}>
+                <div className=' pl-[0.75rem] pr-[9.87] pt-[0rem] font-lato text-xs text-shadow bg-[#F173731A]  rounded-lg w-[8rem]'>
+                    {category}
+                </div>
+
+              <h3
+                className="relative truncate font-medium font-lato text-night pr-[0.31rem] pl-[0.75rem] pt-[0.3rem] 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>
+              <h6 className='relative pt-[0.2rem] pr-[1rem] pb-[0.4rem] text-silver font-lato text-xs text-right'>
+                Go to virtual tour > 
+                </h6>
+              </Link>
+            </div>
+          </div>
+        </div>
+      </div>
+
+
+  );
+}
+
+export default TourPreviewCard;
diff --git a/src/supabase/category/queries.tsx b/src/supabase/category/queries.tsx
index fe10ca19..c96420a4 100644
--- a/src/supabase/category/queries.tsx
+++ b/src/supabase/category/queries.tsx
@@ -1,24 +1,12 @@
 'use client';
 
-import { DisplayRow } from '../../types/types';
+import { DisplayRow, ExhibitRow } from '../../types/types';
 import supabase from '../client';
 
-// eslint-disable-next-line jsdoc/require-returns
 /**
  *
  * @param category_in
  */
-// eslint-disable-next-line import/prefer-default-export, camelcase
-// export async function get_category_color(category_in: string) {
-//     const { data, error } = await supabase.rpc('get_category_color', { category_in });
-//     if (error) {
-//       // Log the error message for debugging
-//       console.error(`An error occurred trying to generate color: ${error.message}`);
-//       // Throw a new error with the message for further handling
-//       throw new Error(`An error occurred trying to generate color: ${error.message}`);
-//     }
-//     return data;
-// }
 // Assume this function is in `supabase/category/queries.js`
 /**
  *
@@ -27,27 +15,25 @@ import supabase from '../client';
 export async function getCategoryColor1(category: string) {
     try {
         const { data, error } = await supabase
-            .from('categories') // Adjust according to your actual table name
-            .select('color')
-            .eq('category', category); // Use this if you're sure there's only one entry per category
+            .from('categories') 
+            .select('color_hex')
+            .eq('category', category); 
 
         if (error) {
-            throw new Error(error.message);
+            console.error("Error fetching from Supabase:", error.message);
+            return null; // Return null on query error
         }
 
-        // Assuming 'color' is the column you want and each category has a unique color.
-        // 'data' would be the object containing 'color', so we return data.color.
-        // Check if 'data' exists to avoid accessing property 'color' of null.
-        console.log(`Color for ${category}:`, data[0].color);
-        return data ? data[0].color : null;
+        // Check if data array is not empty
+        if (data && data.length > 0 && data[0].color_hex) {
+            console.log(`Color for ${category}:`, data[0].color_hex);
+            return data[0].color_hex;
+        } else {
+            console.log("No matching category found or color_hex is undefined");
+            return null; // Return null if no matching data found
+        }
     } catch (error) {
-        console.error(`Error fetching color for category ${category}:`, error);
-        // Return null or a default color to handle errors gracefully
-        return null;
+        console.error(`An unexpected error occurred:`, error);
+        return null; // Return null on unexpected error
     }
-}
-
-
-
-
-
+}
\ No newline at end of file
diff --git a/src/supabase/media/queries.ts b/src/supabase/media/queries.ts
index 891ba21e..341c3354 100644
--- a/src/supabase/media/queries.ts
+++ b/src/supabase/media/queries.ts
@@ -34,6 +34,8 @@ export async function fetchImagesForDisplay(displayId: string | undefined) {
   return data;
 }
 
+
+
 /**
  *
  * @param tourId id of the tour to fetch images for 
diff --git a/src/types/supabase.ts b/src/types/supabase.ts
index a17849f5..3ea833b2 100644
--- a/src/types/supabase.ts
+++ b/src/types/supabase.ts
@@ -6,10 +6,32 @@ export type Json =
   | { [key: string]: Json | undefined }
   | Json[];
 
+export type Database = {
 export type Database = {
   public: {
     Tables: {
       categories: {
+        Row: {
+          category: string | null
+          color_hex: string
+          created_at: string
+          id: number
+        }
+        Insert: {
+          category?: string | null
+          color_hex: string
+          created_at?: string
+          id?: number
+        }
+        Update: {
+          category?: string | null
+          color_hex?: string
+          created_at?: string
+          id?: number
+        }
+        Relationships: []
+      }
+      display_media: {
         Row: {
           category: string | null
           color: string | null
@@ -55,41 +77,83 @@ export type Database = {
             referencedColumns: ['id'];
           },
           {
-            foreignKeyName: 'display_media_media_id_fkey';
-            columns: ['media_id'];
-            isOneToOne: false;
-            referencedRelation: 'media';
-            referencedColumns: ['id'];
+            foreignKeyName: "display_media_media_id_fkey"
+            columns: ["media_id"]
+            isOneToOne: false
+            referencedRelation: "media"
+            referencedColumns: ["id"]
           },
-        ];
-      };
+        ]
+      }
       displays: {
         Row: {
-          coordinates: Json | null;
-          created_at: string;
-          description: string;
-          id: string;
-          title: string;
-          updated_at: string | null;
-        };
+          coordinates: Json | null
+          created_at: string
+          description: string
+          id: string
+          summary: string | null
+          title: string
+          updated_at: string | null
+        }
         Insert: {
-          coordinates?: Json | null;
-          created_at?: string;
-          description?: string;
-          id: string;
-          title?: string;
-          updated_at?: string | null;
-        };
+          coordinates?: Json | null
+          created_at?: string
+          description?: string
+          id: string
+          summary?: string | null
+          title?: string
+          updated_at?: string | null
+        }
         Update: {
-          coordinates?: Json | null;
-          created_at?: string;
-          description?: string;
-          id?: string;
-          title?: string;
-          updated_at?: string | null;
-        };
-        Relationships: [];
-      };
+          coordinates?: Json | null
+          created_at?: string
+          description?: string
+          id?: string
+          summary?: string | null
+          title?: string
+          updated_at?: string | null
+        }
+        Relationships: []
+      }
+      emails: {
+        Row: {
+          emails: string | null
+          id: number
+        }
+        Insert: {
+          emails?: string | null
+          id?: number
+        }
+        Update: {
+          emails?: string | null
+          id?: number
+        }
+        Relationships: []
+      }
+      exhibits: {
+        Row: {
+          coordinates: Json | null
+          description: string
+          id: string
+          image: string | null
+          title: string
+        }
+        Insert: {
+          coordinates?: Json | null
+          description: string
+          id?: string
+          image?: string | null
+          title: string
+        }
+        Update: {
+          coordinates?: Json | null
+          description?: string
+          id?: string
+          image?: string | null
+          title?: string
+        }
+        Relationships: []
+      }
       media: {
         Row: {
           created_at: string;
@@ -108,15 +172,39 @@ export type Database = {
           url?: string;
         };
         Update: {
-          created_at?: string;
-          id?: string;
-          text?: string | null;
-          title?: string | null;
-          type?: string | null;
-          url?: string;
-        };
-        Relationships: [];
-      };
+          created_at?: string
+          id?: string
+          text?: string | null
+          title?: string | null
+          type?: string | null
+          url?: string
+        }
+        Relationships: []
+      }
+      news: {
+        Row: {
+          content_link: string
+          created_at: string
+          id: string
+          title: string
+          updated_at: string | null
+        }
+        Insert: {
+          content_link: string
+          created_at?: string
+          id?: string
+          title: string
+          updated_at?: string | null
+        }
+        Update: {
+          content_link?: string
+          created_at?: string
+          id?: string
+          title?: string
+          updated_at?: string | null
+        }
+        Relationships: []
+      }
       spotlight_recommendations: {
         Row: {
           source_display_id: string;
@@ -139,14 +227,14 @@ export type Database = {
             referencedColumns: ['id'];
           },
           {
-            foreignKeyName: 'spotlight_recommendations_target_display_id_fkey';
-            columns: ['target_display_id'];
-            isOneToOne: false;
-            referencedRelation: 'tours';
-            referencedColumns: ['id'];
+            foreignKeyName: "spotlight_recommendations_target_display_id_fkey"
+            columns: ["target_display_id"]
+            isOneToOne: false
+            referencedRelation: "tours"
+            referencedColumns: ["id"]
           },
-        ];
-      };
+        ]
+      }
       tour_displays: {
         Row: {
           display_id: string;
@@ -172,14 +260,14 @@ export type Database = {
             referencedColumns: ['id'];
           },
           {
-            foreignKeyName: 'tour_displays_tour_id_fkey';
-            columns: ['tour_id'];
-            isOneToOne: false;
-            referencedRelation: 'tours';
-            referencedColumns: ['id'];
+            foreignKeyName: "tour_displays_tour_id_fkey"
+            columns: ["tour_id"]
+            isOneToOne: false
+            referencedRelation: "tours"
+            referencedColumns: ["id"]
           },
-        ];
-      };
+        ]
+      }
       tour_media: {
         Row: {
           media_id: string;
@@ -202,79 +290,71 @@ export type Database = {
             referencedColumns: ['id'];
           },
           {
-            foreignKeyName: 'tour_media_tour_id_fkey';
-            columns: ['tour_id'];
-            isOneToOne: false;
-            referencedRelation: 'tours';
-            referencedColumns: ['id'];
+            foreignKeyName: "tour_media_tour_id_fkey"
+            columns: ["tour_id"]
+            isOneToOne: false
+            referencedRelation: "tours"
+            referencedColumns: ["id"]
           },
-        ];
-      };
+        ]
+      }
       tours: {
         Row: {
           category: Database["public"]["Enums"]["tour_category"]
           coordinates: Json | null
-          created_at: string;
-          description: string | null;
-          id: string;
-          name: string | null;
+          created_at: string
+          description: string | null
+          id: string
+          name: string
           preview_text: string | null
-          spotlight: boolean;
-          stop_count: number | null;
-        };
-        Insert: {
-          created_at?: string;
-          description?: string | null;
-          id?: string;
-          name?: string | null;
-          spotlight?: boolean;
-          stop_count?: number | null;
-        };
-        Update: {
-          created_at?: string;
-          description?: string | null;
-          id?: string;
-          name?: string | null;
-          spotlight?: boolean;
-          stop_count?: number | null;
-        };
-        Relationships: [];
-      };
-      news: {
-        Row: {
-          content_link: string;
-          created_at: string;
-          id: string;
-          title: string;
-          updated_at: string | null;
-        };
+          spotlight: boolean
+          stop_count: number | null
+        }
         Insert: {
-          content_link?: string;
           category?: Database["public"]["Enums"]["tour_category"]
           coordinates?: Json | null
-          created_at?: string;
-          id?: string;
-          title?: string;
+          created_at?: string
+          description?: string | null
+          id?: string
+          name: string
           preview_text?: string | null
-          updated_at?: string | null;
-        };
+          spotlight?: boolean
+          stop_count?: number | null
+        }
         Update: {
-          content_link?: string;
           category?: Database["public"]["Enums"]["tour_category"]
           coordinates?: Json | null
-          created_at?: string;
-          id?: string;
-          title?: string;
+          created_at?: string
+          description?: string | null
+          id?: string
+          name?: string
           preview_text?: string | null
-          updated_at?: string | null;
-        };
-        Relationships: [];
-      };
-    };
+          spotlight?: boolean
+          stop_count?: number | null
+        }
+        Relationships: []
+      }
+    }
     Views: {
       [_ in never]: never;
     };
     Functions: {
+      fetch_recommended_spotlights: {
+        Args: {
+          source_spotlight_id: string
+        }
+        Returns: {
+          id: string
+          name: string
+          description: string
+          created_at: string
+          stop_count: number
+          spotlight: boolean
+          preview_text: string
+          coordinates: Json
+          category: Database["public"]["Enums"]["tour_category"]
+        }[]
+      }
       fetchimagesfordisplay: {
         Args: {
           displayid: string
@@ -307,23 +387,7 @@ export type Database = {
         }
         Returns: string
       }
-      get_spotlight_recommendations: {
-        Args: {
-          source_display_id: string
-        }
-        Returns: {
-          id: string
-          name: string
-          description: string
-          created_at: string
-          stop_count: number
-          spotlight: boolean
-          preview_text: string
-          coordinates: Json
-          category: Database["public"]["Enums"]["tour_category"]
-        }[]
-      }
-      get_spotlight_tours: {
+      join_all_spotlights_with_media: {
         Args: Record<PropertyKey, never>
         Returns: {
           id: string
@@ -335,21 +399,9 @@ export type Database = {
           preview_text: string
           coordinates: Json
           category: Database["public"]["Enums"]["tour_category"]
+          media_url: string
         }[]
       }
-      join_spotlights_with_media: {
-        Args: Record<PropertyKey, never>
-        Returns: {
-          id: string;
-          name: string;
-          description: string;
-          created_at: string;
-          stop_count: number;
-          spotlight: boolean;
-          preview_text: string
-          media_url: string;
-        }[];
-      };
       join_tours_with_media: {
         Args: Record<PropertyKey, never>
         Returns: {
@@ -363,18 +415,18 @@ export type Database = {
           url: string
         }[]
       }
-    };
+    }
     Enums: {
-      media_type: 'image' | 'video' | 'link';
+      media_type: "image" | "video" | "link"
       tour_category:
         | "BuildingsAndServices"
         | "ParksAviariesEnclosures"
         | "SiteFeatures"
-    };
+    }
     CompositeTypes: {
-      [_ in never]: never;
-    };
-  };
+      [_ in never]: never
+    }
+  }
 }
 
 type PublicSchema = Database[Extract<keyof Database, "public">]

From b292e54eed17a95deba8f8bbbcf04b8ebba4a784 Mon Sep 17 00:00:00 2001
From: Noah Hernandez <63211322+oahnh@users.noreply.github.com>
Date: Tue, 9 Apr 2024 15:15:49 -0700
Subject: [PATCH 06/21] rebase 3

---
 package-lock.json                             | 36 ++++++++-
 package.json                                  |  2 +-
 .../[tourId]/[displayId]/page.tsx             |  2 +-
 src/app/featuredToursPage/page.tsx            |  5 +-
 src/app/globals.css                           |  4 +-
 src/app/newsFeedPage/page.tsx                 |  1 -
 .../[spotlightId]/[displayId]/page.tsx        | 40 +++++-----
 src/app/spotlightPage/[spotlightId]/page.tsx  | 51 +++++++------
 src/app/spotlightPage/page.tsx                | 13 ++--
 .../HomeWildlifeSpotlights.tsx                |  7 +-
 src/supabase/exhibits/queries.tsx             | 44 ++++++-----
 src/supabase/tour_displays/queries.tsx        | 42 +----------
 src/supabase/tours/queries.tsx                | 74 ++++++++++---------
 src/types/types.ts                            |  3 +-
 14 files changed, 171 insertions(+), 153 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index d16cbe1e..2443230b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -19,6 +19,8 @@
         "leaflet": "^1.9.4",
         "moment": "^2.30.1",
         "next": "latest",
+        "node": "^21.7.1",
+        "npm": "^10.2.4",
         "react": "latest",
         "react-bootstrap": "^2.9.0",
         "react-dom": "latest",
@@ -3867,10 +3869,36 @@
       "version": "1.1.0",
       "license": "ISC"
     },
-    "node_modules/next/node_modules/postcss": {
-      "version": "8.4.31",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
-      "integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==",
+    "node_modules/next/node_modules/@next/env": {
+      "version": "14.0.3",
+      "resolved": "https://registry.npmjs.org/@next/env/-/env-14.0.3.tgz",
+      "integrity": "sha512-7xRqh9nMvP5xrW4/+L0jgRRX+HoNRGnfJpD+5Wq6/13j3dsdzxO3BCXn7D3hMqsDb+vjZnJq+vI7+EtgrYZTeA=="
+    },
+    "node_modules/node": {
+      "version": "21.7.1",
+      "resolved": "https://registry.npmjs.org/node/-/node-21.7.1.tgz",
+      "integrity": "sha512-j6NFfbKy3DBuaJh2X8lRZmS59oLr2XRtt0rTa9VsFj3ZcGbeK7xp40gZaI92AqNuRv1aL5dRueNqL6YuZFcjJg==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "node-bin-setup": "^1.0.0"
+      },
+      "bin": {
+        "node": "bin/node"
+      },
+      "engines": {
+        "npm": ">=5.0.0"
+      }
+    },
+    "node_modules/node-bin-setup": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/node-bin-setup/-/node-bin-setup-1.1.3.tgz",
+      "integrity": "sha512-opgw9iSCAzT2+6wJOETCpeRYAQxSopqQ2z+N6BXwIMsQQ7Zj5M8MaafQY8JMlolRR6R1UXg2WmhKp0p9lSOivg=="
+    },
+    "node_modules/node-domexception": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/node-domexception/-/node-domexception-1.0.0.tgz",
+      "integrity": "sha512-/jKZoMpw0F8GRwl4/eLROPA3cfcXtLApP0QzLmUT/HuPCZWyB7IY9ZrMeKw2O/nFIqPQB3PVM9aYm0F312AXDQ==",
+      "dev": true,
       "funding": [
         {
           "type": "opencollective",
diff --git a/package.json b/package.json
index 68e6728b..2b17aba9 100644
--- a/package.json
+++ b/package.json
@@ -30,7 +30,7 @@
     "leaflet": "^1.9.4",
     "moment": "^2.30.1",
     "next": "latest",
-    "npm": "^10.2.4",
+    "node": "^21.7.1",
     "react": "latest",
     "react-bootstrap": "^2.9.0",
     "react-dom": "latest",
diff --git a/src/app/featuredToursPage/[tourId]/[displayId]/page.tsx b/src/app/featuredToursPage/[tourId]/[displayId]/page.tsx
index fa56970c..d464684c 100644
--- a/src/app/featuredToursPage/[tourId]/[displayId]/page.tsx
+++ b/src/app/featuredToursPage/[tourId]/[displayId]/page.tsx
@@ -137,4 +137,4 @@ export default function TourStopPage({
       </div>
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/src/app/featuredToursPage/page.tsx b/src/app/featuredToursPage/page.tsx
index 3ea574a6..99293f28 100644
--- a/src/app/featuredToursPage/page.tsx
+++ b/src/app/featuredToursPage/page.tsx
@@ -3,10 +3,7 @@
 import Link from 'next/link';
 import React, { useEffect, useState } from 'react';
 
-import {
-  fetchAllTours,
-  joinSpotlightsWithMedia,
-} from '../../supabase/tours/queries';
+import { fetchAllTours } from '../../supabase/tours/queries';
 import NavBar from '../../components/userComponents/navBar/navBar';
 import { TourRow } from '../../types/types';
 
diff --git a/src/app/globals.css b/src/app/globals.css
index 6503f969..7ba50cc9 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -94,7 +94,9 @@ These styles are applied automatically to certain div tags, but you can also cal
     )
     rgb(var(--background-start-rgb));
 } */
-body,
+body {
+  @apply bg-ivory;
+}
 html {
   height: 100%;
 }
diff --git a/src/app/newsFeedPage/page.tsx b/src/app/newsFeedPage/page.tsx
index 10c3577b..ff52e004 100644
--- a/src/app/newsFeedPage/page.tsx
+++ b/src/app/newsFeedPage/page.tsx
@@ -7,7 +7,6 @@ import { NewsRow } from '../../types/types';
 import { fetchAllNewsByDate } from '../../supabase/news/queries';
 import NewsDisplay from '../../components/userComponents/NewsDisplay/NewsDisplay';
 
-
 /**
  * @returns news feed page
  */
diff --git a/src/app/spotlightPage/[spotlightId]/[displayId]/page.tsx b/src/app/spotlightPage/[spotlightId]/[displayId]/page.tsx
index c20c394d..8760be7e 100644
--- a/src/app/spotlightPage/[spotlightId]/[displayId]/page.tsx
+++ b/src/app/spotlightPage/[spotlightId]/[displayId]/page.tsx
@@ -1,3 +1,5 @@
+/* eslint-disable jsdoc/check-param-names */
+
 'use client';
 
 import Link from 'next/link';
@@ -8,13 +10,11 @@ import NavBar from '../../../../components/userComponents/navBar/navBar';
 import { fetchDisplayFromId } from '../../../../supabase/displays/queries';
 import { fetchDisplayfromSpotlight } from '../../../../supabase/tour_displays/queries';
 
+// eslint-disable-next-line jsdoc/require-param
 /**
- *
- *
- * @param root0
- * @param root0.params
- * @param root0.params.displayId
- * @param root0.params.spotlightId
+ * @param root0 - For a spotlight, it's composed of displays which have their own pages.  This will handle one of those pages.
+ * @param root0.params.displayId - Display ID
+ * @param root0.params.spotlightId - Spotlight ID
  * @returns display page
  */
 export default function Page({
@@ -27,6 +27,7 @@ export default function Page({
     created_at: 'N/A',
     description: 'N/A',
     id: '0',
+    summary: 'N/A',
     title: 'N/A',
     updated_at: 'N/A',
   });
@@ -53,12 +54,13 @@ export default function Page({
 
         setOtherDisplays(responseDataOtherDisplays);
       } catch (error) {
+        // eslint-disable-next-line no-console
         console.error(error);
       }
     }
 
     fetchData();
-  }, []);
+  }, [params.displayId, params.spotlightId]);
 
   return (
     <div className="bg-[#ebf0e4]">
@@ -81,16 +83,20 @@ export default function Page({
       </h1>
 
       <div className="flex space-x-[14px] pl-[25px] pt-[16px] w-screen overflow-x-auto">
-      {otherDisplays.map( 
-            otherDisplay => (
-                <Link key={otherDisplay.id} href={`/spotlightPage/${params.spotlightId}/${otherDisplay.id}?spotlightId=${params.spotlightId}`} >
-                    <button type="button" className="bg-[#7CA24E] w-[163px] h-[74px] text-white font-bold rounded-2xl p-[25px]">
-                        {otherDisplay.title}
-                    </button>
-                </Link>
-
-            ))}
+        {otherDisplays.map(otherDisplay => (
+          <Link
+            key={otherDisplay.id}
+            href={`/spotlightPage/${params.spotlightId}/${otherDisplay.id}?spotlightId=${params.spotlightId}`}
+          >
+            <button
+              type="button"
+              className="bg-[#7CA24E] w-[163px] h-[74px] text-white font-bold rounded-2xl p-[25px]"
+            >
+              {otherDisplay.title}
+            </button>
+          </Link>
+        ))}
       </div>
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/src/app/spotlightPage/[spotlightId]/page.tsx b/src/app/spotlightPage/[spotlightId]/page.tsx
index e7862743..7db4edd8 100644
--- a/src/app/spotlightPage/[spotlightId]/page.tsx
+++ b/src/app/spotlightPage/[spotlightId]/page.tsx
@@ -4,18 +4,18 @@ import Link from 'next/link';
 import React, { useEffect, useState } from 'react';
 
 import { TourRow, DisplayRow } from '../../../types/types';
-import { fetchTour } from '../../../supabase/tours/queries';
+import {
+  fetchRecommendedSpotlights,
+  fetchTour,
+} from '../../../supabase/tours/queries';
 import NavBar from '../../../components/userComponents/navBar/navBar';
-import { fetchDisplayfromSpotlight, fetchRelatedSpotlightIdsFromSpotlight } from '../../../supabase/tour_displays/queries';
+import { fetchDisplayfromSpotlight } from '../../../supabase/tour_displays/queries';
 
 /**
- * @param -.params
- * @param -.params.spotlightId
- * @param -.params.params
- * @param -.params.params.spotlightId
- * @param -.params.params
- * @param -.params.params.spotlightId
- * @returns a spotlight page given a spotlight Id
+ * @param root0 -
+ * @param root0.params -
+ * @param root0.params.spotlightId - Spotlight ID of page that is linked on the spotlight page.
+ * @returns a single spotlight page given a spotlight Id
  */
 export default function Page({ params }: { params: { spotlightId: string } }) {
   const [spotlight, setSpotlight] = useState<TourRow>({
@@ -26,15 +26,19 @@ export default function Page({ params }: { params: { spotlightId: string } }) {
     spotlight: true,
     preview_text: 'N/A',
     stop_count: 0,
+    category: 'BuildingsAndServices',
+    coordinates: {},
   });
 
   const [displays, setDisplays] = useState<DisplayRow[]>([]);
 
-  // const [relatedSpolights, setRelatedSpotlight] = useState<TourRow[]>([])
+  const [recommendedSpotlights, setRecommendedSpotlights] = useState<TourRow[]>(
+    [],
+  );
 
   useEffect(() => {
     /**
-     * @returns data from tour table and display table
+     *
      */
     async function fetchData() {
       try {
@@ -45,17 +49,17 @@ export default function Page({ params }: { params: { spotlightId: string } }) {
         const responseDataForDisplays: DisplayRow[] =
           await fetchDisplayfromSpotlight(params.spotlightId);
         setDisplays(responseDataForDisplays);
-
-        // const responseDataForRelatedSpotlights: TourRow[] = await fetchRelatedSpotlightsfromSpotlightId(params.spotlightId);
-        // setRelatedSpotlight(responseDataForRelatedSpotlights);
-
+        const responseDataForRecommendedSpotlights: TourRow[] =
+          await fetchRecommendedSpotlights(params.spotlightId);
+        setRecommendedSpotlights(responseDataForRecommendedSpotlights);
       } catch (error) {
+        // eslint-disable-next-line no-console
         console.error(error);
       }
     }
 
     fetchData();
-  }, []);
+  }, [params.spotlightId]);
 
   return (
     <div className="bg-[#ebf0e4]">
@@ -91,29 +95,28 @@ export default function Page({ params }: { params: { spotlightId: string } }) {
           </Link>
         ))}
       </div>
-
+      if
       <h1 className="text-black font-Lato font-bold text-[18px] font-medium pl-[18px] pb-[16px]">
         Related Spotlights
       </h1>
-
       <ul className="list-none p-0 flex">
-        {/* {relatedSpolights.map(otherSpotlight => (
+        {recommendedSpotlights.map(recSpotlight => (
           <li
             className="pl-[18px] w-[162px] overflow-x-auto"
-            key={otherSpotlight.id}
+            key={recSpotlight.id}
           >
             <Link href={`/spotlightPage/${spotlight.id}`}>
               <div className="bg-[#386131] h-[169px] rounded-2xl p-[18px] flex flex-col" />
               <h4 className="text-black font-Lato text-20 font-bold mt-2">
-                {otherSpotlight.name}
+                {recSpotlight.name}
               </h4>
               <h2 className="text-gray font-Lato text-sm font-normal">
-                {otherSpotlight.description}
+                {recSpotlight.description}
               </h2>
             </Link>
           </li>
-        ))} */}
+        ))}
       </ul>
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/src/app/spotlightPage/page.tsx b/src/app/spotlightPage/page.tsx
index 64500062..3c879669 100644
--- a/src/app/spotlightPage/page.tsx
+++ b/src/app/spotlightPage/page.tsx
@@ -4,15 +4,15 @@ import Link from 'next/link';
 import React, { useEffect, useState } from 'react';
 import Image from 'next/image';
 
-import { fetchSpotlightTours } from '../../supabase/tours/queries';
+import { joinAllSpotlightsWithMedia } from '../../supabase/tours/queries';
 import NavBar from '../../components/userComponents/navBar/navBar';
-import { TourRow } from '../../types/types';
+import { SpotlightWithMediaRow } from '../../types/types';
 
 /**
  * @returns spotlights from tours table
  */
 function App() {
-  const [spotlights, setSpotlights] = useState<TourRow[]>([]);
+  const [spotlights, setSpotlights] = useState<SpotlightWithMediaRow[]>([]);
 
   useEffect(() => {
     /**
@@ -20,9 +20,11 @@ function App() {
      */
     async function fetchData() {
       try {
-        const responseData: TourRow[] = await fetchSpotlightTours();
+        const responseData: SpotlightWithMediaRow[] =
+          await joinAllSpotlightsWithMedia();
         setSpotlights(responseData);
       } catch (error) {
+        // eslint-disable-next-line no-console
         console.error(error);
       }
     }
@@ -54,11 +56,12 @@ function App() {
                   <div className="relative top-28">
                     <Image
                       key={spotlight.id}
-                      src={spotlight.url}
+                      src={spotlight.media_url}
                       alt="Media Image"
                       width={100}
                       height={214}
                       priority
+                      style={{ objectFit: 'cover' }}
                     />
                   </div>
                 </div>
diff --git a/src/components/userComponents/HomeWildlifeSpotlights/HomeWildlifeSpotlights.tsx b/src/components/userComponents/HomeWildlifeSpotlights/HomeWildlifeSpotlights.tsx
index 4f9b74f3..d2ce7b19 100644
--- a/src/components/userComponents/HomeWildlifeSpotlights/HomeWildlifeSpotlights.tsx
+++ b/src/components/userComponents/HomeWildlifeSpotlights/HomeWildlifeSpotlights.tsx
@@ -1,7 +1,9 @@
+/* eslint-disable jsdoc/require-param-description */
+/* eslint-disable jsdoc/check-param-names */
 import React, { useEffect, useState } from 'react';
 import { HiChevronRight } from 'react-icons/hi';
 import Link from 'next/link';
-import { joinSpotlightsWithMedia } from '../../../supabase/tours/queries';
+import { joinAllSpotlightsWithMedia } from '../../../supabase/tours/queries';
 import { SpotlightWithMediaRow } from '../../../types/types';
 
 /**
@@ -26,9 +28,10 @@ function HomeWildlifeSpotlights(): React.JSX.Element {
     async function fetchData() {
       try {
         const responseData: SpotlightWithMediaRow[] =
-          await joinSpotlightsWithMedia();
+          await joinAllSpotlightsWithMedia();
         setSpotlightsWithMedia(responseData);
       } catch (error) {
+        // eslint-disable-next-line no-console
         console.error('Error in fetch data: ', error);
       }
     }
diff --git a/src/supabase/exhibits/queries.tsx b/src/supabase/exhibits/queries.tsx
index 7277c03b..7ce896d3 100644
--- a/src/supabase/exhibits/queries.tsx
+++ b/src/supabase/exhibits/queries.tsx
@@ -15,8 +15,6 @@ export async function fetchAllExhibits(): Promise<ExhibitRow[]> {
   return data;
 }
 
-
-
 /**
  * Fetches a single exhibit from the database.
  * @param exhibitId - The id of the exhibit to fetch.
@@ -38,21 +36,25 @@ export async function fetchExhibit(exhibitId: string): Promise<ExhibitRow> {
  * @param exhibitId - The id of the exhibit to fetch.
  * @returns A promise that resolves to a ExhibitRow object.
  */
-export async function fetchExhibitImage(exhibitId: string): Promise<{ image: string }> {
-    const { data, error } = await supabase
-        .from('exhibits')
-        .select('image')
-        .eq('id', exhibitId)
-        .single();
+export async function fetchExhibitImage(
+  exhibitId: string,
+): Promise<{ image: string }> {
+  const { data, error } = await supabase
+    .from('exhibits')
+    .select('image')
+    .eq('id', exhibitId)
+    .single();
 
-    if (error) {
-        throw new Error(error.message);
-    }
+  if (error) {
+    throw new Error(error.message);
+  }
 
-    // Provide a default image URL if the image is null
-    const imageUrl = data?.image ?? "https://buffer.com/cdn-cgi/image/w=1000,fit=contain,q=90,f=auto/library/content/images/size/w1200/2023/10/free-images.jpg"; // Adjust the default image path as needed
+  // Provide a default image URL if the image is null
+  const imageUrl =
+    data?.image ??
+    'https://buffer.com/cdn-cgi/image/w=1000,fit=contain,q=90,f=auto/library/content/images/size/w1200/2023/10/free-images.jpg'; // Adjust the default image path as needed
 
-    return { image: imageUrl };
+  return { image: imageUrl };
 }
 
 /**
@@ -60,7 +62,9 @@ export async function fetchExhibitImage(exhibitId: string): Promise<{ image: str
  * @param exhibitData - The exhibit to insert.
  * @returns A promise that resolves to a ExhibitRow object.
  */
-export async function insertExhibit(exhibitData: ExhibitRow): Promise<ExhibitRow | null> {
+export async function insertExhibit(
+  exhibitData: ExhibitRow,
+): Promise<ExhibitRow | null> {
   const { data, error } = await supabase.from('exhibits').insert(exhibitData);
   if (error) {
     throw new Error(error.message);
@@ -74,7 +78,7 @@ export async function insertExhibit(exhibitData: ExhibitRow): Promise<ExhibitRow
  * @returns A promise that resolves to a ExhibitRow object.
  */
 export async function updateExhibit(
-    newExhibitData: ExhibitRow,
+  newExhibitData: ExhibitRow,
 ): Promise<ExhibitRow | null> {
   const { data, error } = await supabase
     .from('exhibits')
@@ -91,7 +95,9 @@ export async function updateExhibit(
  * @param exhibitData - The exhibit to upsert.
  * @returns A promise that resolves to a ExhibitRow object.
  */
-export async function upsertTour(exhibitData: ExhibitRow): Promise<ExhibitRow | null> {
+export async function upsertTour(
+  exhibitData: ExhibitRow,
+): Promise<ExhibitRow | null> {
   const { data, error } = await supabase.from('exhibits').upsert(exhibitData);
   if (error) {
     throw new Error(error.message);
@@ -104,7 +110,9 @@ export async function upsertTour(exhibitData: ExhibitRow): Promise<ExhibitRow |
  * @param exhibitId - The id of the exhibit to delete.
  * @returns A promise that resolves to a ExhibitRow object.
  */
-export async function deleteExhibit(exhibitId: string): Promise<ExhibitRow | null> {
+export async function deleteExhibit(
+  exhibitId: string,
+): Promise<ExhibitRow | null> {
   const { data, error } = await supabase
     .from('exhibits')
     .delete()
diff --git a/src/supabase/tour_displays/queries.tsx b/src/supabase/tour_displays/queries.tsx
index 9f4eead4..0fae2ea9 100644
--- a/src/supabase/tour_displays/queries.tsx
+++ b/src/supabase/tour_displays/queries.tsx
@@ -48,46 +48,6 @@ export async function fetchDisplayfromSpotlight(spotlightId: string) {
   return displays;
 }
 
-/**
- * @param spotlightId - a spotlight ID
- * @returns given a spotlight ID, get all the ids of the spotlight recommendations for related spotlights
- */
-export async function fetchRelatedSpotlightIdsFromSpotlight(
-  spotlightId: string,
-) {
-  const { data, error } = await supabase
-    .from('spotlight_recommendations')
-    .select('*')
-    .eq('source_display_id', spotlightId);
-
-  if (error) {
-    throw new Error(
-      `An error occurred while trying to read tour displays: ${error}`,
-    );
-  }
-  const relatedSpotlightIds = data.map(item => item.target_display_id);
-  return relatedSpotlightIds;
-}
-
-/**
- * @param relatedSpotlightIds - list of all the spotlight ids that go under related spotlights
- * @returns the spotlights that have the corresponding ids
- */
-export async function fetchRelatedSpotlightsfromIds(
-  relatedSpotlightIds: string[],
-) {
-  const { data, error } = await supabase
-    .from('tours')
-    .select('*')
-    .in('id', relatedSpotlightIds);
-
-  if (error) {
-    throw new Error(`Error updating display data: ${error.message}`);
-  }
-
-  return data;
-}
-
 /**
  * Fetches all tour displays for a single tour from the database sorted by display_order.
  * @param tourId - The id of the tour to fetch.
@@ -105,4 +65,4 @@ export async function fetchTourDisplays(
   }
   data.sort((a, b) => (a?.display_order || 0) - (b?.display_order || 0));
   return data;
-}
\ No newline at end of file
+}
diff --git a/src/supabase/tours/queries.tsx b/src/supabase/tours/queries.tsx
index fc0574c8..0ac78dda 100644
--- a/src/supabase/tours/queries.tsx
+++ b/src/supabase/tours/queries.tsx
@@ -16,19 +16,54 @@ export async function fetchAllTours(): Promise<TourRow[]> {
 }
 
 /**
- * @returns all spotlight tours from the tours table
+ * Fetches all spotlights from the database.
+ * @returns A promise that resolves to an array of TourRow objects, selected based on being spotlights
  */
-export async function fetchSpotlightTours(): Promise<TourRow[] | null> {
+export async function fetchAllSpotlights(): Promise<TourRow[]> {
   const { data, error } = await supabase
     .from('tours')
     .select('*')
-    .is('spotlight', true);
+    .eq('spotlight', true);
   if (error) {
-    throw new Error(`Error fetching spotlight tours: ${error.message}`);
+    throw new Error(
+      `An error occurred while trying to read tour displays: ${error}`,
+    );
+  }
+  return data;
+}
+
+/**
+ * @param spotlightId - a spotlight ID
+ * @returns A promise that resolves to an array of TourRow objects, selected based on being spotlights
+ *
+ * given a spotlight ID, get all the objects of the related spotlights
+ * TODO: Switching this function to be a database function
+ */
+export async function fetchRecommendedSpotlights(spotlightId: string) {
+  const { data, error } = await supabase.rpc('fetch_recommended_spotlights', {
+    source_spotlight_id: spotlightId,
+  });
+  if (error) {
+    throw new Error(
+      `An error occurred while trying to read tour displays: ${error}`,
+    );
   }
   return data;
 }
 
+/**
+ * Queries all of the spotlights, then queries their join tables to retrieve the media associated with each of them.
+ *  @returns A promise that resolves to an array of TourRow objects, selected based on being spotlights
+ */
+export async function joinAllSpotlightsWithMedia() {
+  const { data, error } = await supabase.rpc('join_all_spotlights_with_media');
+  if (error) {
+    throw new Error(
+      `An error occurred while trying to read tour displays: ${error}`,
+    );
+  }
+  return data;
+}
 /**
  * Fetches a single tour from the database.
  * @param tourId - The id of the tour to fetch.
@@ -93,35 +128,8 @@ export async function upsertTour(tourData: TourRow): Promise<TourRow | null> {
   return newTour;
 }
 
-// Delete a tour
 /**
- * @param id
- */
-export async function deleteTour(id: number) {
-  const { data, error } = await supabase.from('tours').delete().eq('id', id);
-  if (error) {
-    throw new Error(error.message);
-  }
-  return data;
-}
-
-/**
- * !!! WIP !!!
- * @returns - Uses rpc to call Database function of the same name on Supabase.
- * Used to call a join on a tour and the media table, in order to retrieve its cover image + the rest of the tour info.
- */
-export async function joinSpotlightsWithMedia() {
-  const { data, error } = await supabase.rpc('join_spotlights_with_media');
-  if (error) {
-    throw new Error(
-      `An error occurred while trying to load spotlights: ${error.message}`,
-    );
-  }
-  return data;
-}
-
-/**
- *
+ * @returns A promise that resolves to an array of TourRow objects,
  */
 export async function joinToursWithMedia() {
   const { data, error } = await supabase.rpc('join_tours_with_media');
@@ -131,4 +139,4 @@ export async function joinToursWithMedia() {
     );
   }
   return data;
-}
\ No newline at end of file
+}
diff --git a/src/types/types.ts b/src/types/types.ts
index 48367c69..4be9f38f 100644
--- a/src/types/types.ts
+++ b/src/types/types.ts
@@ -12,10 +12,11 @@ export type TourDisplaysRow =
   Database['public']['Tables']['tour_displays']['Row'];
 export type TourMediaRow = Database['public']['Tables']['tour_media']['Row'];
 export type TourRow = Database['public']['Tables']['tours']['Row'];
-export type SpotlightWithMediaRow = TourRow & { media_url: string };
 export type NewsRow = Database['public']['Tables']['news']['Row'];
 export type ExhibitRow = Database['public']['Tables']['exhibits']['Row'];
 export type SpotlightRow = {
   tour_row: TourRow;
   url: string;
 };
+export type SpotlightWithMediaRow = TourRow & { media_url: string };
+export type ToursWithMediaRow = TourRow & { media_url: string };

From fdaaddbb8b6472958109de9599f6806772723953 Mon Sep 17 00:00:00 2001
From: Noah Hernandez <63211322+oahnh@users.noreply.github.com>
Date: Tue, 9 Apr 2024 15:19:14 -0700
Subject: [PATCH 07/21] rebase 4

---
 .../ImageScroller/ImageScroller.tsx           |   4 +-
 .../SiteMap/MapInteractionHandler.tsx         |   2 +-
 .../userComponents/emailPopup/page.tsx        | 153 +++++++++---------
 3 files changed, 75 insertions(+), 84 deletions(-)

diff --git a/src/components/userComponents/ImageScroller/ImageScroller.tsx b/src/components/userComponents/ImageScroller/ImageScroller.tsx
index 95c92eb7..70bc6aa3 100644
--- a/src/components/userComponents/ImageScroller/ImageScroller.tsx
+++ b/src/components/userComponents/ImageScroller/ImageScroller.tsx
@@ -48,8 +48,8 @@ export default function Carousel({ media }: CarouselProps) {
               objectFit="cover"
               priority
             />
-          )}
-        </div>
+          </div>
+        ))}
       </div>
       {media.length > 1 && (
         <button
diff --git a/src/components/userComponents/SiteMap/MapInteractionHandler.tsx b/src/components/userComponents/SiteMap/MapInteractionHandler.tsx
index f98709a7..131a1c64 100644
--- a/src/components/userComponents/SiteMap/MapInteractionHandler.tsx
+++ b/src/components/userComponents/SiteMap/MapInteractionHandler.tsx
@@ -12,4 +12,4 @@ function RecenterMap({ center }) {
 
   return null;
 }
-export default RecenterMap;
\ No newline at end of file
+export default RecenterMap;
diff --git a/src/components/userComponents/emailPopup/page.tsx b/src/components/userComponents/emailPopup/page.tsx
index d0ebfc12..e9c1518d 100644
--- a/src/components/userComponents/emailPopup/page.tsx
+++ b/src/components/userComponents/emailPopup/page.tsx
@@ -2,36 +2,36 @@
 
 import React, { Fragment, useState } from 'react';
 import { Dialog, Transition } from '@headlessui/react';
-import { PiPaperPlaneTiltBold , PiSealCheck } from "react-icons/pi";
-import { VscClose } from "react-icons/vsc";
-import { BiErrorCircle } from "react-icons/bi";
+import { PiPaperPlaneTiltBold, PiSealCheck } from 'react-icons/pi';
+import { VscClose } from 'react-icons/vsc';
+import { BiErrorCircle } from 'react-icons/bi';
 import Link from 'next/link';
 import supabase from '../../../supabase/client';
 
-
 /**
  *
  * @param root0
  * @param root0.backLink
  */
-function EmailSuccess({backLink}: {backLink: string}) {
+function EmailSuccess({ backLink }: { backLink: string }) {
   return (
-  
     <div className="absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 flex flex-col items-center">
       <div>
         <PiSealCheck className="text-[#3F6A38] text-5xl mb-2.5" />
       </div>
       <div>
         <h2 className="pl-[32px] pr-[32px] text-center font-Lato font-bold text-[19px] text-[#3B3B3B]">
-        THANKS FOR SUBSCRIBING!
+          THANKS FOR SUBSCRIBING!
         </h2>
       </div>
       <div>
         <p className="text-center text-sm font-Lato text-[#3B3B3B] pt-[10px] pl-[30px] pr-[30px] text-[16px]">
-        Your sign-up request was successful! Please check your email inbox to confirm.</p>
+          Your sign-up request was successful! Please check your email inbox to
+          confirm.
+        </p>
       </div>
-        
-      <Link href={backLink} >
+
+      <Link href={backLink}>
         <div className="flex items-center justify-center pt-[24px]">
           <button
             type="button"
@@ -41,12 +41,8 @@ function EmailSuccess({backLink}: {backLink: string}) {
           </button>
         </div>
       </Link>
-      
     </div>
-
-
-
-  )
+  );
 }
 
 type EmailInputProps = {
@@ -55,7 +51,7 @@ type EmailInputProps = {
   handleSubmit: (e: any) => void;
   showError: boolean;
   errorMsg: string;
-}
+};
 
 /**
  *
@@ -66,64 +62,66 @@ type EmailInputProps = {
  * @param root0.showError
  * @param root0.errorMsg
  */
-function EmailInput({inputValue, handleChange, handleSubmit, showError, errorMsg}: EmailInputProps) {
+function EmailInput({
+  inputValue,
+  handleChange,
+  handleSubmit,
+  showError,
+  errorMsg,
+}: EmailInputProps) {
   return (
     <>
-    
-
       <div className="flex flex-col items-center justify-center absolute left-1/2 transform -translate-x-1/2 -translate-y-1/2">
-          <div className="mb-2.5"> 
-              <PiPaperPlaneTiltBold className="text-[#3F6A38] text-4xl" />
-          </div>
-          
-          <div>
-              <h2 className="pt-[10px] pl-[48.5px] pr-[48.5px] text-center font-Lato font-bold text-[19px] text-[#3B3B3B]">
-                  JOIN OUR NEWSLETTER!
-              </h2>
-          </div>
-          <div>
-            <p className="text-center text-sm font-Lato text-[#3B3B3B] pt-[10px] pl-[30px] pr-[30px] text-[16px]">
-              Monthly updates on our work and involvement opportunities.
+        <div className="mb-2.5">
+          <PiPaperPlaneTiltBold className="text-[#3F6A38] text-4xl" />
+        </div>
+
+        <div>
+          <h2 className="pt-[10px] pl-[48.5px] pr-[48.5px] text-center font-Lato font-bold text-[19px] text-[#3B3B3B]">
+            JOIN OUR NEWSLETTER!
+          </h2>
+        </div>
+        <div>
+          <p className="text-center text-sm font-Lato text-[#3B3B3B] pt-[10px] pl-[30px] pr-[30px] text-[16px]">
+            Monthly updates on our work and involvement opportunities.
           </p>
-          </div>
-          <div className="flex items-center justify-center pt-[15px]">
-        <input
-          type="text"
-          placeholder="Enter your email"
-          value={inputValue}
-          onChange={handleChange}
-          className={`font-Lato text-sm bg-gray-100 border rounded-md pl-[13px] w-[283px] h-[43px] items-center ${
-            inputValue ? 'text-black' : 'text-[#BDBDBD]'
-          }`}
-        />
-      </div>
+        </div>
+        <div className="flex items-center justify-center pt-[15px]">
+          <input
+            type="text"
+            placeholder="Enter your email"
+            value={inputValue}
+            onChange={handleChange}
+            className={`font-Lato text-sm bg-gray-100 border rounded-md pl-[13px] w-[283px] h-[43px] items-center ${
+              inputValue ? 'text-black' : 'text-[#BDBDBD]'
+            }`}
+          />
+        </div>
 
-      <div className="flex items-center justify-center">
-        <button
-          type="button"
-          className="bg-[#7CA24E] w-[283px] h-[43px] text-white rounded-2xl p-[21px] mt-[8px] flex items-center justify-center"
-          onClick={handleSubmit}
-        >
-          Subscribe
-        </button>
-      </div>
+        <div className="flex items-center justify-center">
+          <button
+            type="button"
+            className="bg-[#7CA24E] w-[283px] h-[43px] text-white rounded-2xl p-[21px] mt-[8px] flex items-center justify-center"
+            onClick={handleSubmit}
+          >
+            Subscribe
+          </button>
+        </div>
       </div>
 
-   
-
-
-
       {showError && (
         <div className="error-modal flex items-center">
           {/* Display your error message or handle the error case */}
           <div className="icon-container">
             <BiErrorCircle className="ml-[26px] text-[#E94444] text-[11px]" />
           </div>
-          <p className="pl-[2px] font-Lato text-[11px] text-[#E94444]">{errorMsg}</p>
+          <p className="pl-[2px] font-Lato text-[11px] text-[#E94444]">
+            {errorMsg}
+          </p>
         </div>
       )}
     </>
-  )
+  );
 }
 
 /**
@@ -131,42 +129,37 @@ function EmailInput({inputValue, handleChange, handleSubmit, showError, errorMsg
  * @param root0.backLink
  * @param root0
  * @param root0.backLink
- * @returns an email pop up. 
- * if no email is entered and the user clicks the submit button, an error message will pop up. 
- * if an invalid email is entered and the user clicks the submit button, another error message will pop up. 
+ * @returns an email pop up.
+ * if no email is entered and the user clicks the submit button, an error message will pop up.
+ * if an invalid email is entered and the user clicks the submit button, another error message will pop up.
  * otherwise, if a valid email is submitted and properly subscribed, another pop up will appear that will tell the user they are subscribed and direct them to another page.
  */
-export default function EmailPopup({backLink}: {backLink: string}
- ) {
+export default function EmailPopup({ backLink }: { backLink: string }) {
   const [isOpen, setIsOpen] = useState(true);
   const [inputValue, setInputValue] = useState('');
   const [showError, setShowError] = useState(false);
   const [errorMsg, setErrorMsg] = useState('');
   const [subscribed, setSubscribed] = useState(false);
 
-
   const closeModal = () => {
     setIsOpen(false);
-  }
+  };
 
-  const handleChange = (e) => {
+  const handleChange = e => {
     setInputValue(e.target.value);
     setShowError(false);
   };
 
+  // const { error } = await supabase.from('emails').insert({ id: 1, name: 'Denmark' })
 
-// const { error } = await supabase.from('emails').insert({ id: 1, name: 'Denmark' })
-  
-
-  const isValidEmail = (email) => {
+  const isValidEmail = email => {
     const emailRegex = /^[^\s@]+@[^\s@]+\.(com|ca)$/;
     return emailRegex.test(email);
   };
 
-  const handleSubmit = async (e) => {
+  const handleSubmit = async e => {
     e.preventDefault();
 
-    
     if (!inputValue.trim()) {
       // Handle the case for an empty email
       setShowError(true);
@@ -175,17 +168,16 @@ export default function EmailPopup({backLink}: {backLink: string}
       // Handle the submission for a valid email
       try {
         // Insert the email into the Supabase database
-        const { error } = await supabase.from('emails').insert({ emails: inputValue });
+        const { error } = await supabase
+          .from('emails')
+          .insert({ emails: inputValue });
       } catch (error) {
-          console.error(error);
-          return error;
-        }
-
+        console.error(error);
+        return error;
+      }
 
       // miha's edits
 
-
-
       //
       setSubscribed(true);
       console.log('Valid email:', inputValue);
@@ -212,5 +204,4 @@ export default function EmailPopup({backLink}: {backLink: string}
       )}
     </div>
   );
-  
-}
\ No newline at end of file
+}

From 25c618e92bcf0057602c255aa35ec28da5f56cf2 Mon Sep 17 00:00:00 2001
From: Noah Hernandez <63211322+oahnh@users.noreply.github.com>
Date: Tue, 9 Apr 2024 15:31:34 -0700
Subject: [PATCH 08/21] refactor: add formatting changes

---
 src/app/siteMapPage/page.tsx                  |   4 +-
 .../FilterButton/FilterButton.tsx             |   6 +-
 .../SiteMap/TourPreviewCard.tsx               |  93 +--
 src/supabase/category/queries.tsx             |   1 -
 src/types/supabase.ts                         | 574 +++++++++---------
 5 files changed, 335 insertions(+), 343 deletions(-)

diff --git a/src/app/siteMapPage/page.tsx b/src/app/siteMapPage/page.tsx
index 53f27783..aefe1147 100644
--- a/src/app/siteMapPage/page.tsx
+++ b/src/app/siteMapPage/page.tsx
@@ -30,7 +30,7 @@ function MapPage() {
   const [mode, setMode] = useState<ModeState>('tours');
 
   // move tour logic here: need to share state between filter 
-  const handleFilter = (mapName) => {
+  const handleFilter = (mapName: string) => {
     setSelectedMap(mapName);
     if (mapName === "Virtual Tour Map") {
       setMode("tours");
@@ -40,7 +40,7 @@ function MapPage() {
   };
 
   const renderFilterContainer = () => (
-    <div className="container mb-6  pl-0 pr-0 ">
+    <div className="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>
diff --git a/src/components/userComponents/FilterButton/FilterButton.tsx b/src/components/userComponents/FilterButton/FilterButton.tsx
index 194e2674..cd622c9c 100644
--- a/src/components/userComponents/FilterButton/FilterButton.tsx
+++ b/src/components/userComponents/FilterButton/FilterButton.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React from 'react';
 
 // interface FilterButtonProps {
 //   content: string;
@@ -24,6 +24,10 @@ interface FilterButtonProps {
 
 /**
  *
+ * @param root0
+ * @param root0.content
+ * @param root0.onClick
+ * @param root0.isSelected
  */
 function FilterButton({ content, onClick, isSelected }: FilterButtonProps) {
   const selectedStyle = 'bg-hunterGreen text-white font-lato text-base font-medium rounded-lg';
diff --git a/src/components/userComponents/SiteMap/TourPreviewCard.tsx b/src/components/userComponents/SiteMap/TourPreviewCard.tsx
index e495fed3..c2ec981d 100644
--- a/src/components/userComponents/SiteMap/TourPreviewCard.tsx
+++ b/src/components/userComponents/SiteMap/TourPreviewCard.tsx
@@ -72,47 +72,60 @@ function TourPreviewCard({
   /** route this to spotlights */
 
   return (
-      <div className="flex flex-col items-center justify-center w-[25rem] h-[7.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-[7.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-[5.8125rem] z-10 h-full shrink-0 rounded-tl-md rounded-tr-none rounded-br-none rounded-bl-md">
-           
+
             <Image
-            
+
               src={previewImage}
               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>
+        }
+        <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-[0.5rem]" 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}`}>
-                <div className=' pl-[0.75rem] pr-[9.87] pt-[0rem] font-lato text-xs text-shadow bg-[#F173731A]  rounded-lg w-[8rem]'>
-                    {category}
-                </div>
+                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"
+                  strokeWidth="1.11692"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                />
+              </svg>
+            </div>
+            <Link href={`/spotlightPage/${id}`}>
+              <div className=' pl-[0.75rem] pr-[9.87] pt-[0rem] font-lato text-xs text-shadow bg-[#F173731A]  rounded-lg w-[8rem]'>
+                {category}
+              </div>
 
               <h3
                 className="relative truncate font-medium font-lato text-night pr-[0.31rem] pl-[0.75rem] pt-[0.3rem] pb-[0rem] text-base leading-normal"
@@ -120,20 +133,18 @@ function TourPreviewCard({
               >
                 {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>
               <h6 className='relative pt-[0.2rem] pr-[1rem] pb-[0.4rem] text-silver font-lato text-xs text-right'>
-                Go to virtual tour > 
-                </h6>
-              </Link>
-            </div>
+                Go to virtual tour `&gt;`
+              </h6>
+            </Link>
           </div>
         </div>
       </div>
-
-
+    </div>
   );
 }
 
diff --git a/src/supabase/category/queries.tsx b/src/supabase/category/queries.tsx
index c96420a4..3354b73f 100644
--- a/src/supabase/category/queries.tsx
+++ b/src/supabase/category/queries.tsx
@@ -1,6 +1,5 @@
 'use client';
 
-import { DisplayRow, ExhibitRow } from '../../types/types';
 import supabase from '../client';
 
 /**
diff --git a/src/types/supabase.ts b/src/types/supabase.ts
index 3ea833b2..3d2d2ff7 100644
--- a/src/types/supabase.ts
+++ b/src/types/supabase.ts
@@ -6,52 +6,30 @@ export type Json =
   | { [key: string]: Json | undefined }
   | Json[];
 
-export type Database = {
 export type Database = {
   public: {
     Tables: {
       categories: {
         Row: {
-          category: string | null
-          color_hex: string
-          created_at: string
-          id: number
-        }
-        Insert: {
-          category?: string | null
-          color_hex: string
-          created_at?: string
-          id?: number
-        }
-        Update: {
-          category?: string | null
-          color_hex?: string
-          created_at?: string
-          id?: number
-        }
-        Relationships: []
-      }
-      display_media: {
-        Row: {
-          category: string | null
-          color: string | null
-          created_at: string
-          id: number
-        }
+          category: string | null;
+          color_hex: string;
+          created_at: string;
+          id: number;
+        };
         Insert: {
-          category?: string | null
-          color?: string | null
-          created_at?: string
-          id?: number
-        }
+          category?: string | null;
+          color_hex: string;
+          created_at?: string;
+          id?: number;
+        };
         Update: {
-          category?: string | null
-          color?: string | null
-          created_at?: string
-          id?: number
-        }
-        Relationships: []
-      }
+          category?: string | null;
+          color_hex?: string;
+          created_at?: string;
+          id?: number;
+        };
+        Relationships: [];
+      };
       display_media: {
         Row: {
           display_id: string;
@@ -77,83 +55,83 @@ export type Database = {
             referencedColumns: ['id'];
           },
           {
-            foreignKeyName: "display_media_media_id_fkey"
-            columns: ["media_id"]
-            isOneToOne: false
-            referencedRelation: "media"
-            referencedColumns: ["id"]
+            foreignKeyName: 'display_media_media_id_fkey';
+            columns: ['media_id'];
+            isOneToOne: false;
+            referencedRelation: 'media';
+            referencedColumns: ['id'];
           },
-        ]
-      }
+        ];
+      };
       displays: {
         Row: {
-          coordinates: Json | null
-          created_at: string
-          description: string
-          id: string
-          summary: string | null
-          title: string
-          updated_at: string | null
-        }
+          coordinates: Json | null;
+          created_at: string;
+          description: string;
+          id: string;
+          summary: string | null;
+          title: string;
+          updated_at: string | null;
+        };
         Insert: {
-          coordinates?: Json | null
-          created_at?: string
-          description?: string
-          id: string
-          summary?: string | null
-          title?: string
-          updated_at?: string | null
-        }
+          coordinates?: Json | null;
+          created_at?: string;
+          description?: string;
+          id: string;
+          summary?: string | null;
+          title?: string;
+          updated_at?: string | null;
+        };
         Update: {
-          coordinates?: Json | null
-          created_at?: string
-          description?: string
-          id?: string
-          summary?: string | null
-          title?: string
-          updated_at?: string | null
-        }
-        Relationships: []
-      }
+          coordinates?: Json | null;
+          created_at?: string;
+          description?: string;
+          id?: string;
+          summary?: string | null;
+          title?: string;
+          updated_at?: string | null;
+        };
+        Relationships: [];
+      };
       emails: {
         Row: {
-          emails: string | null
-          id: number
-        }
+          emails: string | null;
+          id: number;
+        };
         Insert: {
-          emails?: string | null
-          id?: number
-        }
+          emails?: string | null;
+          id?: number;
+        };
         Update: {
-          emails?: string | null
-          id?: number
-        }
-        Relationships: []
-      }
+          emails?: string | null;
+          id?: number;
+        };
+        Relationships: [];
+      };
       exhibits: {
         Row: {
-          coordinates: Json | null
-          description: string
-          id: string
-          image: string | null
-          title: string
-        }
+          coordinates: Json | null;
+          description: string;
+          id: string;
+          image: string | null;
+          title: string;
+        };
         Insert: {
-          coordinates?: Json | null
-          description: string
-          id?: string
-          image?: string | null
-          title: string
-        }
+          coordinates?: Json | null;
+          description: string;
+          id?: string;
+          image?: string | null;
+          title: string;
+        };
         Update: {
-          coordinates?: Json | null
-          description?: string
-          id?: string
-          image?: string | null
-          title?: string
-        }
-        Relationships: []
-      }
+          coordinates?: Json | null;
+          description?: string;
+          id?: string;
+          image?: string | null;
+          title?: string;
+        };
+        Relationships: [];
+      };
       media: {
         Row: {
           created_at: string;
@@ -172,39 +150,39 @@ export type Database = {
           url?: string;
         };
         Update: {
-          created_at?: string
-          id?: string
-          text?: string | null
-          title?: string | null
-          type?: string | null
-          url?: string
-        }
-        Relationships: []
-      }
+          created_at?: string;
+          id?: string;
+          text?: string | null;
+          title?: string | null;
+          type?: string | null;
+          url?: string;
+        };
+        Relationships: [];
+      };
       news: {
         Row: {
-          content_link: string
-          created_at: string
-          id: string
-          title: string
-          updated_at: string | null
-        }
+          content_link: string;
+          created_at: string;
+          id: string;
+          title: string;
+          updated_at: string | null;
+        };
         Insert: {
-          content_link: string
-          created_at?: string
-          id?: string
-          title: string
-          updated_at?: string | null
-        }
+          content_link: string;
+          created_at?: string;
+          id?: string;
+          title: string;
+          updated_at?: string | null;
+        };
         Update: {
-          content_link?: string
-          created_at?: string
-          id?: string
-          title?: string
-          updated_at?: string | null
-        }
-        Relationships: []
-      }
+          content_link?: string;
+          created_at?: string;
+          id?: string;
+          title?: string;
+          updated_at?: string | null;
+        };
+        Relationships: [];
+      };
       spotlight_recommendations: {
         Row: {
           source_display_id: string;
@@ -227,14 +205,14 @@ export type Database = {
             referencedColumns: ['id'];
           },
           {
-            foreignKeyName: "spotlight_recommendations_target_display_id_fkey"
-            columns: ["target_display_id"]
-            isOneToOne: false
-            referencedRelation: "tours"
-            referencedColumns: ["id"]
+            foreignKeyName: 'spotlight_recommendations_target_display_id_fkey';
+            columns: ['target_display_id'];
+            isOneToOne: false;
+            referencedRelation: 'tours';
+            referencedColumns: ['id'];
           },
-        ]
-      }
+        ];
+      };
       tour_displays: {
         Row: {
           display_id: string;
@@ -260,14 +238,14 @@ export type Database = {
             referencedColumns: ['id'];
           },
           {
-            foreignKeyName: "tour_displays_tour_id_fkey"
-            columns: ["tour_id"]
-            isOneToOne: false
-            referencedRelation: "tours"
-            referencedColumns: ["id"]
+            foreignKeyName: 'tour_displays_tour_id_fkey';
+            columns: ['tour_id'];
+            isOneToOne: false;
+            referencedRelation: 'tours';
+            referencedColumns: ['id'];
           },
-        ]
-      }
+        ];
+      };
       tour_media: {
         Row: {
           media_id: string;
@@ -290,223 +268,223 @@ export type Database = {
             referencedColumns: ['id'];
           },
           {
-            foreignKeyName: "tour_media_tour_id_fkey"
-            columns: ["tour_id"]
-            isOneToOne: false
-            referencedRelation: "tours"
-            referencedColumns: ["id"]
+            foreignKeyName: 'tour_media_tour_id_fkey';
+            columns: ['tour_id'];
+            isOneToOne: false;
+            referencedRelation: 'tours';
+            referencedColumns: ['id'];
           },
-        ]
-      }
+        ];
+      };
       tours: {
         Row: {
-          category: Database["public"]["Enums"]["tour_category"]
-          coordinates: Json | null
-          created_at: string
-          description: string | null
-          id: string
-          name: string
-          preview_text: string | null
-          spotlight: boolean
-          stop_count: number | null
-        }
+          category: Database['public']['Enums']['tour_category'];
+          coordinates: Json | null;
+          created_at: string;
+          description: string | null;
+          id: string;
+          name: string;
+          preview_text: string | null;
+          spotlight: boolean;
+          stop_count: number | null;
+        };
         Insert: {
-          category?: Database["public"]["Enums"]["tour_category"]
-          coordinates?: Json | null
-          created_at?: string
-          description?: string | null
-          id?: string
-          name: string
-          preview_text?: string | null
-          spotlight?: boolean
-          stop_count?: number | null
-        }
+          category?: Database['public']['Enums']['tour_category'];
+          coordinates?: Json | null;
+          created_at?: string;
+          description?: string | null;
+          id?: string;
+          name: string;
+          preview_text?: string | null;
+          spotlight?: boolean;
+          stop_count?: number | null;
+        };
         Update: {
-          category?: Database["public"]["Enums"]["tour_category"]
-          coordinates?: Json | null
-          created_at?: string
-          description?: string | null
-          id?: string
-          name?: string
-          preview_text?: string | null
-          spotlight?: boolean
-          stop_count?: number | null
-        }
-        Relationships: []
-      }
-    }
+          category?: Database['public']['Enums']['tour_category'];
+          coordinates?: Json | null;
+          created_at?: string;
+          description?: string | null;
+          id?: string;
+          name?: string;
+          preview_text?: string | null;
+          spotlight?: boolean;
+          stop_count?: number | null;
+        };
+        Relationships: [];
+      };
+    };
     Views: {
       [_ in never]: never;
     };
     Functions: {
       fetch_recommended_spotlights: {
         Args: {
-          source_spotlight_id: string
-        }
+          source_spotlight_id: string;
+        };
         Returns: {
-          id: string
-          name: string
-          description: string
-          created_at: string
-          stop_count: number
-          spotlight: boolean
-          preview_text: string
-          coordinates: Json
-          category: Database["public"]["Enums"]["tour_category"]
-        }[]
-      }
+          id: string;
+          name: string;
+          description: string;
+          created_at: string;
+          stop_count: number;
+          spotlight: boolean;
+          preview_text: string;
+          coordinates: Json;
+          category: Database['public']['Enums']['tour_category'];
+        }[];
+      };
       fetchimagesfordisplay: {
         Args: {
-          displayid: string
-        }
+          displayid: string;
+        };
         Returns: {
-          id: string
-          url: string
-          type: string
-          title: string
-          text: string
-          created_at: string
-        }[]
-      }
+          id: string;
+          url: string;
+          type: string;
+          title: string;
+          text: string;
+          created_at: string;
+        }[];
+      };
       fetchimagesfortour: {
         Args: {
-          tourid: string
-        }
+          tourid: string;
+        };
         Returns: {
-          id: string
-          url: string
-          type: string
-          title: string
-          text: string
-          created_at: string
-        }[]
-      }
+          id: string;
+          url: string;
+          type: string;
+          title: string;
+          text: string;
+          created_at: string;
+        }[];
+      };
       get_category_color: {
         Args: {
-          category_in: string
-        }
-        Returns: string
-      }
+          category_in: string;
+        };
+        Returns: string;
+      };
       join_all_spotlights_with_media: {
-        Args: Record<PropertyKey, never>
+        Args: Record<PropertyKey, never>;
         Returns: {
-          id: string
-          name: string
-          description: string
-          created_at: string
-          stop_count: number
-          spotlight: boolean
-          preview_text: string
-          coordinates: Json
-          category: Database["public"]["Enums"]["tour_category"]
-          media_url: string
-        }[]
-      }
+          id: string;
+          name: string;
+          description: string;
+          created_at: string;
+          stop_count: number;
+          spotlight: boolean;
+          preview_text: string;
+          coordinates: Json;
+          category: Database['public']['Enums']['tour_category'];
+          media_url: string;
+        }[];
+      };
       join_tours_with_media: {
-        Args: Record<PropertyKey, never>
+        Args: Record<PropertyKey, never>;
         Returns: {
-          id: string
-          name: string
-          description: string
-          created_at: string
-          stop_count: number
-          spotlight: boolean
-          preview_text: string
-          url: string
-        }[]
-      }
-    }
+          id: string;
+          name: string;
+          description: string;
+          created_at: string;
+          stop_count: number;
+          spotlight: boolean;
+          preview_text: string;
+          url: string;
+        }[];
+      };
+    };
     Enums: {
-      media_type: "image" | "video" | "link"
+      media_type: 'image' | 'video' | 'link';
       tour_category:
-        | "BuildingsAndServices"
-        | "ParksAviariesEnclosures"
-        | "SiteFeatures"
-    }
+        | 'BuildingsAndServices'
+        | 'ParksAviariesEnclosures'
+        | 'SiteFeatures';
+    };
     CompositeTypes: {
-      [_ in never]: never
-    }
-  }
-}
+      [_ in never]: never;
+    };
+  };
+};
 
-type PublicSchema = Database[Extract<keyof Database, "public">]
+type PublicSchema = Database[Extract<keyof Database, 'public'>];
 
 export type Tables<
   PublicTableNameOrOptions extends
-    | keyof (PublicSchema["Tables"] & PublicSchema["Views"])
+    | keyof (PublicSchema['Tables'] & PublicSchema['Views'])
     | { schema: keyof Database },
   TableName extends PublicTableNameOrOptions extends { schema: keyof Database }
-    ? keyof (Database[PublicTableNameOrOptions["schema"]]["Tables"] &
-        Database[PublicTableNameOrOptions["schema"]]["Views"])
+    ? keyof (Database[PublicTableNameOrOptions['schema']]['Tables'] &
+        Database[PublicTableNameOrOptions['schema']]['Views'])
     : never = never,
 > = PublicTableNameOrOptions extends { schema: keyof Database }
-  ? (Database[PublicTableNameOrOptions["schema"]]["Tables"] &
-      Database[PublicTableNameOrOptions["schema"]]["Views"])[TableName] extends {
-      Row: infer R
+  ? (Database[PublicTableNameOrOptions['schema']]['Tables'] &
+      Database[PublicTableNameOrOptions['schema']]['Views'])[TableName] extends {
+      Row: infer R;
     }
     ? R
     : never
-  : PublicTableNameOrOptions extends keyof (PublicSchema["Tables"] &
-        PublicSchema["Views"])
-    ? (PublicSchema["Tables"] &
-        PublicSchema["Views"])[PublicTableNameOrOptions] extends {
-        Row: infer R
-      }
-      ? R
-      : never
+  : PublicTableNameOrOptions extends keyof (PublicSchema['Tables'] &
+      PublicSchema['Views'])
+  ? (PublicSchema['Tables'] &
+      PublicSchema['Views'])[PublicTableNameOrOptions] extends {
+      Row: infer R;
+    }
+    ? R
     : never
+  : never;
 
 export type TablesInsert<
   PublicTableNameOrOptions extends
-    | keyof PublicSchema["Tables"]
+    | keyof PublicSchema['Tables']
     | { schema: keyof Database },
   TableName extends PublicTableNameOrOptions extends { schema: keyof Database }
-    ? keyof Database[PublicTableNameOrOptions["schema"]]["Tables"]
+    ? keyof Database[PublicTableNameOrOptions['schema']]['Tables']
     : never = never,
 > = PublicTableNameOrOptions extends { schema: keyof Database }
-  ? Database[PublicTableNameOrOptions["schema"]]["Tables"][TableName] extends {
-      Insert: infer I
+  ? Database[PublicTableNameOrOptions['schema']]['Tables'][TableName] extends {
+      Insert: infer I;
     }
     ? I
     : never
-  : PublicTableNameOrOptions extends keyof PublicSchema["Tables"]
-    ? PublicSchema["Tables"][PublicTableNameOrOptions] extends {
-        Insert: infer I
-      }
-      ? I
-      : never
+  : PublicTableNameOrOptions extends keyof PublicSchema['Tables']
+  ? PublicSchema['Tables'][PublicTableNameOrOptions] extends {
+      Insert: infer I;
+    }
+    ? I
     : never
+  : never;
 
 export type TablesUpdate<
   PublicTableNameOrOptions extends
-    | keyof PublicSchema["Tables"]
+    | keyof PublicSchema['Tables']
     | { schema: keyof Database },
   TableName extends PublicTableNameOrOptions extends { schema: keyof Database }
-    ? keyof Database[PublicTableNameOrOptions["schema"]]["Tables"]
+    ? keyof Database[PublicTableNameOrOptions['schema']]['Tables']
     : never = never,
 > = PublicTableNameOrOptions extends { schema: keyof Database }
-  ? Database[PublicTableNameOrOptions["schema"]]["Tables"][TableName] extends {
-      Update: infer U
+  ? Database[PublicTableNameOrOptions['schema']]['Tables'][TableName] extends {
+      Update: infer U;
     }
     ? U
     : never
-  : PublicTableNameOrOptions extends keyof PublicSchema["Tables"]
-    ? PublicSchema["Tables"][PublicTableNameOrOptions] extends {
-        Update: infer U
-      }
-      ? U
-      : never
+  : PublicTableNameOrOptions extends keyof PublicSchema['Tables']
+  ? PublicSchema['Tables'][PublicTableNameOrOptions] extends {
+      Update: infer U;
+    }
+    ? U
     : never
+  : never;
 
 export type Enums<
   PublicEnumNameOrOptions extends
-    | keyof PublicSchema["Enums"]
+    | keyof PublicSchema['Enums']
     | { schema: keyof Database },
   EnumName extends PublicEnumNameOrOptions extends { schema: keyof Database }
-    ? keyof Database[PublicEnumNameOrOptions["schema"]]["Enums"]
+    ? keyof Database[PublicEnumNameOrOptions['schema']]['Enums']
     : never = never,
 > = PublicEnumNameOrOptions extends { schema: keyof Database }
-  ? Database[PublicEnumNameOrOptions["schema"]]["Enums"][EnumName]
-  : PublicEnumNameOrOptions extends keyof PublicSchema["Enums"]
-    ? PublicSchema["Enums"][PublicEnumNameOrOptions]
-    : never
+  ? Database[PublicEnumNameOrOptions['schema']]['Enums'][EnumName]
+  : PublicEnumNameOrOptions extends keyof PublicSchema['Enums']
+  ? PublicSchema['Enums'][PublicEnumNameOrOptions]
+  : never;

From 9d37b4e4e28bee5e762fd97c6a6620f34ecee35e Mon Sep 17 00:00:00 2001
From: Noah Hernandez <63211322+oahnh@users.noreply.github.com>
Date: Wed, 10 Apr 2024 19:20:42 -0700
Subject: [PATCH 09/21] refactor: add jsdoc, imports, change queries.tsx -> .ts

---
 package-lock.json                             |  83 +----------
 .../SiteMap/DisplayPreviewCard.tsx            | 133 +++++++++---------
 .../userComponents/SiteMap/SiteMap.tsx        |  28 ++--
 .../SiteMap/TourPreviewCard.tsx               |  86 ++++++-----
 .../category/{queries.tsx => queries.ts}      |  12 +-
 5 files changed, 123 insertions(+), 219 deletions(-)
 rename src/supabase/category/{queries.tsx => queries.ts} (90%)

diff --git a/package-lock.json b/package-lock.json
index 2443230b..28856d05 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -20,7 +20,6 @@
         "moment": "^2.30.1",
         "next": "latest",
         "node": "^21.7.1",
-        "npm": "^10.2.4",
         "react": "latest",
         "react-bootstrap": "^2.9.0",
         "react-dom": "latest",
@@ -3869,84 +3868,10 @@
       "version": "1.1.0",
       "license": "ISC"
     },
-    "node_modules/next/node_modules/@next/env": {
-      "version": "14.0.3",
-      "resolved": "https://registry.npmjs.org/@next/env/-/env-14.0.3.tgz",
-      "integrity": "sha512-7xRqh9nMvP5xrW4/+L0jgRRX+HoNRGnfJpD+5Wq6/13j3dsdzxO3BCXn7D3hMqsDb+vjZnJq+vI7+EtgrYZTeA=="
-    },
-    "node_modules/node": {
-      "version": "21.7.1",
-      "resolved": "https://registry.npmjs.org/node/-/node-21.7.1.tgz",
-      "integrity": "sha512-j6NFfbKy3DBuaJh2X8lRZmS59oLr2XRtt0rTa9VsFj3ZcGbeK7xp40gZaI92AqNuRv1aL5dRueNqL6YuZFcjJg==",
-      "hasInstallScript": true,
-      "dependencies": {
-        "node-bin-setup": "^1.0.0"
-      },
-      "bin": {
-        "node": "bin/node"
-      },
-      "engines": {
-        "npm": ">=5.0.0"
-      }
-    },
-    "node_modules/node-bin-setup": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/node-bin-setup/-/node-bin-setup-1.1.3.tgz",
-      "integrity": "sha512-opgw9iSCAzT2+6wJOETCpeRYAQxSopqQ2z+N6BXwIMsQQ7Zj5M8MaafQY8JMlolRR6R1UXg2WmhKp0p9lSOivg=="
-    },
-    "node_modules/node-domexception": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/node-domexception/-/node-domexception-1.0.0.tgz",
-      "integrity": "sha512-/jKZoMpw0F8GRwl4/eLROPA3cfcXtLApP0QzLmUT/HuPCZWyB7IY9ZrMeKw2O/nFIqPQB3PVM9aYm0F312AXDQ==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/postcss/"
-        },
-        {
-          "type": "tidelift",
-          "url": "https://tidelift.com/funding/github/npm/postcss"
-        },
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/ai"
-        }
-      ],
-      "dependencies": {
-        "nanoid": "^3.3.6",
-        "picocolors": "^1.0.0",
-        "source-map-js": "^1.0.2"
-      },
-      "engines": {
-        "node": "^10 || ^12 || >=14"
-      }
-    },
-    "node_modules/node": {
-      "version": "21.7.1",
-      "resolved": "https://registry.npmjs.org/node/-/node-21.7.1.tgz",
-      "integrity": "sha512-j6NFfbKy3DBuaJh2X8lRZmS59oLr2XRtt0rTa9VsFj3ZcGbeK7xp40gZaI92AqNuRv1aL5dRueNqL6YuZFcjJg==",
-      "hasInstallScript": true,
-      "dependencies": {
-        "node-bin-setup": "^1.0.0"
-      },
-      "bin": {
-        "node": "bin/node"
-      },
-      "engines": {
-        "npm": ">=5.0.0"
-      }
-    },
-    "node_modules/node-bin-setup": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/node-bin-setup/-/node-bin-setup-1.1.3.tgz",
-      "integrity": "sha512-opgw9iSCAzT2+6wJOETCpeRYAQxSopqQ2z+N6BXwIMsQQ7Zj5M8MaafQY8JMlolRR6R1UXg2WmhKp0p9lSOivg=="
-    },
-    "node_modules/node-domexception": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/node-domexception/-/node-domexception-1.0.0.tgz",
-      "integrity": "sha512-/jKZoMpw0F8GRwl4/eLROPA3cfcXtLApP0QzLmUT/HuPCZWyB7IY9ZrMeKw2O/nFIqPQB3PVM9aYm0F312AXDQ==",
-      "dev": true,
+    "node_modules/next/node_modules/postcss": {
+      "version": "8.4.31",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
+      "integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==",
       "funding": [
         {
           "type": "opencollective",
diff --git a/src/components/userComponents/SiteMap/DisplayPreviewCard.tsx b/src/components/userComponents/SiteMap/DisplayPreviewCard.tsx
index 823247ca..234379ab 100644
--- a/src/components/userComponents/SiteMap/DisplayPreviewCard.tsx
+++ b/src/components/userComponents/SiteMap/DisplayPreviewCard.tsx
@@ -15,14 +15,12 @@ interface DisplayCardProps {
 }
 
 /**
- * @param DisplayCardProps.display display to preview
- * @param DisplayCardProps.handleClick function to handle actions when clicked
- * @param DisplayCardProps.handleClose function to handle closing of preview card
- * @param DisplayCardProps.display.display
- * @param DisplayCardProps.display.handleClick
- * @param DisplayCardProps.display.handleClose
- * @param DisplayCardProps.display.tour
- * @returns preview card component to display within leaflet map container
+ * Display a preview card component.
+ * @param DisplayCardProps - The props for the display card component.
+ * @param DisplayCardProps.tour - The tour or exhibit to preview.
+ * @param DisplayCardProps.handleClick - The function to handle actions when clicked.
+ * @param DisplayCardProps.handleClose - The function to handle closing of the preview card.
+ * @returns The preview card component to display within the Leaflet map container.
  */
 function DisplayPreviewCard({
   tour,
@@ -32,7 +30,6 @@ 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
 
@@ -50,102 +47,98 @@ function DisplayPreviewCard({
   useEffect(() => {
     const fetchDetails = async () => {
       setLoading(true);
-  
-      let imageUrl = ''; 
-      let displayName = ''; 
-  
-      if ('name' in tour) {  // because title is name for type TourExhibit
-        // Fetch images for a tour
+
+      let imageUrl = '';
+      let displayName = '';
+
+      if ('name' in tour) {
         const images = await fetchImagesForTour(tour.id);
         if (images && images.length > 0) {
-          imageUrl = images[0].url; 
+          imageUrl = images[0].url;
         }
-        displayName = tour.name; 
-        setTourType('tour');
+        displayName = tour.name;
       } 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"
+              aria-label="Close preview card"
+              role="button"
+              tabIndex={0}
+              onClick={e => {
+                e.stopPropagation(); //  prevents the click from propagating to the parent link
+                handleClose();
+              }}
+              onKeyDown={e => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                  e.stopPropagation();
+                  handleClose();
+                }
+              }}
+            >
+              <CloseIcon />
             </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(); //  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" 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"
-  
-              >
+            <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>
-            </div>
+            </Link>
           </div>
         </div>
       </div>
-
-
+    </div>
   );
 }
 
diff --git a/src/components/userComponents/SiteMap/SiteMap.tsx b/src/components/userComponents/SiteMap/SiteMap.tsx
index 7cc46158..2559b877 100644
--- a/src/components/userComponents/SiteMap/SiteMap.tsx
+++ b/src/components/userComponents/SiteMap/SiteMap.tsx
@@ -10,7 +10,12 @@ import Control from './Control';
 import { fetchAllExhibits } from '../../../supabase/exhibits/queries';
 import { getCategoryColor1 } from '../../../supabase/category/queries';
 import RecenterMap from './MapInteractionHandler';
-import { DefaultMarkerIcon, SelectedMarkerIcon } from '../../../../public/icons';
+import {
+  DefaultMarkerIcon,
+  SelectedMarkerIcon,
+} from '../../../../public/icons';
+import ExhibitPreviewCard from './ExhibitPreviewCard';
+import TourPreviewCard from './TourPreviewCard';
 
 const center: LatLngExpression = {
   lat: 37.58748,
@@ -41,10 +46,10 @@ interface SiteMapProps {
 }
 
 /**
- * @param root0
- * @param root0.mode
- * @params mode - will
- * @returns Interactive map based on React Leaflet, holds the markers which lead to exhibits
+ * Render a site map component.
+ * @param SiteMapProps - The props for the site map component.
+ * @param SiteMapProps.mode - The mode for the site map, either 'tours' or 'exhibits'.
+ * @returns The site map component based on the provided mode.
  */
 function SiteMap({ mode }: SiteMapProps) {
   const [spotlightTours, setSpotlightTours] = useState<
@@ -56,7 +61,6 @@ function SiteMap({ mode }: SiteMapProps) {
   );
   const [mapCenter, setMapCenter] = useState<LatLngExpression>(center);
   const [selectedMarker, setSelectedMarker] = useState<number | null>(null);
-  // const [resetCenter, setResetCenter] = useState(center); // New state to trigger recentering
 
   // fetch tours where spotlight == True
   useEffect(() => {
@@ -86,8 +90,6 @@ function SiteMap({ mode }: SiteMapProps) {
             {},
           );
           setColorsMap(newColorsMap);
-
-          console.log('Colors Map:', newColorsMap); // Log here
         } else if (data && mode === 'exhibits') {
           const colors = await Promise.all(
             data.map(async item => ({
@@ -103,8 +105,6 @@ function SiteMap({ mode }: SiteMapProps) {
             {},
           );
           setColorsMap(newColorsMap);
-
-          console.log('Colors Map:', newColorsMap); // Log here
         }
         setSpotlightTours(data ?? []);
       } catch (error) {
@@ -175,14 +175,6 @@ function SiteMap({ mode }: SiteMapProps) {
               />
             );
           })}
-        {/* {selectedTour && (
-          <Control position="bottomright">
-            <DisplayPreviewCard
-              tour={selectedTour}
-              handleClose={handlePreviewClose}
-            />
-          </Control>
-        )} */}
         {selectedTour && (
           <Control position="bottomright">
             {mode === 'tours' ? (
diff --git a/src/components/userComponents/SiteMap/TourPreviewCard.tsx b/src/components/userComponents/SiteMap/TourPreviewCard.tsx
index c2ec981d..302c3a0c 100644
--- a/src/components/userComponents/SiteMap/TourPreviewCard.tsx
+++ b/src/components/userComponents/SiteMap/TourPreviewCard.tsx
@@ -12,26 +12,19 @@ interface TourCardProps {
   handleClose: () => void;
   handleClick?: () => void;
 }
-
 /**
- * @param TourCardProps.display display to preview
- * @param TourCardProps.handleClick function to handle actions when clicked
- * @param TourCardProps.handleClose function to handle closing of preview card
- * @param TourCardProps.display.display
- * @param TourCardProps.display.handleClick
- * @param TourCardProps.display.handleClose
- * @param TourCardProps.display.tour
- * @returns preview card component to display within leaflet map container
+ * Props for the tour preview card component.
+ * @param props - The props for the tour preview card.
+ * @param props.tour – tour to render preview
+ * @param props.handleClick – onClick function for preview card
+ * @param props.handleClose – close function for preview card
+ * @returns - The rendered tour preview card component.
  */
-function TourPreviewCard({
-  tour,
-  handleClick,
-  handleClose,
-}: TourCardProps) {
+function TourPreviewCard({ tour, handleClick, handleClose }: TourCardProps) {
   const [loading, setLoading] = useState<boolean>(false);
   const [previewImage, setPreviewImage] = useState<string>('');
   const [name1, setname1] = useState<string>('');
-  
+
   const { id, description, coordinates, category } = tour;
   // name, for tour title for exhibit
 
@@ -49,25 +42,24 @@ function TourPreviewCard({
   useEffect(() => {
     const fetchDetails = async () => {
       setLoading(true);
-  
-      let imageUrl = ''; 
-      let displayName = ''; 
-  
-    // Fetch images for a tour
-    const images = await fetchImagesForTour(tour.id);
-    if (images && images.length > 0) {
-        imageUrl = images[0].url; 
-    }
-    displayName = tour.name; 
-    // Set state variables
-    setPreviewImage(imageUrl);
-    setname1(displayName);
-    setLoading(false);
+
+      let imageUrl = '';
+      let displayName = '';
+
+      // Fetch images for a tour
+      const images = await fetchImagesForTour(tour.id);
+      if (images && images.length > 0) {
+        imageUrl = images[0].url;
+      }
+      displayName = tour.name;
+      // Set state variables
+      setPreviewImage(imageUrl);
+      setname1(displayName);
+      setLoading(false);
     };
-  
+
     fetchDetails();
-  }, [tour]); 
-  
+  }, [tour]);
 
   /** route this to spotlights */
 
@@ -77,18 +69,16 @@ function TourPreviewCard({
         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 &&
+        {!loading && (
           <div className="relative w-[5.8125rem] z-10 h-full 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}
@@ -101,10 +91,21 @@ function TourPreviewCard({
           tabIndex={0}
         >
           <div className="">
-            <div className="flex justify-end items-center pt-2 pr-[0.5rem]" onClick={(e) => {
+            <div
+              aria-label="Close preview card"
+              className="flex justify-end items-center pt-2 pr-[0.5rem]"
+              role="button"
+              tabIndex={0}
+              onClick={e => {
                 e.stopPropagation(); //  prevents the click from propagating to the parent link
                 handleClose();
               }}
+              onKeyDown={e => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                  e.stopPropagation();
+                  handleClose();
+                }
+              }}
             >
               <svg
                 xmlns="http://www.w3.org/2000/svg"
@@ -123,21 +124,18 @@ function TourPreviewCard({
               </svg>
             </div>
             <Link href={`/spotlightPage/${id}`}>
-              <div className=' pl-[0.75rem] pr-[9.87] pt-[0rem] font-lato text-xs text-shadow bg-[#F173731A]  rounded-lg w-[8rem]'>
+              <div className=" pl-[0.75rem] pr-[9.87] pt-[0rem] font-lato text-xs text-shadow bg-[#F173731A]  rounded-lg w-[8rem]">
                 {category}
               </div>
 
-              <h3
-                className="relative truncate font-medium font-lato text-night pr-[0.31rem] pl-[0.75rem] pt-[0.3rem] pb-[0rem] text-base leading-normal"
-
-              >
+              <h3 className="relative truncate font-medium font-lato text-night pr-[0.31rem] pl-[0.75rem] pt-[0.3rem] 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>
-              <h6 className='relative pt-[0.2rem] pr-[1rem] pb-[0.4rem] text-silver font-lato text-xs text-right'>
+              <h6 className="relative pt-[0.2rem] pr-[1rem] pb-[0.4rem] text-silver font-lato text-xs text-right">
                 Go to virtual tour `&gt;`
               </h6>
             </Link>
diff --git a/src/supabase/category/queries.tsx b/src/supabase/category/queries.ts
similarity index 90%
rename from src/supabase/category/queries.tsx
rename to src/supabase/category/queries.ts
index 3354b73f..62ff7d26 100644
--- a/src/supabase/category/queries.tsx
+++ b/src/supabase/category/queries.ts
@@ -1,14 +1,10 @@
-'use client';
-
 import supabase from '../client';
 
-/**
- *
- * @param category_in
- */
 // Assume this function is in `supabase/category/queries.js`
 /**
  *
+ * @param category category to retreive color
+ * @returns color for category, else null
  */
 // eslint-disable-next-line import/prefer-default-export
 export async function getCategoryColor1(category: string) {
@@ -27,10 +23,10 @@ export async function getCategoryColor1(category: string) {
         if (data && data.length > 0 && data[0].color_hex) {
             console.log(`Color for ${category}:`, data[0].color_hex);
             return data[0].color_hex;
-        } else {
+        } 
             console.log("No matching category found or color_hex is undefined");
             return null; // Return null if no matching data found
-        }
+        
     } catch (error) {
         console.error(`An unexpected error occurred:`, error);
         return null; // Return null on unexpected error

From a0d3c1c0c0c0253947c9e6deffa6e1e3d7ee3cc8 Mon Sep 17 00:00:00 2001
From: jxmoose <justin.xue7@gmail.com>
Date: Thu, 11 Apr 2024 15:50:27 -0700
Subject: [PATCH 10/21] edited to accomodate database changes for categories
 and exhibits

---
 .../SiteMap/DisplayPreviewCard.tsx            |  17 +-
 .../SiteMap/ExhibitPreviewCard.tsx            |  14 +-
 .../userComponents/SiteMap/SiteMap.tsx        |  25 +-
 src/supabase/category/queries.ts              |  23 +-
 src/supabase/exhibits/queries.tsx             |   4 +-
 src/types/supabase.ts                         | 746 +++++++++---------
 src/types/types.ts                            |  10 +-
 7 files changed, 450 insertions(+), 389 deletions(-)

diff --git a/src/components/userComponents/SiteMap/DisplayPreviewCard.tsx b/src/components/userComponents/SiteMap/DisplayPreviewCard.tsx
index 234379ab..434bc743 100644
--- a/src/components/userComponents/SiteMap/DisplayPreviewCard.tsx
+++ b/src/components/userComponents/SiteMap/DisplayPreviewCard.tsx
@@ -3,13 +3,13 @@ import { LatLngExpression } from 'leaflet';
 import { useMapEvents } from 'react-leaflet';
 import Link from 'next/link';
 import Image from 'next/image';
-import { ExhibitRow, TourRow } from '../../../types/types';
+import { ExhibitWithCategoryRow, TourRow } from '../../../types/types';
 import { fetchImagesForTour } from '../../../supabase/media/queries';
 import { fetchExhibitImage } from '../../../supabase/exhibits/queries';
 import { CloseIcon } from '../../../../public/icons';
 
 interface DisplayCardProps {
-  tour: TourRow | ExhibitRow;
+  tour: TourRow | ExhibitWithCategoryRow;
   handleClose: () => void;
   handleClick?: () => void;
 }
@@ -58,12 +58,13 @@ function DisplayPreviewCard({
         }
         displayName = tour.name;
       } else {
-        // Handle as an ExhibitRow
-        const imageObj = await fetchExhibitImage(tour.id);
-        if (imageObj) {
-          imageUrl = imageObj.image;
-        }
-        displayName = tour.title;
+        // Handle as an ExhibitWithCategoryRow
+        // const imageObj = await fetchExhibitImage(tour.id);
+        // if (imageObj) {
+        imageUrl = tour.image;
+        console.log(tour)
+        // }
+        displayName = tour.category;
       }
 
       // Set state variables
diff --git a/src/components/userComponents/SiteMap/ExhibitPreviewCard.tsx b/src/components/userComponents/SiteMap/ExhibitPreviewCard.tsx
index 3e34511e..959f27f2 100644
--- a/src/components/userComponents/SiteMap/ExhibitPreviewCard.tsx
+++ b/src/components/userComponents/SiteMap/ExhibitPreviewCard.tsx
@@ -3,12 +3,12 @@ import { LatLngExpression } from 'leaflet';
 import { useMapEvents } from 'react-leaflet';
 import Link from 'next/link';
 import Image from 'next/image';
-import { ExhibitRow } from '../../../types/types';
+import { ExhibitWithCategoryRow } from '../../../types/types';
 
 import { fetchExhibitImage } from '../../../supabase/exhibits/queries';
 
 interface ExhibitCardProps {
-  tour: ExhibitRow;
+  tour: ExhibitWithCategoryRow;
   handleClose: () => void;
   handleClick?: () => void;
 }
@@ -54,11 +54,11 @@ function ExhibitPreviewCard({
       let displayName = ''; 
   
 
-    const imageObj = await fetchExhibitImage(tour.id); 
-    if (imageObj) {
-        imageUrl = imageObj.image; 
-    }
-    displayName = tour.title;
+    // const imageObj = await fetchExhibitImage(tour.id); 
+    // if (imageObj) {
+        imageUrl = tour.image; 
+    // }
+    displayName = tour.category;
 
       
   
diff --git a/src/components/userComponents/SiteMap/SiteMap.tsx b/src/components/userComponents/SiteMap/SiteMap.tsx
index 2559b877..3113b533 100644
--- a/src/components/userComponents/SiteMap/SiteMap.tsx
+++ b/src/components/userComponents/SiteMap/SiteMap.tsx
@@ -4,8 +4,8 @@ import L, { LatLngExpression } from 'leaflet';
 import React, { useEffect, useState } from 'react';
 import { LayersControl, MapContainer, TileLayer, Marker } from 'react-leaflet';
 import { renderToStaticMarkup } from 'react-dom/server';
-import { fetchSpotlightTours } from '../../../supabase/tours/queries';
-import { ExhibitRow, TourRow } from '../../../types/types';
+import { fetchAllSpotlights } from '../../../supabase/tours/queries';
+import { ExhibitWithCategoryRow, TourRow } from '../../../types/types';
 import Control from './Control';
 import { fetchAllExhibits } from '../../../supabase/exhibits/queries';
 import { getCategoryColor1 } from '../../../supabase/category/queries';
@@ -53,10 +53,10 @@ interface SiteMapProps {
  */
 function SiteMap({ mode }: SiteMapProps) {
   const [spotlightTours, setSpotlightTours] = useState<
-    TourRow[] | ExhibitRow[] | null
+    TourRow[] | ExhibitWithCategoryRow[] | null
   >(null);
   const [colorsMap, setColorsMap] = useState<{ [key: string]: string }>({});
-  const [selectedTour, setSelectedTour] = useState<TourRow | ExhibitRow | null>(
+  const [selectedTour, setSelectedTour] = useState<TourRow | ExhibitWithCategoryRow | null>(
     null,
   );
   const [mapCenter, setMapCenter] = useState<LatLngExpression>(center);
@@ -71,7 +71,7 @@ function SiteMap({ mode }: SiteMapProps) {
       try {
         let data;
         if (mode === 'tours') {
-          data = await fetchSpotlightTours();
+          data = await fetchAllSpotlights();
         } else if (mode === 'exhibits') {
           data = await fetchAllExhibits();
         }
@@ -79,7 +79,7 @@ function SiteMap({ mode }: SiteMapProps) {
           const colors = await Promise.all(
             data.map(async item => ({
               id: item.id,
-              color: await getCategoryColor1(item.category),
+              color: await getCategoryColor1(item.id),
             })),
           );
           const newColorsMap = colors.reduce(
@@ -88,15 +88,17 @@ function SiteMap({ mode }: SiteMapProps) {
               [curr.id]: curr.color,
             }),
             {},
-          );
+          );   
           setColorsMap(newColorsMap);
         } else if (data && mode === 'exhibits') {
+          console.log(data);
           const colors = await Promise.all(
             data.map(async item => ({
               id: item.id,
-              color: await getCategoryColor1(item.title),
+              color: await getCategoryColor1(item.id),
             })),
           );
+          console.log(colors);
           const newColorsMap = colors.reduce(
             (acc, curr) => ({
               ...acc,
@@ -104,7 +106,9 @@ function SiteMap({ mode }: SiteMapProps) {
             }),
             {},
           );
+          console.log("COLOR MAP!!");
           setColorsMap(newColorsMap);
+          console.log(newColorsMap);
         }
         setSpotlightTours(data ?? []);
       } catch (error) {
@@ -126,7 +130,7 @@ function SiteMap({ mode }: SiteMapProps) {
   }, [selectedTour]);
 
   const handleMarkerSelect = (
-    tour: TourRow | ExhibitRow,
+    tour: TourRow | ExhibitWithCategoryRow,
     markerIndex: number,
   ) => {
     setSelectedTour(tour);
@@ -158,6 +162,7 @@ function SiteMap({ mode }: SiteMapProps) {
         {spotlightTours &&
           spotlightTours.map((tour, i) => {
             // Fetch the color for this tour/exhibit; fallback to a default color if not found
+            console.log(tour);
             const color = colorsMap[tour.id] || '#F17373'; // Fallback color
             return (
               <Marker
@@ -184,7 +189,7 @@ function SiteMap({ mode }: SiteMapProps) {
               />
             ) : (
               <ExhibitPreviewCard
-                tour={selectedTour as ExhibitRow} // Assuming you have proper type checks or type casting
+                tour={selectedTour as ExhibitWithCategoryRow} // Assuming you have proper type checks or type casting
                 handleClose={handlePreviewClose}
               />
             )}
diff --git a/src/supabase/category/queries.ts b/src/supabase/category/queries.ts
index 62ff7d26..f3778c7d 100644
--- a/src/supabase/category/queries.ts
+++ b/src/supabase/category/queries.ts
@@ -1,18 +1,19 @@
 import supabase from '../client';
-
+import { CategoryRow } from '../../types/types';
 // Assume this function is in `supabase/category/queries.js`
 /**
  *
  * @param category category to retreive color
+ * @param id
  * @returns color for category, else null
  */
 // eslint-disable-next-line import/prefer-default-export
-export async function getCategoryColor1(category: string) {
+export async function getCategoryColor1(id: string|number) {
     try {
         const { data, error } = await supabase
             .from('categories') 
             .select('color_hex')
-            .eq('category', category); 
+            .eq('id', id); 
 
         if (error) {
             console.error("Error fetching from Supabase:", error.message);
@@ -21,7 +22,7 @@ export async function getCategoryColor1(category: string) {
 
         // Check if data array is not empty
         if (data && data.length > 0 && data[0].color_hex) {
-            console.log(`Color for ${category}:`, data[0].color_hex);
+            // console.log(`Color for ${category}:`, data[0].color_hex);
             return data[0].color_hex;
         } 
             console.log("No matching category found or color_hex is undefined");
@@ -31,4 +32,16 @@ export async function getCategoryColor1(category: string) {
         console.error(`An unexpected error occurred:`, error);
         return null; // Return null on unexpected error
     }
-}
\ No newline at end of file
+}
+
+/**
+ * Fetches all categories from the database.
+ * @returns A promise that resolves to an array of ExhibitRow objects.
+ */
+export async function fetchAllCategories(): Promise<CategoryRow[]> {
+    const { data, error } = await supabase.from('categories').select('*');
+    if (error) {
+      throw new Error(error.message);
+    }
+    return data;
+  }
\ No newline at end of file
diff --git a/src/supabase/exhibits/queries.tsx b/src/supabase/exhibits/queries.tsx
index 7ce896d3..958b620a 100644
--- a/src/supabase/exhibits/queries.tsx
+++ b/src/supabase/exhibits/queries.tsx
@@ -7,8 +7,8 @@ import { ExhibitRow } from '../../types/types';
  * Fetches all tours from the database.
  * @returns A promise that resolves to an array of ExhibitRow objects.
  */
-export async function fetchAllExhibits(): Promise<ExhibitRow[]> {
-  const { data, error } = await supabase.from('exhibits').select('*');
+export async function fetchAllExhibits() {
+  const { data, error } = await supabase.rpc('get_exhibit_details');
   if (error) {
     throw new Error(error.message);
   }
diff --git a/src/types/supabase.ts b/src/types/supabase.ts
index 3d2d2ff7..d218ee27 100644
--- a/src/types/supabase.ts
+++ b/src/types/supabase.ts
@@ -4,487 +4,521 @@ export type Json =
   | boolean
   | null
   | { [key: string]: Json | undefined }
-  | Json[];
+  | Json[]
 
 export type Database = {
   public: {
     Tables: {
       categories: {
         Row: {
-          category: string | null;
-          color_hex: string;
-          created_at: string;
-          id: number;
-        };
+          category: string | null
+          color_hex: string
+          created_at: string
+          description: string
+          id: number
+          image: string
+        }
         Insert: {
-          category?: string | null;
-          color_hex: string;
-          created_at?: string;
-          id?: number;
-        };
+          category?: string | null
+          color_hex: string
+          created_at?: string
+          description: string
+          id?: number
+          image: string
+        }
         Update: {
-          category?: string | null;
-          color_hex?: string;
-          created_at?: string;
-          id?: number;
-        };
-        Relationships: [];
-      };
+          category?: string | null
+          color_hex?: string
+          created_at?: string
+          description?: string
+          id?: number
+          image?: string
+        }
+        Relationships: []
+      }
       display_media: {
         Row: {
-          display_id: string;
-          media_id: string;
-          media_placement: string | null;
-        };
+          display_id: string
+          media_id: string
+          media_placement: string | null
+        }
         Insert: {
-          display_id: string;
-          media_id: string;
-          media_placement?: string | null;
-        };
+          display_id: string
+          media_id: string
+          media_placement?: string | null
+        }
         Update: {
-          display_id?: string;
-          media_id?: string;
-          media_placement?: string | null;
-        };
+          display_id?: string
+          media_id?: string
+          media_placement?: string | null
+        }
         Relationships: [
           {
-            foreignKeyName: 'display_media_display_id_fkey';
-            columns: ['display_id'];
-            isOneToOne: false;
-            referencedRelation: 'displays';
-            referencedColumns: ['id'];
+            foreignKeyName: "display_media_display_id_fkey"
+            columns: ["display_id"]
+            isOneToOne: false
+            referencedRelation: "displays"
+            referencedColumns: ["id"]
           },
           {
-            foreignKeyName: 'display_media_media_id_fkey';
-            columns: ['media_id'];
-            isOneToOne: false;
-            referencedRelation: 'media';
-            referencedColumns: ['id'];
+            foreignKeyName: "display_media_media_id_fkey"
+            columns: ["media_id"]
+            isOneToOne: false
+            referencedRelation: "media"
+            referencedColumns: ["id"]
           },
-        ];
-      };
+        ]
+      }
       displays: {
         Row: {
-          coordinates: Json | null;
-          created_at: string;
-          description: string;
-          id: string;
-          summary: string | null;
-          title: string;
-          updated_at: string | null;
-        };
+          coordinates: Json | null
+          created_at: string
+          description: string
+          id: string
+          title: string
+          updated_at: string | null
+        }
         Insert: {
-          coordinates?: Json | null;
-          created_at?: string;
-          description?: string;
-          id: string;
-          summary?: string | null;
-          title?: string;
-          updated_at?: string | null;
-        };
+          coordinates?: Json | null
+          created_at?: string
+          description?: string
+          id?: string
+          title?: string
+          updated_at?: string | null
+        }
         Update: {
-          coordinates?: Json | null;
-          created_at?: string;
-          description?: string;
-          id?: string;
-          summary?: string | null;
-          title?: string;
-          updated_at?: string | null;
-        };
-        Relationships: [];
-      };
+          coordinates?: Json | null
+          created_at?: string
+          description?: string
+          id?: string
+          title?: string
+          updated_at?: string | null
+        }
+        Relationships: []
+      }
       emails: {
         Row: {
-          emails: string | null;
-          id: number;
-        };
+          emails: string | null
+          id: number
+        }
         Insert: {
-          emails?: string | null;
-          id?: number;
-        };
+          emails?: string | null
+          id?: number
+        }
         Update: {
-          emails?: string | null;
-          id?: number;
-        };
-        Relationships: [];
-      };
+          emails?: string | null
+          id?: number
+        }
+        Relationships: []
+      }
       exhibits: {
         Row: {
-          coordinates: Json | null;
-          description: string;
-          id: string;
-          image: string | null;
-          title: string;
-        };
+          category_id: number
+          coordinates: Json | null
+          id: string
+          title: string
+        }
         Insert: {
-          coordinates?: Json | null;
-          description: string;
-          id?: string;
-          image?: string | null;
-          title: string;
-        };
+          category_id: number
+          coordinates?: Json | null
+          id?: string
+          title: string
+        }
         Update: {
-          coordinates?: Json | null;
-          description?: string;
-          id?: string;
-          image?: string | null;
-          title?: string;
-        };
-        Relationships: [];
-      };
+          category_id?: number
+          coordinates?: Json | null
+          id?: string
+          title?: string
+        }
+        Relationships: [
+          {
+            foreignKeyName: "public_exhibits_category_id_fkey"
+            columns: ["category_id"]
+            isOneToOne: false
+            referencedRelation: "categories"
+            referencedColumns: ["id"]
+          },
+        ]
+      }
       media: {
         Row: {
-          created_at: string;
-          id: string;
-          text: string | null;
-          title: string | null;
-          type: string | null;
-          url: string;
-        };
+          created_at: string
+          id: string
+          text: string | null
+          title: string | null
+          type: string | null
+          url: string
+        }
         Insert: {
-          created_at?: string;
-          id?: string;
-          text?: string | null;
-          title?: string | null;
-          type?: string | null;
-          url?: string;
-        };
+          created_at?: string
+          id?: string
+          text?: string | null
+          title?: string | null
+          type?: string | null
+          url?: string
+        }
         Update: {
-          created_at?: string;
-          id?: string;
-          text?: string | null;
-          title?: string | null;
-          type?: string | null;
-          url?: string;
-        };
-        Relationships: [];
-      };
+          created_at?: string
+          id?: string
+          text?: string | null
+          title?: string | null
+          type?: string | null
+          url?: string
+        }
+        Relationships: []
+      }
       news: {
         Row: {
-          content_link: string;
-          created_at: string;
-          id: string;
-          title: string;
-          updated_at: string | null;
-        };
+          content_link: string
+          created_at: string
+          id: string
+          title: string
+          updated_at: string | null
+        }
         Insert: {
-          content_link: string;
-          created_at?: string;
-          id?: string;
-          title: string;
-          updated_at?: string | null;
-        };
+          content_link: string
+          created_at?: string
+          id?: string
+          title: string
+          updated_at?: string | null
+        }
         Update: {
-          content_link?: string;
-          created_at?: string;
-          id?: string;
-          title?: string;
-          updated_at?: string | null;
-        };
-        Relationships: [];
-      };
+          content_link?: string
+          created_at?: string
+          id?: string
+          title?: string
+          updated_at?: string | null
+        }
+        Relationships: []
+      }
       spotlight_recommendations: {
         Row: {
-          source_display_id: string;
-          target_display_id: string;
-        };
+          source_display_id: string
+          target_display_id: string
+        }
         Insert: {
-          source_display_id: string;
-          target_display_id: string;
-        };
+          source_display_id: string
+          target_display_id: string
+        }
         Update: {
-          source_display_id?: string;
-          target_display_id?: string;
-        };
+          source_display_id?: string
+          target_display_id?: string
+        }
         Relationships: [
           {
-            foreignKeyName: 'spotlight_recommendations_source_display_id_fkey';
-            columns: ['source_display_id'];
-            isOneToOne: false;
-            referencedRelation: 'tours';
-            referencedColumns: ['id'];
+            foreignKeyName: "spotlight_recommendations_source_display_id_fkey"
+            columns: ["source_display_id"]
+            isOneToOne: false
+            referencedRelation: "tours"
+            referencedColumns: ["id"]
           },
           {
-            foreignKeyName: 'spotlight_recommendations_target_display_id_fkey';
-            columns: ['target_display_id'];
-            isOneToOne: false;
-            referencedRelation: 'tours';
-            referencedColumns: ['id'];
+            foreignKeyName: "spotlight_recommendations_target_display_id_fkey"
+            columns: ["target_display_id"]
+            isOneToOne: false
+            referencedRelation: "tours"
+            referencedColumns: ["id"]
           },
-        ];
-      };
+        ]
+      }
       tour_displays: {
         Row: {
-          display_id: string;
-          display_order: number | null;
-          tour_id: string;
-        };
+          display_id: string
+          display_order: number | null
+          tour_id: string
+        }
         Insert: {
-          display_id: string;
-          display_order?: number | null;
-          tour_id: string;
-        };
+          display_id: string
+          display_order?: number | null
+          tour_id: string
+        }
         Update: {
-          display_id?: string;
-          display_order?: number | null;
-          tour_id?: string;
-        };
+          display_id?: string
+          display_order?: number | null
+          tour_id?: string
+        }
         Relationships: [
           {
-            foreignKeyName: 'tour_displays_display_id_fkey';
-            columns: ['display_id'];
-            isOneToOne: false;
-            referencedRelation: 'displays';
-            referencedColumns: ['id'];
+            foreignKeyName: "tour_displays_display_id_fkey"
+            columns: ["display_id"]
+            isOneToOne: false
+            referencedRelation: "displays"
+            referencedColumns: ["id"]
           },
           {
-            foreignKeyName: 'tour_displays_tour_id_fkey';
-            columns: ['tour_id'];
-            isOneToOne: false;
-            referencedRelation: 'tours';
-            referencedColumns: ['id'];
+            foreignKeyName: "tour_displays_tour_id_fkey"
+            columns: ["tour_id"]
+            isOneToOne: false
+            referencedRelation: "tours"
+            referencedColumns: ["id"]
           },
-        ];
-      };
+        ]
+      }
       tour_media: {
         Row: {
-          media_id: string;
-          tour_id: string;
-        };
+          media_id: string
+          tour_id: string
+        }
         Insert: {
-          media_id: string;
-          tour_id: string;
-        };
+          media_id: string
+          tour_id: string
+        }
         Update: {
-          media_id?: string;
-          tour_id?: string;
-        };
+          media_id?: string
+          tour_id?: string
+        }
         Relationships: [
           {
-            foreignKeyName: 'tour_media_media_id_fkey';
-            columns: ['media_id'];
-            isOneToOne: false;
-            referencedRelation: 'media';
-            referencedColumns: ['id'];
+            foreignKeyName: "tour_media_media_id_fkey"
+            columns: ["media_id"]
+            isOneToOne: false
+            referencedRelation: "media"
+            referencedColumns: ["id"]
           },
           {
-            foreignKeyName: 'tour_media_tour_id_fkey';
-            columns: ['tour_id'];
-            isOneToOne: false;
-            referencedRelation: 'tours';
-            referencedColumns: ['id'];
+            foreignKeyName: "tour_media_tour_id_fkey"
+            columns: ["tour_id"]
+            isOneToOne: false
+            referencedRelation: "tours"
+            referencedColumns: ["id"]
           },
-        ];
-      };
+        ]
+      }
       tours: {
         Row: {
-          category: Database['public']['Enums']['tour_category'];
-          coordinates: Json | null;
-          created_at: string;
-          description: string | null;
-          id: string;
-          name: string;
-          preview_text: string | null;
-          spotlight: boolean;
-          stop_count: number | null;
-        };
+          category: Database["public"]["Enums"]["tour_category"]
+          coordinates: Json | null
+          created_at: string
+          description: string | null
+          id: string
+          name: string
+          preview_text: string | null
+          spotlight: boolean
+          stop_count: number | null
+        }
         Insert: {
-          category?: Database['public']['Enums']['tour_category'];
-          coordinates?: Json | null;
-          created_at?: string;
-          description?: string | null;
-          id?: string;
-          name: string;
-          preview_text?: string | null;
-          spotlight?: boolean;
-          stop_count?: number | null;
-        };
+          category?: Database["public"]["Enums"]["tour_category"]
+          coordinates?: Json | null
+          created_at?: string
+          description?: string | null
+          id?: string
+          name: string
+          preview_text?: string | null
+          spotlight?: boolean
+          stop_count?: number | null
+        }
         Update: {
-          category?: Database['public']['Enums']['tour_category'];
-          coordinates?: Json | null;
-          created_at?: string;
-          description?: string | null;
-          id?: string;
-          name?: string;
-          preview_text?: string | null;
-          spotlight?: boolean;
-          stop_count?: number | null;
-        };
-        Relationships: [];
-      };
-    };
+          category?: Database["public"]["Enums"]["tour_category"]
+          coordinates?: Json | null
+          created_at?: string
+          description?: string | null
+          id?: string
+          name?: string
+          preview_text?: string | null
+          spotlight?: boolean
+          stop_count?: number | null
+        }
+        Relationships: []
+      }
+    }
     Views: {
-      [_ in never]: never;
-    };
+      [_ in never]: never
+    }
     Functions: {
       fetch_recommended_spotlights: {
         Args: {
-          source_spotlight_id: string;
-        };
+          source_spotlight_id: string
+        }
         Returns: {
-          id: string;
-          name: string;
-          description: string;
-          created_at: string;
-          stop_count: number;
-          spotlight: boolean;
-          preview_text: string;
-          coordinates: Json;
-          category: Database['public']['Enums']['tour_category'];
-        }[];
-      };
+          id: string
+          name: string
+          description: string
+          created_at: string
+          stop_count: number
+          spotlight: boolean
+          preview_text: string
+          coordinates: Json
+          category: Database["public"]["Enums"]["tour_category"]
+        }[]
+      }
       fetchimagesfordisplay: {
         Args: {
-          displayid: string;
-        };
+          displayid: string
+        }
         Returns: {
-          id: string;
-          url: string;
-          type: string;
-          title: string;
-          text: string;
-          created_at: string;
-        }[];
-      };
+          id: string
+          url: string
+          type: string
+          title: string
+          text: string
+          created_at: string
+        }[]
+      }
       fetchimagesfortour: {
         Args: {
-          tourid: string;
-        };
+          tourid: string
+        }
         Returns: {
-          id: string;
-          url: string;
-          type: string;
-          title: string;
-          text: string;
-          created_at: string;
-        }[];
-      };
+          id: string
+          url: string
+          type: string
+          title: string
+          text: string
+          created_at: string
+        }[]
+      }
       get_category_color: {
         Args: {
-          category_in: string;
-        };
-        Returns: string;
-      };
+          category_in: string
+        }
+        Returns: string
+      }
+      get_exhibit_details: {
+        Args: Record<PropertyKey, never>
+        Returns: {
+          coordinates: Json
+          id: number
+          category: string
+          description: string
+          image: string
+        }[]
+      }
+      get_non_spotlight_tours: {
+        Args: Record<PropertyKey, never>
+        Returns: {
+          id: string
+          name: string
+          description: string
+          created_at: string
+          stop_count: number
+          spotlight: boolean
+          preview_text: string
+          coordinates: Json
+          category: Database["public"]["Enums"]["tour_category"]
+        }[]
+      }
       join_all_spotlights_with_media: {
-        Args: Record<PropertyKey, never>;
+        Args: Record<PropertyKey, never>
         Returns: {
-          id: string;
-          name: string;
-          description: string;
-          created_at: string;
-          stop_count: number;
-          spotlight: boolean;
-          preview_text: string;
-          coordinates: Json;
-          category: Database['public']['Enums']['tour_category'];
-          media_url: string;
-        }[];
-      };
-      join_tours_with_media: {
-        Args: Record<PropertyKey, never>;
+          id: string
+          name: string
+          description: string
+          created_at: string
+          stop_count: number
+          spotlight: boolean
+          preview_text: string
+          coordinates: Json
+          category: Database["public"]["Enums"]["tour_category"]
+          media_url: string
+        }[]
+      }
+      join_all_tours_with_media: {
+        Args: Record<PropertyKey, never>
         Returns: {
-          id: string;
-          name: string;
-          description: string;
-          created_at: string;
-          stop_count: number;
-          spotlight: boolean;
-          preview_text: string;
-          url: string;
-        }[];
-      };
-    };
+          id: string
+          name: string
+          description: string
+          created_at: string
+          stop_count: number
+          spotlight: boolean
+          preview_text: string
+          coordinates: Json
+          category: Database["public"]["Enums"]["tour_category"]
+          media_url: string
+        }[]
+      }
+    }
     Enums: {
-      media_type: 'image' | 'video' | 'link';
+      media_type: "image" | "video" | "link"
       tour_category:
-        | 'BuildingsAndServices'
-        | 'ParksAviariesEnclosures'
-        | 'SiteFeatures';
-    };
+        | "BuildingsAndServices"
+        | "ParksAviariesEnclosures"
+        | "SiteFeatures"
+    }
     CompositeTypes: {
-      [_ in never]: never;
-    };
-  };
-};
+      [_ in never]: never
+    }
+  }
+}
 
-type PublicSchema = Database[Extract<keyof Database, 'public'>];
+type PublicSchema = Database[Extract<keyof Database, "public">]
 
 export type Tables<
   PublicTableNameOrOptions extends
-    | keyof (PublicSchema['Tables'] & PublicSchema['Views'])
+    | keyof (PublicSchema["Tables"] & PublicSchema["Views"])
     | { schema: keyof Database },
   TableName extends PublicTableNameOrOptions extends { schema: keyof Database }
-    ? keyof (Database[PublicTableNameOrOptions['schema']]['Tables'] &
-        Database[PublicTableNameOrOptions['schema']]['Views'])
+    ? keyof (Database[PublicTableNameOrOptions["schema"]]["Tables"] &
+        Database[PublicTableNameOrOptions["schema"]]["Views"])
     : never = never,
 > = PublicTableNameOrOptions extends { schema: keyof Database }
-  ? (Database[PublicTableNameOrOptions['schema']]['Tables'] &
-      Database[PublicTableNameOrOptions['schema']]['Views'])[TableName] extends {
-      Row: infer R;
+  ? (Database[PublicTableNameOrOptions["schema"]]["Tables"] &
+      Database[PublicTableNameOrOptions["schema"]]["Views"])[TableName] extends {
+      Row: infer R
     }
     ? R
     : never
-  : PublicTableNameOrOptions extends keyof (PublicSchema['Tables'] &
-      PublicSchema['Views'])
-  ? (PublicSchema['Tables'] &
-      PublicSchema['Views'])[PublicTableNameOrOptions] extends {
-      Row: infer R;
-    }
-    ? R
+  : PublicTableNameOrOptions extends keyof (PublicSchema["Tables"] &
+        PublicSchema["Views"])
+    ? (PublicSchema["Tables"] &
+        PublicSchema["Views"])[PublicTableNameOrOptions] extends {
+        Row: infer R
+      }
+      ? R
+      : never
     : never
-  : never;
 
 export type TablesInsert<
   PublicTableNameOrOptions extends
-    | keyof PublicSchema['Tables']
+    | keyof PublicSchema["Tables"]
     | { schema: keyof Database },
   TableName extends PublicTableNameOrOptions extends { schema: keyof Database }
-    ? keyof Database[PublicTableNameOrOptions['schema']]['Tables']
+    ? keyof Database[PublicTableNameOrOptions["schema"]]["Tables"]
     : never = never,
 > = PublicTableNameOrOptions extends { schema: keyof Database }
-  ? Database[PublicTableNameOrOptions['schema']]['Tables'][TableName] extends {
-      Insert: infer I;
+  ? Database[PublicTableNameOrOptions["schema"]]["Tables"][TableName] extends {
+      Insert: infer I
     }
     ? I
     : never
-  : PublicTableNameOrOptions extends keyof PublicSchema['Tables']
-  ? PublicSchema['Tables'][PublicTableNameOrOptions] extends {
-      Insert: infer I;
-    }
-    ? I
+  : PublicTableNameOrOptions extends keyof PublicSchema["Tables"]
+    ? PublicSchema["Tables"][PublicTableNameOrOptions] extends {
+        Insert: infer I
+      }
+      ? I
+      : never
     : never
-  : never;
 
 export type TablesUpdate<
   PublicTableNameOrOptions extends
-    | keyof PublicSchema['Tables']
+    | keyof PublicSchema["Tables"]
     | { schema: keyof Database },
   TableName extends PublicTableNameOrOptions extends { schema: keyof Database }
-    ? keyof Database[PublicTableNameOrOptions['schema']]['Tables']
+    ? keyof Database[PublicTableNameOrOptions["schema"]]["Tables"]
     : never = never,
 > = PublicTableNameOrOptions extends { schema: keyof Database }
-  ? Database[PublicTableNameOrOptions['schema']]['Tables'][TableName] extends {
-      Update: infer U;
+  ? Database[PublicTableNameOrOptions["schema"]]["Tables"][TableName] extends {
+      Update: infer U
     }
     ? U
     : never
-  : PublicTableNameOrOptions extends keyof PublicSchema['Tables']
-  ? PublicSchema['Tables'][PublicTableNameOrOptions] extends {
-      Update: infer U;
-    }
-    ? U
+  : PublicTableNameOrOptions extends keyof PublicSchema["Tables"]
+    ? PublicSchema["Tables"][PublicTableNameOrOptions] extends {
+        Update: infer U
+      }
+      ? U
+      : never
     : never
-  : never;
 
 export type Enums<
   PublicEnumNameOrOptions extends
-    | keyof PublicSchema['Enums']
+    | keyof PublicSchema["Enums"]
     | { schema: keyof Database },
   EnumName extends PublicEnumNameOrOptions extends { schema: keyof Database }
-    ? keyof Database[PublicEnumNameOrOptions['schema']]['Enums']
+    ? keyof Database[PublicEnumNameOrOptions["schema"]]["Enums"]
     : never = never,
 > = PublicEnumNameOrOptions extends { schema: keyof Database }
-  ? Database[PublicEnumNameOrOptions['schema']]['Enums'][EnumName]
-  : PublicEnumNameOrOptions extends keyof PublicSchema['Enums']
-  ? PublicSchema['Enums'][PublicEnumNameOrOptions]
-  : never;
+  ? Database[PublicEnumNameOrOptions["schema"]]["Enums"][EnumName]
+  : PublicEnumNameOrOptions extends keyof PublicSchema["Enums"]
+    ? PublicSchema["Enums"][PublicEnumNameOrOptions]
+    : never
diff --git a/src/types/types.ts b/src/types/types.ts
index 4be9f38f..36ed092b 100644
--- a/src/types/types.ts
+++ b/src/types/types.ts
@@ -4,7 +4,7 @@ This file is meant to create clean type definitions that we can export to keep t
 Any updates to supabase.ts should be reflected here (new tables).
 */
 
-import { Database } from './supabase';
+import { Database, Json } from './supabase';
 
 export type DisplayRow = Database['public']['Tables']['displays']['Row'];
 export type MediaRow = Database['public']['Tables']['media']['Row'];
@@ -14,9 +14,17 @@ export type TourMediaRow = Database['public']['Tables']['tour_media']['Row'];
 export type TourRow = Database['public']['Tables']['tours']['Row'];
 export type NewsRow = Database['public']['Tables']['news']['Row'];
 export type ExhibitRow = Database['public']['Tables']['exhibits']['Row'];
+export type CategoryRow = Database['public']['Tables']['categories']['Row'];
 export type SpotlightRow = {
   tour_row: TourRow;
   url: string;
 };
 export type SpotlightWithMediaRow = TourRow & { media_url: string };
 export type ToursWithMediaRow = TourRow & { media_url: string };
+export type ExhibitWithCategoryRow = {
+  id: number;
+  category: string;
+  description: string;
+  image: string;
+  coordinates: Json;
+};
\ No newline at end of file

From d48470319a5e028194f76e2f1287bd2721db2ba3 Mon Sep 17 00:00:00 2001
From: Miha <athmiha@berkeley.edu>
Date: Fri, 12 Apr 2024 13:53:49 -0700
Subject: [PATCH 11/21] claire's approval

---
 package-lock.json                             | 115 ++++++++++--------
 package.json                                  |   6 +-
 .../SiteMap/ExhibitPreviewCard.tsx            |   2 +-
 .../SiteMap/TourPreviewCard.tsx               |   2 +-
 4 files changed, 71 insertions(+), 54 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 28856d05..2aa21c5e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -18,11 +18,11 @@
         "i": "^0.3.7",
         "leaflet": "^1.9.4",
         "moment": "^2.30.1",
-        "next": "latest",
+        "next": "^14.2.1",
         "node": "^21.7.1",
-        "react": "latest",
+        "react": "^18.2.0",
         "react-bootstrap": "^2.9.0",
-        "react-dom": "latest",
+        "react-dom": "^18.2.0",
         "react-icons": "^4.12.0",
         "react-leaflet": "^4.2.1",
         "react-responsive-carousel": "^3.2.23",
@@ -308,9 +308,9 @@
       }
     },
     "node_modules/@next/env": {
-      "version": "14.1.4",
-      "resolved": "https://registry.npmjs.org/@next/env/-/env-14.1.4.tgz",
-      "integrity": "sha512-e7X7bbn3Z6DWnDi75UWn+REgAbLEqxI8Tq2pkFOFAMpWAWApz/YCUhtWMWn410h8Q2fYiYL7Yg5OlxMOCfFjJQ=="
+      "version": "14.2.1",
+      "resolved": "https://registry.npmjs.org/@next/env/-/env-14.2.1.tgz",
+      "integrity": "sha512-qsHJle3GU3CmVx7pUoXcghX4sRN+vINkbLdH611T8ZlsP//grzqVW87BSUgOZeSAD4q7ZdZicdwNe/20U2janA=="
     },
     "node_modules/@next/eslint-plugin-next": {
       "version": "14.1.4",
@@ -368,9 +368,9 @@
       }
     },
     "node_modules/@next/swc-darwin-arm64": {
-      "version": "14.1.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-14.1.4.tgz",
-      "integrity": "sha512-ubmUkbmW65nIAOmoxT1IROZdmmJMmdYvXIe8211send9ZYJu+SqxSnJM4TrPj9wmL6g9Atvj0S/2cFmMSS99jg==",
+      "version": "14.2.1",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-14.2.1.tgz",
+      "integrity": "sha512-kGjnjcIJehEcd3rT/3NAATJQndAEELk0J9GmGMXHSC75TMnvpOhONcjNHbjtcWE5HUQnIHy5JVkatrnYm1QhVw==",
       "cpu": [
         "arm64"
       ],
@@ -383,9 +383,9 @@
       }
     },
     "node_modules/@next/swc-darwin-x64": {
-      "version": "14.1.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-14.1.4.tgz",
-      "integrity": "sha512-b0Xo1ELj3u7IkZWAKcJPJEhBop117U78l70nfoQGo4xUSvv0PJSTaV4U9xQBLvZlnjsYkc8RwQN1HoH/oQmLlQ==",
+      "version": "14.2.1",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-14.2.1.tgz",
+      "integrity": "sha512-dAdWndgdQi7BK2WSXrx4lae7mYcOYjbHJUhvOUnJjMNYrmYhxbbvJ2xElZpxNxdfA6zkqagIB9He2tQk+l16ew==",
       "cpu": [
         "x64"
       ],
@@ -398,9 +398,9 @@
       }
     },
     "node_modules/@next/swc-linux-arm64-gnu": {
-      "version": "14.1.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-14.1.4.tgz",
-      "integrity": "sha512-457G0hcLrdYA/u1O2XkRMsDKId5VKe3uKPvrKVOyuARa6nXrdhJOOYU9hkKKyQTMru1B8qEP78IAhf/1XnVqKA==",
+      "version": "14.2.1",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-14.2.1.tgz",
+      "integrity": "sha512-2ZctfnyFOGvTkoD6L+DtQtO3BfFz4CapoHnyLTXkOxbZkVRgg3TQBUjTD/xKrO1QWeydeo8AWfZRg8539qNKrg==",
       "cpu": [
         "arm64"
       ],
@@ -413,9 +413,9 @@
       }
     },
     "node_modules/@next/swc-linux-arm64-musl": {
-      "version": "14.1.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-14.1.4.tgz",
-      "integrity": "sha512-l/kMG+z6MB+fKA9KdtyprkTQ1ihlJcBh66cf0HvqGP+rXBbOXX0dpJatjZbHeunvEHoBBS69GYQG5ry78JMy3g==",
+      "version": "14.2.1",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-14.2.1.tgz",
+      "integrity": "sha512-jazZXctiaanemy4r+TPIpFP36t1mMwWCKMsmrTRVChRqE6putyAxZA4PDujx0SnfvZHosjdkx9xIq9BzBB5tWg==",
       "cpu": [
         "arm64"
       ],
@@ -428,9 +428,9 @@
       }
     },
     "node_modules/@next/swc-linux-x64-gnu": {
-      "version": "14.1.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-14.1.4.tgz",
-      "integrity": "sha512-BapIFZ3ZRnvQ1uWbmqEGJuPT9cgLwvKtxhK/L2t4QYO7l+/DxXuIGjvp1x8rvfa/x1FFSsipERZK70pewbtJtw==",
+      "version": "14.2.1",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-14.2.1.tgz",
+      "integrity": "sha512-VjCHWCjsAzQAAo8lkBOLEIkBZFdfW+Z18qcQ056kL4KpUYc8o59JhLDCBlhg+hINQRgzQ2UPGma2AURGOH0+Qg==",
       "cpu": [
         "x64"
       ],
@@ -443,9 +443,9 @@
       }
     },
     "node_modules/@next/swc-linux-x64-musl": {
-      "version": "14.1.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-14.1.4.tgz",
-      "integrity": "sha512-mqVxTwk4XuBl49qn2A5UmzFImoL1iLm0KQQwtdRJRKl21ylQwwGCxJtIYo2rbfkZHoSKlh/YgztY0qH3wG1xIg==",
+      "version": "14.2.1",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-14.2.1.tgz",
+      "integrity": "sha512-7HZKYKvAp4nAHiHIbY04finRqjeYvkITOGOurP1aLMexIFG/1+oCnqhGogBdc4lao/lkMW1c+AkwWSzSlLasqw==",
       "cpu": [
         "x64"
       ],
@@ -458,9 +458,9 @@
       }
     },
     "node_modules/@next/swc-win32-arm64-msvc": {
-      "version": "14.1.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-14.1.4.tgz",
-      "integrity": "sha512-xzxF4ErcumXjO2Pvg/wVGrtr9QQJLk3IyQX1ddAC/fi6/5jZCZ9xpuL9Tzc4KPWMFq8GGWFVDMshZOdHGdkvag==",
+      "version": "14.2.1",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-14.2.1.tgz",
+      "integrity": "sha512-YGHklaJ/Cj/F0Xd8jxgj2p8po4JTCi6H7Z3Yics3xJhm9CPIqtl8erlpK1CLv+HInDqEWfXilqatF8YsLxxA2Q==",
       "cpu": [
         "arm64"
       ],
@@ -473,9 +473,9 @@
       }
     },
     "node_modules/@next/swc-win32-ia32-msvc": {
-      "version": "14.1.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.1.4.tgz",
-      "integrity": "sha512-WZiz8OdbkpRw6/IU/lredZWKKZopUMhcI2F+XiMAcPja0uZYdMTZQRoQ0WZcvinn9xZAidimE7tN9W5v9Yyfyw==",
+      "version": "14.2.1",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.2.1.tgz",
+      "integrity": "sha512-o+ISKOlvU/L43ZhtAAfCjwIfcwuZstiHVXq/BDsZwGqQE0h/81td95MPHliWCnFoikzWcYqh+hz54ZB2FIT8RA==",
       "cpu": [
         "ia32"
       ],
@@ -488,9 +488,9 @@
       }
     },
     "node_modules/@next/swc-win32-x64-msvc": {
-      "version": "14.1.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-14.1.4.tgz",
-      "integrity": "sha512-4Rto21sPfw555sZ/XNLqfxDUNeLhNYGO2dlPqsnuCg8N8a2a9u1ltqBOPQ4vj1Gf7eJC0W2hHG2eYUHuiXgY2w==",
+      "version": "14.2.1",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-14.2.1.tgz",
+      "integrity": "sha512-GmRoTiLcvCLifujlisknv4zu9/C4i9r0ktsA8E51EMqJL4bD4CpO7lDYr7SrUxCR0tS4RVcrqKmCak24T0ohaw==",
       "cpu": [
         "x64"
       ],
@@ -675,10 +675,17 @@
         "@supabase/storage-js": "^2.5.4"
       }
     },
+    "node_modules/@swc/counter": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/@swc/counter/-/counter-0.1.3.tgz",
+      "integrity": "sha512-e2BR4lsJkkRlKZ/qCHPw9ZaSxc0MVUd7gtbtaB7aMvHeJVYe8sOB8DBZkP2DtISHGSku9sCK6T6cnY0CtXrOCQ=="
+    },
     "node_modules/@swc/helpers": {
-      "version": "0.5.2",
-      "license": "Apache-2.0",
+      "version": "0.5.5",
+      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.5.tgz",
+      "integrity": "sha512-KGYxvIOXcceOAbEk4bi/dVLEK9z8sZ0uBB3Il5b1rhfClSpcX0yfRO0KmTkqR2cnQDymwLB+25ZyMzICg/cm/A==",
       "dependencies": {
+        "@swc/counter": "^0.1.3",
         "tslib": "^2.4.0"
       }
     },
@@ -3430,6 +3437,12 @@
         "jiti": "bin/jiti.js"
       }
     },
+    "node_modules/jquery": {
+      "version": "3.7.1",
+      "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.7.1.tgz",
+      "integrity": "sha512-m4avr8yL8kmFN8psrbFFFmB/If14iN5o9nw/NgnnM+kybDJpRsAynV2BsfpTYrTRysYUdADVD7CkUUizgkpLfg==",
+      "peer": true
+    },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "license": "MIT"
@@ -3820,12 +3833,12 @@
       "license": "MIT"
     },
     "node_modules/next": {
-      "version": "14.1.4",
-      "resolved": "https://registry.npmjs.org/next/-/next-14.1.4.tgz",
-      "integrity": "sha512-1WTaXeSrUwlz/XcnhGTY7+8eiaFvdet5z9u3V2jb+Ek1vFo0VhHKSAIJvDWfQpttWjnyw14kBeq28TPq7bTeEQ==",
+      "version": "14.2.1",
+      "resolved": "https://registry.npmjs.org/next/-/next-14.2.1.tgz",
+      "integrity": "sha512-SF3TJnKdH43PMkCcErLPv+x/DY1YCklslk3ZmwaVoyUfDgHKexuKlf9sEfBQ69w+ue8jQ3msLb+hSj1T19hGag==",
       "dependencies": {
-        "@next/env": "14.1.4",
-        "@swc/helpers": "0.5.2",
+        "@next/env": "14.2.1",
+        "@swc/helpers": "0.5.5",
         "busboy": "1.6.0",
         "caniuse-lite": "^1.0.30001579",
         "graceful-fs": "^4.2.11",
@@ -3839,18 +3852,19 @@
         "node": ">=18.17.0"
       },
       "optionalDependencies": {
-        "@next/swc-darwin-arm64": "14.1.4",
-        "@next/swc-darwin-x64": "14.1.4",
-        "@next/swc-linux-arm64-gnu": "14.1.4",
-        "@next/swc-linux-arm64-musl": "14.1.4",
-        "@next/swc-linux-x64-gnu": "14.1.4",
-        "@next/swc-linux-x64-musl": "14.1.4",
-        "@next/swc-win32-arm64-msvc": "14.1.4",
-        "@next/swc-win32-ia32-msvc": "14.1.4",
-        "@next/swc-win32-x64-msvc": "14.1.4"
+        "@next/swc-darwin-arm64": "14.2.1",
+        "@next/swc-darwin-x64": "14.2.1",
+        "@next/swc-linux-arm64-gnu": "14.2.1",
+        "@next/swc-linux-arm64-musl": "14.2.1",
+        "@next/swc-linux-x64-gnu": "14.2.1",
+        "@next/swc-linux-x64-musl": "14.2.1",
+        "@next/swc-win32-arm64-msvc": "14.2.1",
+        "@next/swc-win32-ia32-msvc": "14.2.1",
+        "@next/swc-win32-x64-msvc": "14.2.1"
       },
       "peerDependencies": {
         "@opentelemetry/api": "^1.1.0",
+        "@playwright/test": "^1.41.2",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "sass": "^1.3.0"
@@ -3859,6 +3873,9 @@
         "@opentelemetry/api": {
           "optional": true
         },
+        "@playwright/test": {
+          "optional": true
+        },
         "sass": {
           "optional": true
         }
diff --git a/package.json b/package.json
index 2b17aba9..6f86fe32 100644
--- a/package.json
+++ b/package.json
@@ -29,11 +29,11 @@
     "i": "^0.3.7",
     "leaflet": "^1.9.4",
     "moment": "^2.30.1",
-    "next": "latest",
+    "next": "^14.2.1",
     "node": "^21.7.1",
-    "react": "latest",
+    "react": "^18.2.0",
     "react-bootstrap": "^2.9.0",
-    "react-dom": "latest",
+    "react-dom": "^18.2.0",
     "react-icons": "^4.12.0",
     "react-leaflet": "^4.2.1",
     "react-responsive-carousel": "^3.2.23",
diff --git a/src/components/userComponents/SiteMap/ExhibitPreviewCard.tsx b/src/components/userComponents/SiteMap/ExhibitPreviewCard.tsx
index 959f27f2..98333fe9 100644
--- a/src/components/userComponents/SiteMap/ExhibitPreviewCard.tsx
+++ b/src/components/userComponents/SiteMap/ExhibitPreviewCard.tsx
@@ -123,7 +123,7 @@ function ExhibitPreviewCard({
                 {description}
               </h4>
               <h6 className='relative pt-[0.2rem] pr-[1rem] text-silver font-lato text-xs text-right'>
-                Go to exhibit `&gt;` 
+                Go to exhibit &gt;
                 </h6>
               </Link>
               
diff --git a/src/components/userComponents/SiteMap/TourPreviewCard.tsx b/src/components/userComponents/SiteMap/TourPreviewCard.tsx
index 302c3a0c..c8de6de0 100644
--- a/src/components/userComponents/SiteMap/TourPreviewCard.tsx
+++ b/src/components/userComponents/SiteMap/TourPreviewCard.tsx
@@ -136,7 +136,7 @@ function TourPreviewCard({ tour, handleClick, handleClose }: TourCardProps) {
                 {description}
               </h4>
               <h6 className="relative pt-[0.2rem] pr-[1rem] pb-[0.4rem] text-silver font-lato text-xs text-right">
-                Go to virtual tour `&gt;`
+                Go to virtual tour &gt;
               </h6>
             </Link>
           </div>

From e28a54697363ab7ab8567ae4895aba270a157ccf Mon Sep 17 00:00:00 2001
From: Miha <athmiha@berkeley.edu>
Date: Sat, 20 Apr 2024 23:47:08 -0700
Subject: [PATCH 12/21] figma dev changes resolved

---
 src/app/siteMapPage/page.tsx                  | 16 ++--
 .../FilterButton/FilterButton.tsx             |  4 +-
 .../SiteMap/ExhibitPreviewCard.tsx            |  2 +-
 .../userComponents/SiteMap/SiteMap.tsx        | 81 +++++++++----------
 .../SiteMap/TourPreviewCard.tsx               |  6 +-
 5 files changed, 58 insertions(+), 51 deletions(-)

diff --git a/src/app/siteMapPage/page.tsx b/src/app/siteMapPage/page.tsx
index aefe1147..d91057b6 100644
--- a/src/app/siteMapPage/page.tsx
+++ b/src/app/siteMapPage/page.tsx
@@ -41,22 +41,28 @@ function MapPage() {
 
   const renderFilterContainer = () => (
     <div className="mb-6  pl-0 pr-0 ">
-      <div className='pt-9 pr-2 pl-2 pb-7'>
+      <div className='pt-9 pr-2 pl-2 pb-3'>
       <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 pr-1 pl-1 w-full rounded-lg bg-mint-cream  border-mint-cream border-[5px]">
+      <div className="flex flex-row items-center pr-0 pl-0 rounded-lg bg-mint-cream  border-mint-cream border-[8px]"
+      style={{ width: '95%', marginLeft: 'auto', marginRight: 'auto' }}>  
+      
        
-
+     
         {filterButtonContent &&
           filterButtonContent.map(text => (
-           
             <FilterButton 
             key={text} 
             content={text} 
             onClick={() => handleFilter(text)} // Fixed here
-            isSelected={selectedMap === text}/>
+            isSelected={selectedMap === text}
+            
+            
+            
+            />
           
           ))}
+    
  
       </div>
     </div>
diff --git a/src/components/userComponents/FilterButton/FilterButton.tsx b/src/components/userComponents/FilterButton/FilterButton.tsx
index cd622c9c..f7b0cc53 100644
--- a/src/components/userComponents/FilterButton/FilterButton.tsx
+++ b/src/components/userComponents/FilterButton/FilterButton.tsx
@@ -30,10 +30,10 @@ interface FilterButtonProps {
  * @param root0.isSelected
  */
 function FilterButton({ content, onClick, isSelected }: FilterButtonProps) {
-  const selectedStyle = 'bg-hunterGreen text-white font-lato text-base font-medium rounded-lg';
+  const selectedStyle = 'bg-hunterGreen text-white font-lato text-base font-normal rounded-lg w-auto';
   
 
-  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.5 px-6 whitespace-nowrap text-scary-forest flex-grow font-lato text-base font-normal  ${
     isSelected ? selectedStyle : ''
   }`;
 
diff --git a/src/components/userComponents/SiteMap/ExhibitPreviewCard.tsx b/src/components/userComponents/SiteMap/ExhibitPreviewCard.tsx
index 98333fe9..f0e2ec77 100644
--- a/src/components/userComponents/SiteMap/ExhibitPreviewCard.tsx
+++ b/src/components/userComponents/SiteMap/ExhibitPreviewCard.tsx
@@ -122,7 +122,7 @@ function ExhibitPreviewCard({
               <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>
-              <h6 className='relative pt-[0.2rem] pr-[1rem] text-silver font-lato text-xs text-right'>
+              <h6 className='relative pt-[0.7rem] pr-[1rem] pb-[0.4rem] text-silver font-lato text-xs text-right'>
                 Go to exhibit &gt;
                 </h6>
               </Link>
diff --git a/src/components/userComponents/SiteMap/SiteMap.tsx b/src/components/userComponents/SiteMap/SiteMap.tsx
index 3113b533..7dfe6c75 100644
--- a/src/components/userComponents/SiteMap/SiteMap.tsx
+++ b/src/components/userComponents/SiteMap/SiteMap.tsx
@@ -2,7 +2,7 @@
 
 import L, { LatLngExpression } from 'leaflet';
 import React, { useEffect, useState } from 'react';
-import { LayersControl, MapContainer, TileLayer, Marker } from 'react-leaflet';
+import { MapContainer, TileLayer, Marker } from 'react-leaflet';
 import { renderToStaticMarkup } from 'react-dom/server';
 import { fetchAllSpotlights } from '../../../supabase/tours/queries';
 import { ExhibitWithCategoryRow, TourRow } from '../../../types/types';
@@ -149,53 +149,52 @@ function SiteMap({ mode }: SiteMapProps) {
       zoomControl={false}
       scrollWheelZoom
       style={{
-        height: '75vh',
+        height: '40vh',
         width: '100%',
-        minHeight: '544px',
+        minHeight: '532px',
         zIndex: '10',
         marginBottom: '25px',
       }}
       key={new Date().getTime()}
     >
       <TileLayer {...tileLayer} />
-      <LayersControl position="topright">
-        {spotlightTours &&
-          spotlightTours.map((tour, i) => {
-            // Fetch the color for this tour/exhibit; fallback to a default color if not found
-            console.log(tour);
-            const color = colorsMap[tour.id] || '#F17373'; // Fallback color
-            return (
-              <Marker
-                key={tour.id}
-                position={{
-                  lat: (tour.coordinates as { lat: number })?.lat ?? 0,
-                  lng: (tour.coordinates as { lng: number })?.lng ?? 0,
-                }}
-                eventHandlers={{ click: () => handleMarkerSelect(tour, i) }}
-                icon={
-                  selectedMarker === i
-                    ? createSelectedMarkerIcon(color)
-                    : createDefaultMarkerIcon(color)
-                }
-              />
-            );
-          })}
-        {selectedTour && (
-          <Control position="bottomright">
-            {mode === 'tours' ? (
-              <TourPreviewCard
-                tour={selectedTour as TourRow} // Assuming you have proper type checks or type casting
-                handleClose={handlePreviewClose}
-              />
-            ) : (
-              <ExhibitPreviewCard
-                tour={selectedTour as ExhibitWithCategoryRow} // Assuming you have proper type checks or type casting
-                handleClose={handlePreviewClose}
-              />
-            )}
-          </Control>
-        )}
-      </LayersControl>
+      {spotlightTours &&
+        spotlightTours.map((tour, i) => {
+          // Fetch the color for this tour/exhibit; fallback to a default color if not found
+          console.log(tour);
+          const color = colorsMap[tour.id] || '#F17373'; // Fallback color
+          return (
+            <Marker
+              key={tour.id}
+              position={{
+                lat: (tour.coordinates as { lat: number })?.lat ?? 0,
+                lng: (tour.coordinates as { lng: number })?.lng ?? 0,
+              }}
+              eventHandlers={{ click: () => handleMarkerSelect(tour, i) }}
+              icon={
+                selectedMarker === i
+                  ? createSelectedMarkerIcon(color)
+                  : createDefaultMarkerIcon(color)
+              }
+            />
+          );
+        })}
+      {selectedTour && (
+        <Control position="bottomright">
+          {mode === 'tours' ? (
+            <TourPreviewCard
+              tour={selectedTour as TourRow} // Assuming you have proper type checks or type casting
+              handleClose={handlePreviewClose}
+            />
+          ) : (
+            <ExhibitPreviewCard
+              tour={selectedTour as ExhibitWithCategoryRow} // Assuming you have proper type checks or type casting
+              handleClose={handlePreviewClose}
+            />
+          )}
+        </Control>
+      )}
+ 
       {selectedTour == null && <RecenterMap center={center} />}
     </MapContainer>
   );
diff --git a/src/components/userComponents/SiteMap/TourPreviewCard.tsx b/src/components/userComponents/SiteMap/TourPreviewCard.tsx
index c8de6de0..d9e50e98 100644
--- a/src/components/userComponents/SiteMap/TourPreviewCard.tsx
+++ b/src/components/userComponents/SiteMap/TourPreviewCard.tsx
@@ -124,8 +124,10 @@ function TourPreviewCard({ tour, handleClick, handleClose }: TourCardProps) {
               </svg>
             </div>
             <Link href={`/spotlightPage/${id}`}>
-              <div className=" pl-[0.75rem] pr-[9.87] pt-[0rem] font-lato text-xs text-shadow bg-[#F173731A]  rounded-lg w-[8rem]">
+              <div className=" pl-[0.75rem] pr-[9.87] pt-[0rem] font-lato text-xs rounded-lg ">
+                <span className='text-shadow bg-[#F173731A]'>
                 {category}
+                </span>
               </div>
 
               <h3 className="relative truncate font-medium font-lato text-night pr-[0.31rem] pl-[0.75rem] pt-[0.3rem] pb-[0rem] text-base leading-normal">
@@ -135,7 +137,7 @@ function TourPreviewCard({ tour, handleClick, handleClose }: TourCardProps) {
               <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>
-              <h6 className="relative pt-[0.2rem] pr-[1rem] pb-[0.4rem] text-silver font-lato text-xs text-right">
+              <h6 className="relative pt-[0.7rem] pr-[1rem] pb-[0.4rem] text-silver font-lato text-xs text-right">
                 Go to virtual tour &gt;
               </h6>
             </Link>

From b5fecb1b7957a16860d492aa5e8f7589488ba421 Mon Sep 17 00:00:00 2001
From: Miha <athmiha@berkeley.edu>
Date: Sun, 21 Apr 2024 12:14:54 -0700
Subject: [PATCH 13/21] updated desktop version

---
 src/app/siteMapPage/page.tsx | 86 +++++++++++++++++++++++++++++++-----
 1 file changed, 74 insertions(+), 12 deletions(-)

diff --git a/src/app/siteMapPage/page.tsx b/src/app/siteMapPage/page.tsx
index d91057b6..c400c02b 100644
--- a/src/app/siteMapPage/page.tsx
+++ b/src/app/siteMapPage/page.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import dynamic from 'next/dynamic';
 import NavBar from '../../components/userComponents/navBar/navBar';
 import FilterButton from '../../components/userComponents/FilterButton/FilterButton';
@@ -28,6 +28,22 @@ function MapPage() {
 
   const [selectedMap, setSelectedMap] = useState(filterButtonContent[0]); // "Virtual Tour Map" by default
   const [mode, setMode] = useState<ModeState>('tours');
+  // const [isWide, setIsWide] = useState(window.innerWidth >= 768);
+  const [isWide, setIsWide] = useState(false);
+
+  useEffect(() => {
+    /**
+     *
+     */
+    function handleResize() {
+      setIsWide(window.innerWidth >= 768);
+    }
+
+    handleResize(); // Set initial size on client-side mount
+
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
 
   // move tour logic here: need to share state between filter 
   const handleFilter = (mapName: string) => {
@@ -41,9 +57,9 @@ function MapPage() {
 
   const renderFilterContainer = () => (
     <div className="mb-6  pl-0 pr-0 ">
-      <div className='pt-9 pr-2 pl-2 pb-3'>
+      {/* <div className='pt-9 pr-2 pl-2 pb-3'>
       <p className="text-night font-lato text-2xl font-semibold">Wildlife Care Center Maps</p>
-      </div>
+      </div> */}
       <div className="flex flex-row items-center pr-0 pl-0 rounded-lg bg-mint-cream  border-mint-cream border-[8px]"
       style={{ width: '95%', marginLeft: 'auto', marginRight: 'auto' }}>  
       
@@ -56,28 +72,74 @@ function MapPage() {
             content={text} 
             onClick={() => handleFilter(text)} // Fixed here
             isSelected={selectedMap === text}
-            
-            
-            
             />
           
           ))}
-    
- 
+      </div>
+    </div>
+  );
+  const renderFilterContainerWide = () => (
+    <div className="flex justify-end w-[23.875rem] h-[3.25rem]">
+      <div className="flex flex-row items-center rounded-lg bg-mint-cream  border-mint-cream border-[8px]"
+      style={{ width: '100%', marginLeft: 'auto', marginRight: 'auto' }}>  
+           
+        {filterButtonContent &&
+          filterButtonContent.map(text => (
+            <FilterButton 
+            key={text} 
+            content={text} 
+            onClick={() => handleFilter(text)} // Fixed here
+            isSelected={selectedMap === text}
+            />
+          
+          ))}
       </div>
     </div>
   );
 
-  return (
+  return isWide ? (
+
     <>
+   
     
       <NavBar />
+      <div className='justify-center mx-auto w-[70%]'>
+        <div className="pt-0 pl-2 pr-2 bg-ivory">
+
+      <div className="pt-20 pb-6 pl-2 ">
+        <span className="text-scary-forest font-lato text-sm font-normal">
+          Home  <span className='text-night'> / Wildlife Care Center Maps </span>
+        </span> 
+      </div>
+      <div className="flex items-center  pb-4">
+        <div className='flex-initial pr-2 pl-2'>
+          <p className="text-night font-lato font-normal text-3xl">Wildlife Care Center Maps</p>
+        </div>
+        <div className="flex-grow flex justify-end pr-2 pl-2 pb-3">
+          {renderFilterContainerWide()}
+        </div>
+      </div>
+        <div className="w-full pr-2 pl-2 flex h-2/3 mb-8">
+          <SiteMap mode={mode} />
+        </div>
+      </div>
+      </div>
+
+    </>
+  ) : (
+    <>
+     <NavBar />
+    <div className='pt-6 pr-2 pl-2 pb-3 bg-ivory'>
+      <div className="p-4">
+        <p className="text-night font-lato text-2xl font-normal">Wildlife Care Center Maps</p>
+      </div>
+      {renderFilterContainer()}
       <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} />
+        <div className="w-full pr-2 pl-2 flex h-2/3 mb-8">
+          <SiteMap mode={mode} />
         </div>
       </div>
+    </div>
     </>
   );
 }

From 937ea214ff85688f39ddbd2696614bf0df36afa9 Mon Sep 17 00:00:00 2001
From: Miha <athmiha@berkeley.edu>
Date: Wed, 8 May 2024 23:34:47 -0700
Subject: [PATCH 14/21] finished all desktop feedback - delted display
 component (not using) changed navbar component to huntergreen

---
 src/app/siteMapPage/page.tsx                  |   2 +-
 .../SiteMap/DisplayPreviewCard.tsx            | 146 ------------------
 .../SiteMap/ExhibitPreviewCard.tsx            |   8 +-
 .../SiteMap/TourPreviewCard.tsx               |  18 +--
 .../userComponents/navBar/navBar.tsx          |   2 +-
 5 files changed, 14 insertions(+), 162 deletions(-)
 delete mode 100644 src/components/userComponents/SiteMap/DisplayPreviewCard.tsx

diff --git a/src/app/siteMapPage/page.tsx b/src/app/siteMapPage/page.tsx
index c400c02b..e1254498 100644
--- a/src/app/siteMapPage/page.tsx
+++ b/src/app/siteMapPage/page.tsx
@@ -129,7 +129,7 @@ function MapPage() {
   ) : (
     <>
      <NavBar />
-    <div className='pt-6 pr-2 pl-2 pb-3 bg-ivory'>
+    <div className='pt-6.25 pr-2 pl-2 pb-2 bg-ivory'>
       <div className="p-4">
         <p className="text-night font-lato text-2xl font-normal">Wildlife Care Center Maps</p>
       </div>
diff --git a/src/components/userComponents/SiteMap/DisplayPreviewCard.tsx b/src/components/userComponents/SiteMap/DisplayPreviewCard.tsx
deleted file mode 100644
index 434bc743..00000000
--- a/src/components/userComponents/SiteMap/DisplayPreviewCard.tsx
+++ /dev/null
@@ -1,146 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import { LatLngExpression } from 'leaflet';
-import { useMapEvents } from 'react-leaflet';
-import Link from 'next/link';
-import Image from 'next/image';
-import { ExhibitWithCategoryRow, TourRow } from '../../../types/types';
-import { fetchImagesForTour } from '../../../supabase/media/queries';
-import { fetchExhibitImage } from '../../../supabase/exhibits/queries';
-import { CloseIcon } from '../../../../public/icons';
-
-interface DisplayCardProps {
-  tour: TourRow | ExhibitWithCategoryRow;
-  handleClose: () => void;
-  handleClick?: () => void;
-}
-
-/**
- * Display a preview card component.
- * @param DisplayCardProps - The props for the display card component.
- * @param DisplayCardProps.tour - The tour or exhibit to preview.
- * @param DisplayCardProps.handleClick - The function to handle actions when clicked.
- * @param DisplayCardProps.handleClose - The function to handle closing of the preview card.
- * @returns The preview card component to display within the Leaflet map container.
- */
-function DisplayPreviewCard({
-  tour,
-  handleClick,
-  handleClose,
-}: DisplayCardProps) {
-  const [loading, setLoading] = useState<boolean>(false);
-  const [previewImage, setPreviewImage] = useState<string>('');
-  const [name1, setname1] = useState<string>('');
-  const { id, description, coordinates, category } = tour;
-  // name, for tour title for exhibit
-
-  // Map Context
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const map = useMapEvents({
-    click: e => {
-      if (!e.latlng.equals(coordinates as LatLngExpression)) {
-        handleClose();
-      }
-    },
-  });
-
-  // fetch image to use for preview
-  useEffect(() => {
-    const fetchDetails = async () => {
-      setLoading(true);
-
-      let imageUrl = '';
-      let displayName = '';
-
-      if ('name' in tour) {
-        const images = await fetchImagesForTour(tour.id);
-        if (images && images.length > 0) {
-          imageUrl = images[0].url;
-        }
-        displayName = tour.name;
-      } else {
-        // Handle as an ExhibitWithCategoryRow
-        // const imageObj = await fetchExhibitImage(tour.id);
-        // if (imageObj) {
-        imageUrl = tour.image;
-        console.log(tour)
-        // }
-        displayName = tour.category;
-      }
-
-      // Set state variables
-      setPreviewImage(imageUrl);
-      setname1(displayName);
-      setLoading(false);
-    };
-
-    fetchDetails();
-  }, [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="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"
-              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"
-              aria-label="Close preview card"
-              role="button"
-              tabIndex={0}
-              onClick={e => {
-                e.stopPropagation(); //  prevents the click from propagating to the parent link
-                handleClose();
-              }}
-              onKeyDown={e => {
-                if (e.key === 'Enter' || e.key === ' ') {
-                  e.stopPropagation();
-                  handleClose();
-                }
-              }}
-            >
-              <CloseIcon />
-            </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">
-                {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>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-export default DisplayPreviewCard;
diff --git a/src/components/userComponents/SiteMap/ExhibitPreviewCard.tsx b/src/components/userComponents/SiteMap/ExhibitPreviewCard.tsx
index f0e2ec77..44a860df 100644
--- a/src/components/userComponents/SiteMap/ExhibitPreviewCard.tsx
+++ b/src/components/userComponents/SiteMap/ExhibitPreviewCard.tsx
@@ -75,7 +75,7 @@ function ExhibitPreviewCard({
   /** 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-col items-center justify-center w-[27.5rem] h-[8.5rem] 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"
@@ -109,7 +109,7 @@ function ExhibitPreviewCard({
                   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" strokeWidth="1.11692" strokeLinecap="round" strokeLinejoin="round"/>
+                    <path d="M10.0523 11.0274L3.35083 4.32596M10.0524 4.32596L3.35083 11.0275" stroke="silver" strokeWidth="1.11692" strokeLinecap="round" strokeLinejoin="round"/>
                   </svg>
                 </div>
               <Link href={`/spotlightPage/${id}`}>
@@ -129,9 +129,7 @@ function ExhibitPreviewCard({
               
           
             </div>
-            {/* <div>
-                <h6>Go to exhibit > </h6>
-            </div> */}
+   
           </div>
         </div>
       </div>
diff --git a/src/components/userComponents/SiteMap/TourPreviewCard.tsx b/src/components/userComponents/SiteMap/TourPreviewCard.tsx
index d9e50e98..bd169b66 100644
--- a/src/components/userComponents/SiteMap/TourPreviewCard.tsx
+++ b/src/components/userComponents/SiteMap/TourPreviewCard.tsx
@@ -64,9 +64,9 @@ function TourPreviewCard({ tour, handleClick, handleClose }: TourCardProps) {
   /** route this to spotlights */
 
   return (
-    <div className="flex flex-col items-center justify-center w-[25rem] h-[7.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-col items-center justify-center w-[27.5rem] h-[8.5rem] 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"
+        className="flex flex-row items-center rounded-md overflow-hidden bg-ivory cursor-pointer  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 && (
@@ -107,6 +107,11 @@ function TourPreviewCard({ tour, handleClick, handleClose }: TourCardProps) {
                 }
               }}
             >
+                 <div className=" pr-[10rem] pl-[0] pt-[0.25rem] pb-[0rem] font-lato text-xs rounded-lg ">
+                <span className='text-shadow bg-[#F173731A]'>
+                {category}
+                </span>
+              </div>
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 width="14"
@@ -116,20 +121,15 @@ function TourPreviewCard({ tour, handleClick, handleClose }: TourCardProps) {
               >
                 <path
                   d="M10.0523 11.0274L3.35083 4.32596M10.0524 4.32596L3.35083 11.0275"
-                  stroke="#272929"
+                  stroke="silver"
                   strokeWidth="1.11692"
                   strokeLinecap="round"
                   strokeLinejoin="round"
                 />
               </svg>
+           
             </div>
             <Link href={`/spotlightPage/${id}`}>
-              <div className=" pl-[0.75rem] pr-[9.87] pt-[0rem] font-lato text-xs rounded-lg ">
-                <span className='text-shadow bg-[#F173731A]'>
-                {category}
-                </span>
-              </div>
-
               <h3 className="relative truncate font-medium font-lato text-night pr-[0.31rem] pl-[0.75rem] pt-[0.3rem] pb-[0rem] text-base leading-normal">
                 {name1}
               </h3>
diff --git a/src/components/userComponents/navBar/navBar.tsx b/src/components/userComponents/navBar/navBar.tsx
index 473fdf92..6cc0511b 100644
--- a/src/components/userComponents/navBar/navBar.tsx
+++ b/src/components/userComponents/navBar/navBar.tsx
@@ -26,7 +26,7 @@ function NavBar() {
 
   return (
     <nav
-      className="bg-[#4b711d] p-4 flex items-center justify-between z-[9999]"
+      className="bg-hunterGreen p-4 flex items-center justify-between z-[9999]"
       style={{ padding: '1rem', position: 'sticky', top: 0 }}
     >
       <Link href="/">

From 4ae3305955a75c4e104008651601b185bb3ac273 Mon Sep 17 00:00:00 2001
From: Miha <athmiha@berkeley.edu>
Date: Fri, 10 May 2024 01:21:12 -0700
Subject: [PATCH 15/21] done with claire's mobile edits

---
 src/app/siteMapPage/page.tsx                  |   5 +-
 .../SiteMap/ExhibitPreviewCard.tsx            | 118 ++++++++--------
 .../SiteMap/TourPreviewCard.tsx               | 133 ++++++------------
 3 files changed, 105 insertions(+), 151 deletions(-)

diff --git a/src/app/siteMapPage/page.tsx b/src/app/siteMapPage/page.tsx
index e1254498..15c0cc1d 100644
--- a/src/app/siteMapPage/page.tsx
+++ b/src/app/siteMapPage/page.tsx
@@ -56,12 +56,12 @@ function MapPage() {
   };
 
   const renderFilterContainer = () => (
-    <div className="mb-6  pl-0 pr-0 ">
+    <div className="mb-6  w-[22.125rem]">
       {/* <div className='pt-9 pr-2 pl-2 pb-3'>
       <p className="text-night font-lato text-2xl font-semibold">Wildlife Care Center Maps</p>
       </div> */}
       <div className="flex flex-row items-center pr-0 pl-0 rounded-lg bg-mint-cream  border-mint-cream border-[8px]"
-      style={{ width: '95%', marginLeft: 'auto', marginRight: 'auto' }}>  
+      style={{ width: '93%', marginLeft: 'auto', marginRight: 'auto' }}>  
       
        
      
@@ -133,6 +133,7 @@ function MapPage() {
       <div className="p-4">
         <p className="text-night font-lato text-2xl font-normal">Wildlife Care Center Maps</p>
       </div>
+
       {renderFilterContainer()}
       <div className="pt-0 pl-2 pr-2 bg-ivory">
         <div className="w-full pr-2 pl-2 flex h-2/3 mb-8">
diff --git a/src/components/userComponents/SiteMap/ExhibitPreviewCard.tsx b/src/components/userComponents/SiteMap/ExhibitPreviewCard.tsx
index 44a860df..910f1e21 100644
--- a/src/components/userComponents/SiteMap/ExhibitPreviewCard.tsx
+++ b/src/components/userComponents/SiteMap/ExhibitPreviewCard.tsx
@@ -33,7 +33,27 @@ function ExhibitPreviewCard({
   const [name1, setname1] = useState<string>('');
 
   const { id, description, coordinates, category } = tour;
-  // name, for tour title for exhibit
+  const [width, setWidth] = useState('20.06rem');
+  const [height, setHeight] = useState('7.687rem');
+
+  useEffect(() => {
+    /**
+     *
+     */
+    function handleResize() {
+      if (window.innerWidth >= 768) {
+        setWidth('27.06rem');
+        setHeight('8.5rem');
+      } else {
+        setWidth('20.06rem');
+        setHeight('7.687rem');
+      }
+    }
+
+    handleResize();
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
 
   // Map Context
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -75,66 +95,48 @@ function ExhibitPreviewCard({
   /** route this to spotlights */
 
   return (
-      <div className="flex flex-col items-center justify-center w-[27.5rem] h-[8.5rem] 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-[5.8125rem] z-10 h-full shrink-0 rounded-tl-md rounded-tr-none rounded-br-none rounded-bl-md">
-           
-            <Image
-            
-              src={previewImage}
-              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(); //  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="silver" strokeWidth="1.11692" strokeLinecap="round" strokeLinejoin="round"/>
-                  </svg>
-                </div>
-              <Link href={`/spotlightPage/${id}`}>
-              <h3
-                className="relative truncate font-medium font-lato text-night pr-[0.31rem] pl-[0.75rem] pt-[0rem] 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>
-              <h6 className='relative pt-[0.7rem] pr-[1rem] pb-[0.4rem] text-silver font-lato text-xs text-right'>
-                Go to exhibit &gt;
-                </h6>
-              </Link>
-              
-          
-            </div>
-   
+    <div className="flex flex-col items-center justify-center mx-auto rounded-md pl-[0.8rem] pr-[0rem]" style={{ width, height }}>
+    <div className="flex flex-row items-center rounded-md overflow-hidden bg-ivory cursor-pointer flex-shrink-0 shadow-xl" aria-hidden="true">
+      {!loading && (
+        <div className="relative w-[5.875rem] z-10 h-full shrink-0 rounded-tl-md rounded-tr-none rounded-br-none rounded-bl-md">
+          <Image
+            src={previewImage}
+            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();
+                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="silver" strokeWidth="1.11692" strokeLinecap="round" strokeLinejoin="round"/>
+            </svg>
           </div>
+          <Link href={`/spotlightPage/${id}`}>
+            <h3 className="relative truncate font-medium font-lato text-night pr-[0.31rem] pl-[0.75rem] pt-[0rem] 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>
+            <h6 className='relative pt-[0.7rem] pr-[1rem] pb-[0.4rem] text-silver font-lato text-xs text-right'>
+              Go to virtual tour &gt;
+            </h6>
+          </Link>
         </div>
       </div>
-
-
+    </div>
+  </div>
   );
 }
 
diff --git a/src/components/userComponents/SiteMap/TourPreviewCard.tsx b/src/components/userComponents/SiteMap/TourPreviewCard.tsx
index bd169b66..98c45f22 100644
--- a/src/components/userComponents/SiteMap/TourPreviewCard.tsx
+++ b/src/components/userComponents/SiteMap/TourPreviewCard.tsx
@@ -5,139 +5,90 @@ import Link from 'next/link';
 import Image from 'next/image';
 import { TourRow } from '../../../types/types';
 import { fetchImagesForTour } from '../../../supabase/media/queries';
-// import { fetchExhibitImage } from '../../../supabase/exhibits/queries';
 
 interface TourCardProps {
   tour: TourRow;
   handleClose: () => void;
   handleClick?: () => void;
 }
-/**
- * Props for the tour preview card component.
- * @param props - The props for the tour preview card.
- * @param props.tour – tour to render preview
- * @param props.handleClick – onClick function for preview card
- * @param props.handleClose – close function for preview card
- * @returns - The rendered tour preview card component.
- */
+
 function TourPreviewCard({ tour, handleClick, handleClose }: TourCardProps) {
   const [loading, setLoading] = useState<boolean>(false);
   const [previewImage, setPreviewImage] = useState<string>('');
   const [name1, setname1] = useState<string>('');
 
-  const { id, description, coordinates, category } = tour;
-  // name, for tour title for exhibit
+  const { id, description, category } = tour;
+
+  // Responsive dimension states
+  const [width, setWidth] = useState('20.06rem');
+  const [height, setHeight] = useState('7.687rem');
 
-  // Map Context
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const map = useMapEvents({
-    click: e => {
-      if (!e.latlng.equals(coordinates as LatLngExpression)) {
-        handleClose();
+  useEffect(() => {
+    function handleResize() {
+      if (window.innerWidth >= 768) {
+        setWidth('27.06rem');
+        setHeight('8.5rem');
+      } else {
+        setWidth('20.06rem');
+        setHeight('7.687rem');
       }
-    },
-  });
+    }
+
+    handleResize();
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
 
-  // fetch image to use for preview
   useEffect(() => {
     const fetchDetails = async () => {
       setLoading(true);
-
-      let imageUrl = '';
-      let displayName = '';
-
-      // Fetch images for a tour
       const images = await fetchImagesForTour(tour.id);
-      if (images && images.length > 0) {
-        imageUrl = images[0].url;
-      }
-      displayName = tour.name;
-      // Set state variables
-      setPreviewImage(imageUrl);
-      setname1(displayName);
+      setPreviewImage(images && images.length > 0 ? images[0].url : '');
+      setname1(tour.name);
       setLoading(false);
     };
 
     fetchDetails();
   }, [tour]);
 
-  /** route this to spotlights */
-
   return (
-    <div className="flex flex-col items-center justify-center w-[27.5rem] h-[8.5rem] 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  sm:w-4/4 md:w-5/5 lg:w-2/2 xl:w-5/5 flex-shrink-0 shadow-xl"
-        aria-hidden="true"
-      >
+    <div className="flex flex-col items-center justify-center mx-auto rounded-md pl-[0.8rem] pr-[0rem]" style={{ width, height }}>
+      <div className="flex flex-row items-center rounded-md overflow-hidden bg-ivory cursor-pointer flex-shrink-0 shadow-xl" aria-hidden="true">
         {!loading && (
-          <div className="relative w-[5.8125rem] z-10 h-full shrink-0 rounded-tl-md rounded-tr-none rounded-br-none rounded-bl-md">
+          <div className="relative w-[5.875rem] z-10 h-full 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
-              aria-label="Close preview card"
-              className="flex justify-end items-center pt-2 pr-[0.5rem]"
-              role="button"
-              tabIndex={0}
-              onClick={e => {
-                e.stopPropagation(); //  prevents the click from propagating to the parent link
-                handleClose();
-              }}
-              onKeyDown={e => {
-                if (e.key === 'Enter' || e.key === ' ') {
+        <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();
-                  handleClose();
-                }
-              }}
-            >
-                 <div className=" pr-[10rem] pl-[0] pt-[0.25rem] pb-[0rem] font-lato text-xs rounded-lg ">
-                <span className='text-shadow bg-[#F173731A]'>
-                {category}
-                </span>
+                  handleClose(); 
+                }}>
+              <div className='pl-[0.75rem] w-full'>
+                <span className='text-shadow bg-[#F173731A] pr-2 pl-2 rounded-md'>{category}</span>
               </div>
-              <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="silver"
-                  strokeWidth="1.11692"
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                />
+              <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="silver" strokeWidth="1.11692" strokeLinecap="round" strokeLinejoin="round"/>
               </svg>
-           
             </div>
             <Link href={`/spotlightPage/${id}`}>
               <h3 className="relative truncate font-medium font-lato text-night pr-[0.31rem] pl-[0.75rem] pt-[0.3rem] 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">
+              <h4 className="relative font-lato h-[2rem] pr-[0.31rem] pt-[0rem] pl-[0.75rem] pb-[2.4rem] text-shadow line-clamp-2 font-normal line-height-normal">
                 {description}
               </h4>
-              <h6 className="relative pt-[0.7rem] pr-[1rem] pb-[0.4rem] text-silver font-lato text-xs text-right">
+              <h6 className='relative pt-[0rem] pr-[1rem] pb-[0.4rem] text-silver font-lato text-xs text-right'>
                 Go to virtual tour &gt;
               </h6>
             </Link>

From e629b6c94e58072d2a8796069e2ef66e78643799 Mon Sep 17 00:00:00 2001
From: sarahhpeng <sarah.peng@berkeley.edu>
Date: Tue, 14 May 2024 00:16:57 -0700
Subject: [PATCH 16/21] added working nav bar to mihas pr

---
 .../userComponents/navBar/navBar.tsx          | 44 +++++++++----------
 1 file changed, 21 insertions(+), 23 deletions(-)

diff --git a/src/components/userComponents/navBar/navBar.tsx b/src/components/userComponents/navBar/navBar.tsx
index e37e609f..b72d64ba 100644
--- a/src/components/userComponents/navBar/navBar.tsx
+++ b/src/components/userComponents/navBar/navBar.tsx
@@ -24,29 +24,27 @@ export default function NavBar() {
   }
 
   return (
-    <nav
-      className="bg-hunterGreen p-4 flex items-center justify-between z-[9999]"
-      style={{ padding: '1rem', position: 'sticky', top: 0 }}
-    >
-      <Link href="/">
-        <img
-          src="https://phs-spca.org/wp-content/uploads/2017/03/PHSLogo.jpg"
-          alt="Logo"
-          className="object-contain"
-          style={{ maxHeight: '100%', maxWidth: '50%' }}
-        />
-      </Link>
-      <div className="flex-grow" />
-      <button
-        type="button"
-        className="w-10 h-10"
-        onClick={handleClick}
-        onKeyDown={handleKeyDown}
-        tabIndex={0}
-        aria-label="Menu"
-      >
-        <MenuIcon />
-      </button>
+    <nav className="bg-scary-forest w-full h-[4.25rem] flex flex-col relative z-[9999]">
+      <div className="flex flex-row justify-between relative top-2">
+        <Link href="/">
+          <img
+            src="https://qkkuacqtcsfjbnzmxmhk.supabase.co/storage/v1/object/public/images/PHSLogo.jpg"
+            alt="PHSLogo"
+            className="object-contain w-[6.5rem] h-[2.25rem] relative left-[1.13rem]"
+          />
+        </Link>
+        <button
+          type="button"
+          className="w-10 h-10 relative right-[0.81rem]"
+          onClick={handleClick}
+          aria-label="Toggle Menu"
+        >
+          <div className="flex justify-center items-center w-full h-full">
+            {showMenu ? <CloseMenu /> : <HamburgerMenu />}
+          </div>
+        </button>
+      </div>
+      <div className="bg-hunterGreen w-full h-[0.375rem] absolute bottom-0" />
 
       {showMenu && (
         <div className="bg-[#000000B2] w-full h-full flex justify-end fixed top-[4.25rem]">

From 52fb4637aed7eda587e975a00df63960ace9e68c Mon Sep 17 00:00:00 2001
From: sarahhpeng <sarah.peng@berkeley.edu>
Date: Tue, 14 May 2024 00:22:54 -0700
Subject: [PATCH 17/21] fixed bracket issue in the siteMapPage

---
 src/app/siteMapPage/page.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/app/siteMapPage/page.tsx b/src/app/siteMapPage/page.tsx
index 5b864633..a9ab9631 100644
--- a/src/app/siteMapPage/page.tsx
+++ b/src/app/siteMapPage/page.tsx
@@ -45,8 +45,7 @@ function MapPage() {
     return () => window.removeEventListener('resize', handleResize);
   }, []);
 
-  // move tour logic here: need to share state between filter 
-  const handleFilter = (mapName: string) => {
+
   // move tour logic here: need to share state between filter 
   const handleFilter = (mapName: string) => {
     setSelectedMap(mapName);

From 3fd6535e9fbb1c881677a0585803c42f66af78f7 Mon Sep 17 00:00:00 2001
From: sarahhpeng <sarah.peng@berkeley.edu>
Date: Tue, 14 May 2024 00:24:10 -0700
Subject: [PATCH 18/21] filter button duplicated import statement

---
 src/components/userComponents/FilterButton/FilterButton.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/userComponents/FilterButton/FilterButton.tsx b/src/components/userComponents/FilterButton/FilterButton.tsx
index 57c4a45d..f7b0cc53 100644
--- a/src/components/userComponents/FilterButton/FilterButton.tsx
+++ b/src/components/userComponents/FilterButton/FilterButton.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import React from 'react';
 
 // interface FilterButtonProps {
 //   content: string;

From ac2f6ec5d75062e8ea09c01ef4cae38798fe76c7 Mon Sep 17 00:00:00 2001
From: sarahhpeng <sarah.peng@berkeley.edu>
Date: Tue, 14 May 2024 00:33:41 -0700
Subject: [PATCH 19/21] changed hunterGreen to hunter-green for filter button

---
 src/components/userComponents/FilterButton/FilterButton.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/userComponents/FilterButton/FilterButton.tsx b/src/components/userComponents/FilterButton/FilterButton.tsx
index f7b0cc53..e6c307f6 100644
--- a/src/components/userComponents/FilterButton/FilterButton.tsx
+++ b/src/components/userComponents/FilterButton/FilterButton.tsx
@@ -30,7 +30,7 @@ interface FilterButtonProps {
  * @param root0.isSelected
  */
 function FilterButton({ content, onClick, isSelected }: FilterButtonProps) {
-  const selectedStyle = 'bg-hunterGreen text-white font-lato text-base font-normal rounded-lg w-auto';
+  const selectedStyle = 'bg-hunter-green text-white font-lato text-base font-normal rounded-lg w-auto';
   
 
   const buttonClass = `py-2.5 px-6 whitespace-nowrap text-scary-forest flex-grow font-lato text-base font-normal  ${

From 1146cc112dc39af0c8f40defc18fc5123c77dc57 Mon Sep 17 00:00:00 2001
From: sarahhpeng <sarah.peng@berkeley.edu>
Date: Tue, 14 May 2024 00:43:51 -0700
Subject: [PATCH 20/21] testing w-auto

---
 src/components/userComponents/FilterButton/FilterButton.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/userComponents/FilterButton/FilterButton.tsx b/src/components/userComponents/FilterButton/FilterButton.tsx
index e6c307f6..674940b4 100644
--- a/src/components/userComponents/FilterButton/FilterButton.tsx
+++ b/src/components/userComponents/FilterButton/FilterButton.tsx
@@ -30,7 +30,7 @@ interface FilterButtonProps {
  * @param root0.isSelected
  */
 function FilterButton({ content, onClick, isSelected }: FilterButtonProps) {
-  const selectedStyle = 'bg-hunter-green text-white font-lato text-base font-normal rounded-lg w-auto';
+  const selectedStyle = 'bg-hunter-green text-white font-lato text-base font-normal rounded-lg';
   
 
   const buttonClass = `py-2.5 px-6 whitespace-nowrap text-scary-forest flex-grow font-lato text-base font-normal  ${

From def3fdc634811617a8162e7c04440a73da0220b5 Mon Sep 17 00:00:00 2001
From: sarahhpeng <sarah.peng@berkeley.edu>
Date: Tue, 14 May 2024 01:04:36 -0700
Subject: [PATCH 21/21] minor change

---
 src/components/userComponents/FilterButton/FilterButton.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/userComponents/FilterButton/FilterButton.tsx b/src/components/userComponents/FilterButton/FilterButton.tsx
index 674940b4..e6c307f6 100644
--- a/src/components/userComponents/FilterButton/FilterButton.tsx
+++ b/src/components/userComponents/FilterButton/FilterButton.tsx
@@ -30,7 +30,7 @@ interface FilterButtonProps {
  * @param root0.isSelected
  */
 function FilterButton({ content, onClick, isSelected }: FilterButtonProps) {
-  const selectedStyle = 'bg-hunter-green text-white font-lato text-base font-normal rounded-lg';
+  const selectedStyle = 'bg-hunter-green text-white font-lato text-base font-normal rounded-lg w-auto';
   
 
   const buttonClass = `py-2.5 px-6 whitespace-nowrap text-scary-forest flex-grow font-lato text-base font-normal  ${
