Go to Map
diff --git a/src/app/featuredToursPage/[tourId]/page.tsx b/src/app/featuredToursPage/[tourId]/page.tsx
deleted file mode 100644
index dd1f5cbf..00000000
--- a/src/app/featuredToursPage/[tourId]/page.tsx
+++ /dev/null
@@ -1,137 +0,0 @@
-'use client';
-
-import React, { useEffect, useState } from 'react';
-import Image from 'next/image';
-import Link from 'next/link';
-
-import { fetchAllDisplays } from '../../../supabase/displays/queries';
-import { fetchMedia } from '../../../supabase/media/queries';
-import { fetchTour } from '../../../supabase/tours/queries';
-import { fetchTourDisplays } from '../../../supabase/tour_displays/queries';
-import { fetchTourMedia } from '../../../supabase/tour_media/queries';
-import {
- DisplayRow,
- MediaRow,
- TourDisplaysRow,
- TourMediaRow,
- TourRow,
-} from '../../../types/types';
-
-import BackButton from '../../../components/userComponents/BackButton/BackButton';
-import NavBar from '../../../components/userComponents/navBar/navBar';
-
-/**
- * @param params -
- * @param params.params -
- * @param params.params.tourId - The tour ID
- * @returns The tour start page
- */
-export default function TourStartPage({
- params,
-}: {
- params: { tourId: string };
-}) {
- const [tour, setTour] = useState();
- const [tourDisplays, setTourDisplays] = useState([]);
- const [displays, setDisplays] = useState([]);
- const [tourMedia, setTourMedia] = useState([]);
- const [media, setMedia] = useState([]);
-
- useEffect(() => {
- // Fetch tour, tour displays, and tour media data
- const fetchData = async () => {
- const fetchedTour = await fetchTour(params.tourId);
- setTour(fetchedTour);
- const fetchedTourDisplays = await fetchTourDisplays(params.tourId);
- setTourDisplays(fetchedTourDisplays);
- const fetchedDisplays = await fetchAllDisplays();
- setDisplays(fetchedDisplays);
- const fetchedTourMedia = await fetchTourMedia(params.tourId);
- setTourMedia(fetchedTourMedia);
- const fetchedMedia = await fetchMedia();
- setMedia(fetchedMedia);
- };
-
- fetchData();
- }, [params.tourId]);
-
- return (
- tour && (
-
-
-
-
-
-
- {media.length > 0 && (
- m.id === tourMedia[0]?.media_id)?.id}
- src={media.find(m => m.id === tourMedia[0]?.media_id)?.url ?? ''}
- alt={media.find(m => m.id === tourMedia[0]?.media_id)?.text ?? ''}
- layout="fill"
- objectFit="cover"
- priority
- />
- )}
-
-
-
-
-
-
- WELCOME TO
-
-
- {tour.name}
-
-
-
-
- Start Tour
-
-
-
-
-
-
{tour.description}
-
-
-
-
- In this tour
-
-
-
- {tour.stop_count} stops
-
-
-
-
- {tourDisplays.map(tourDisplay => (
-
-
- {tourDisplay.display_order != null
- ? tourDisplay.display_order + 1
- : ''}
- .{' '}
- {
- displays.find(
- display => display.id === tourDisplay.display_id,
- )?.title
- }
-
-
- ))}
-
-
-
-
([]);
- const [tour, setTour] = useState();
- const [tourMedia, setTourMedia] = useState([]);
- const [backLink, setBackLink] = useState(
- `/featuredToursPage/${params.tourId}`,
- );
-
- useEffect(() => {
- // Get tour
- const getTour = async () => {
- const fetchedTour = await fetchTour(params.tourId);
- setTour(fetchedTour);
- };
-
- // Get tour media
- const getTourMedia = async () => {
- const fetchedTourMedia = await fetchTourMedia(params.tourId);
- setTourMedia(fetchedTourMedia);
- };
-
- // Get media
- const getMedia = async () => {
- const fetchedMedia = await fetchMedia();
- setMedia(fetchedMedia);
- };
-
- /**
- * @returns The link to the previous page.
- */
- async function getBackLink() {
- const tourDisplays: TourDisplaysRow[] = await fetchTourDisplays(
- params.tourId,
- );
- setBackLink(
- `/featuredToursPage/${params.tourId}/${
- tourDisplays[tourDisplays.length - 1].display_id
- }`,
- );
- }
-
- getTour();
- getTourMedia();
- getMedia();
- getBackLink();
- }, [params.tourId]);
-
- return (
-
-
-
-
-
-
-
-
-
-
-
- {`You've reached the end of this tour!`}
-
-
-
- Thanks for visiting {tour?.name}.
-
-
-
-
- Back to Virtual Tours
-
-
-
-
-
-
-
-
-
Related Links
-
- {tourMedia.map((tm, index) => (
-
-
-
- {media.find(m => m.id === tm.media_id)?.type}
-
-
- {media.find(m => m.id === tm.media_id)?.title}
-
-
- {index !== tourMedia.length - 1 && (
-
- )}
-
- ))}
-
-
-
-
-
-
([]);
- const [allTourMedia, setAllTourMedia] = useState([]);
- const [media, setMedia] = useState([]);
-
- useEffect(() => {
- // Fetch tour and tour media data
- const fetchData = async () => {
- const fetchedTours = await fetchAllTours();
- setTours(fetchedTours);
- const fetchedAllTourMedia = await fetchAllTourMedia();
- setAllTourMedia(fetchedAllTourMedia);
- const fetchedMedia = await fetchMedia();
- setMedia(fetchedMedia);
- };
-
- fetchData();
- }, []);
-
- return (
-
-
-
-
-
-
-
-
- Virtual Tours
-
-
- Take a virtual sneak peek behind the scenes at our Wildlife Care
- Center. Here you will find outside enclosures where sick, injured, and
- orphaned wildlife recuperate and acclimate before being released back
- into their natural habitat. Choose your favorite animal to start the
- tour.
-
-
-
- {tours.map(
- tour =>
- tour.spotlight === false && (
-
-
- {media.length > 0 && (
-
- m.id ===
- allTourMedia.find(tm => tm.tour_id === tour.id)
- ?.media_id,
- )?.url ?? ''
- }
- alt={
- media.find(
- m =>
- m.id ===
- allTourMedia.find(tm => tm.tour_id === tour.id)
- ?.media_id,
- )?.text ?? ''
- }
- layout="fill"
- objectFit="cover"
- priority
- />
- )}
-
-
- {tour.stop_count} stops
-
-
-
- {tour.name}
-
-
-
-
-
- ),
- )}
-
-
-
+
+
+
+
+
+ Home / Hours & Location
+
+
Hours & Location
+
+
+
+
+
+
Site Information
+
+
+
+
+
+ 24103 Congress Springs Road,
+
+
+
Saratoga, CA 95070
+
+
+
+
+ Monday-Sunday | 9 AM to 6 PM
+
+
+
Closed on holidays*
+
+
+
+
Contact Us
+
+
+
Wildlife Care Center
+
650-340-7022
+
+
+
Peninsula Intake
+
650-340-7022
+
+
+
South Bay Intake
+
408-929-9453
+
+
+
+ If you’ve found a wild animal that appears to be sick,
+ injured, or orphaned, safely contain it and either bring it to
+ our nearest shelter or contact us for guidance.
+
+
+
+
+
+
+
+
+
+
+
+
Hours & Location
+
Site Information
+
+
+
+
+
+
24103 Congress Springs Road,
+
+
Saratoga, CA 95070
+
+
+
+
Monday-Sunday | 9 AM to 6 PM
+
+
Closed on holidays*
+
+
+
Contact Us
+
+
+
Wildlife Care Center
+
650-340-7022
+
+
+
Peninsula Intake
+
650-340-7022
+
+
+
South Bay Intake
+
408-929-9453
+
+
+
+ If you’ve found a wild animal that appears to be sick, injured, or
+ orphaned, safely contain it and either bring it to our nearest shelter
+ or contact us for guidance.
+
+
+
-
-
-
-
-
- Hours & Location
-
-
- Site Information
-
-
-
-
-
-
- 24103 Congress Springs Road, Saratoga, CA 95070
-
-
-
-
-
- Monday-Sunday | 9 AM to 6 PM
-
-
-
- Closed on holidays*
-
-
-
-
- Contact Us
-
-
-
-
- Wildlife Care Center
-
-
650-340-7022
-
-
-
Peninsula Intake
-
650-340-7022
-
-
-
South Bay Intake
-
408-929-9453
-
-
-
- If you've found a wild animal that appears to be sick, injured, or
- orphaned, safely contain it and either bring it to our nearest shelter
- or contact us for guidance.
-
-
-
{children}
diff --git a/src/app/newsFeedPage/page.tsx b/src/app/news/page.tsx
similarity index 97%
rename from src/app/newsFeedPage/page.tsx
rename to src/app/news/page.tsx
index afb2c4f5..3784940e 100644
--- a/src/app/newsFeedPage/page.tsx
+++ b/src/app/news/page.tsx
@@ -3,7 +3,7 @@
import React, { useEffect, useState } from 'react';
import Link from 'next/link';
import BackButton from '../../components/userComponents/BackButton/page';
-import NavBar from '../../components/userComponents/navBar/navBar';
+import NavBar from '../../components/userComponents/NavBar/NavBar';
import { NewsRow } from '../../types/types';
import { fetchAllNewsByDate } from '../../supabase/news/queries';
import NewsDisplay from '../../components/userComponents/NewsDisplay/NewsDisplay';
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 3fa71985..6a95efc1 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -2,7 +2,7 @@
import React from 'react';
import HomeWildlifeSpotlights from '../components/userComponents/HomePageComponents/HomeWildlifeSpotlights/HomeWildlifeSpotlights';
-import NavBar from '../components/userComponents/navBar/navBar';
+import NavBar from '../components/userComponents/NavBar/NavBar';
import VisitorResources from '../components/userComponents/HomePageComponents/VisitorResources/VisitorResources';
import WelcomeGraphic from '../components/userComponents/HomePageComponents/WelcomeGraphic/WelcomeGraphic';
import HomeVirtualTours from '../components/userComponents/HomePageComponents/HomeVirtualTours/HomeVirtualTours';
diff --git a/src/app/siteMapPage/page.tsx b/src/app/site-maps/page.tsx
similarity index 51%
rename from src/app/siteMapPage/page.tsx
rename to src/app/site-maps/page.tsx
index 84cbfc0f..10ffcd8b 100644
--- a/src/app/siteMapPage/page.tsx
+++ b/src/app/site-maps/page.tsx
@@ -2,14 +2,11 @@
import React, { useState } from 'react';
import dynamic from 'next/dynamic';
-import NavBar from '../../components/userComponents/navBar/navBar';
+import NavBar from '../../components/userComponents/NavBar/NavBar';
import FilterButton from '../../components/userComponents/FilterButton/FilterButton';
import { useWebDeviceDetection } from '../../context/WindowWidthContext/WindowWidthContext';
-const filterButtonContent: string[] = [
- 'Virtual Tour Map',
- 'Exhibits Map',
-];
+const filterButtonContent: string[] = ['Virtual Tour Map', 'Exhibits Map'];
const SiteMap = dynamic(
() => import('../../components/userComponents/SiteMap/SiteMap'),
@@ -24,17 +21,16 @@ 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('tours');
const isWebDevice = useWebDeviceDetection();
-
+
const handleFilter = (mapName: string) => {
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');
}
};
@@ -55,17 +51,15 @@ function MapPage() {
);
const renderFilterContainerWide = () => (
-
-
+
{filterButtonContent &&
filterButtonContent.map(text => (
- handleFilter(text)}
- isSelected={selectedMap === text}
+ handleFilter(text)}
+ isSelected={selectedMap === text}
/>
-
))}
@@ -74,44 +68,47 @@ function MapPage() {
return isWebDevice ? (
<>
-
+
-
-
-
- Home / Wildlife Care Center Maps
-
-
-
-
-
Wildlife Care Center Maps
-
-
- {renderFilterContainerWide()}
+
+
+ Home{' '}
+ / Wildlife Care Center Maps
+
+
+
+
+
+ Wildlife Care Center Maps
+
+
+
+ {renderFilterContainerWide()}
+
+
+
+
-
-
-
-
-
) : (
<>
-
-
-
-
Wildlife Care Center Maps
-
+
+
+
+
+ Wildlife Care Center Maps
+
+
- {renderFilterContainer()}
-
-
-
+ {renderFilterContainer()}
+
-
);
}
diff --git a/src/app/spotlightPage/[spotlightId]/[displayId]/page.tsx b/src/app/spotlightPage/[spotlightId]/[displayId]/page.tsx
deleted file mode 100644
index 023a7c85..00000000
--- a/src/app/spotlightPage/[spotlightId]/[displayId]/page.tsx
+++ /dev/null
@@ -1,163 +0,0 @@
-'use client';
-
-import Link from 'next/link';
-import React, { useEffect, useState } from 'react';
-
-import { DisplayRow, MediaRow, TourMediaRow } from '../../../../types/types';
-import NavBar from '../../../../components/userComponents/navBar/navBar';
-import { fetchDisplayFromId } from '../../../../supabase/displays/queries';
-import { fetchDisplayfromSpotlight } from '../../../../supabase/tour_displays/queries';
-import BackButton from '../../../../components/userComponents/BackButton/BackButton';
-import Carousel from '../../../../components/userComponents/ImageScroller/ImageScroller';
-import { fetchImagesForDisplay } from '../../../../supabase/media/queries';
-import { ExternalLinkIcon } from '../../../../../public/icons';
-import { fetchTourMedia } from '../../../../supabase/tour_media/queries';
-
-/**
- * @param root0 -
- * @param root0.params -
- * @param root0.params.displayId - The display ID
- * @param root0.params.spotlightId - The spotlight ID
- * @returns display page
- */
-export default function Page({
- params,
-}: {
- params: { displayId: string; spotlightId: string };
-}) {
- const [display, setDisplay] = useState
([]);
- const [otherDisplays, setOtherDisplays] = useState([]);
- const [media, setMedia] = useState([]);
- const [tourMedia, setTourMedia] = useState([]);
-
- useEffect(() => {
- /**
- * @returns a display
- */
- async function fetchData() {
- try {
- const currentDisplayData: DisplayRow = await fetchDisplayFromId(
- params.displayId,
- );
- setDisplay(currentDisplayData);
-
- const displaysFromSpotlight: DisplayRow[] =
- await fetchDisplayfromSpotlight(params.spotlightId);
- const currentDisplayId = params.displayId;
- const responseDataOtherDisplays = displaysFromSpotlight.filter(
- aDisplay => aDisplay.id !== currentDisplayId,
- );
-
- setOtherDisplays(responseDataOtherDisplays);
- } catch (error) {
- console.error(error);
- }
- }
-
- // Get tour media
- const getTourMedia = async () => {
- const fetchedTourMedia = await fetchTourMedia(params.spotlightId);
- setTourMedia(fetchedTourMedia);
- };
-
- // Fetch the display media
- const fetchDisplayMedia = async () => {
- const displayMedia = await fetchImagesForDisplay(params.displayId);
- setMedia(displayMedia || []);
- };
-
- fetchData();
- getTourMedia();
- fetchDisplayMedia();
- }, []);
-
- return (
-
-
-
-
-
-
- {media.length > 0 ? (
-
- ) : (
-
- )}
-
-
- {display.title}
-
-
- {display.description}
-
-
- {otherDisplays.length > 0 && (
-
-
- More in this spotlight...
-
-
-
- {otherDisplays.map(otherDisplay => (
-
- {otherDisplay.title}
-
-
- ))}
-
-
- )}
-
- {tourMedia.length > 0 && (
-
-
-
-
-
- Related Links
-
-
- {tourMedia.map((tm, index) => (
-
-
-
- {media.find(m => m.id === tm.media_id)?.type}
-
-
- {media.find(m => m.id === tm.media_id)?.title}
-
-
- {index !== tourMedia.length - 1 && (
-
- )}
-
- ))}
-
-
-
-
-
- )}
-
-
-
-
([]);
- const [displays, setDisplays] = useState([]);
- const [media, setMedia] = useState([]);
- const [tourMedia, setTourMedia] = useState([]);
- const [allTourMedia, setAllTourMedia] = useState([]);
- const [relatedSpotlights, setRelatedSpotlights] = useState([]);
-
- useEffect(() => {
- /**
- * @returns data from tour table and display table
- */
- async function fetchData() {
- const responseDataForSpotlight: TourRow = await fetchTour(
- params.spotlightId,
- );
- setSpotlight(responseDataForSpotlight);
-
- const responseDataForDisplays: DisplayRow[] =
- await fetchDisplayfromSpotlight(params.spotlightId);
- setDisplays(responseDataForDisplays);
-
- const responseDataForRelatedSpotlights: TourRow[] =
- await fetchRelatedSpotlightsfromSpotlightId(params.spotlightId);
- setRelatedSpotlights(responseDataForRelatedSpotlights);
- }
-
- // Get tour media
- const getTourMedia = async () => {
- const fetchedTourMedia = await fetchTourMedia(params.spotlightId);
- setTourMedia(fetchedTourMedia);
- };
-
- // Get all tour media
- const getAllTourMedia = async () => {
- const fetchedAllTourMedia = await fetchAllTourMedia();
- setAllTourMedia(fetchedAllTourMedia);
- };
-
- // Get media
- const getMedia = async () => {
- const fetchedMedia = await fetchMedia();
- setMedia(fetchedMedia);
- };
-
- fetchData();
- getTourMedia();
- getMedia();
- getAllTourMedia();
- }, []);
-
- return (
-
-
-
-
-
-
- {media.length > 0 && (
- m.id === tourMedia[0]?.media_id)?.id}
- src={media.find(m => m.id === tourMedia[0]?.media_id)?.url ?? ''}
- alt={media.find(m => m.id === tourMedia[0]?.media_id)?.text ?? ''}
- layout="fill"
- objectFit="cover"
- priority
- />
- )}
-
-
-
- {spotlight.name}
-
-
- {spotlight.description}
-
-
-
- {displays.length > 0 && (
-
-
- In this spotlight...
-
-
-
- {displays.map(display => (
-
- {display.title}
-
-
- ))}
-
-
- )}
-
- {relatedSpotlights.length > 0 && (
-
-
-
-
-
- Related Spotlights
-
-
-
- {relatedSpotlights.map(otherSpotlight => (
-
-
- {media.length > 0 && (
-
- m.id ===
- allTourMedia.find(
- tm => tm.tour_id === otherSpotlight.id,
- )?.media_id,
- )?.id
- }
- src={
- media.find(
- m =>
- m.id ===
- allTourMedia.find(
- tm => tm.tour_id === otherSpotlight.id,
- )?.media_id,
- )?.url ?? ''
- }
- alt={
- media.find(
- m =>
- m.id ===
- allTourMedia.find(
- tm => tm.tour_id === otherSpotlight.id,
- )?.media_id,
- )?.text ?? ''
- }
- layout="fill"
- objectFit="cover"
- priority
- />
- )}
-
-
- {otherSpotlight.name}
-
-
- {otherSpotlight.preview_text}
-
-
-
- ))}
-
-
-
- )}
-
([]);
- const [media, setMedia] = useState([]);
- const [allTourMedia, setAllTourMedia] = useState([]);
-
- useEffect(() => {
- /**
- * @returns spotlight data
- */
- async function fetchData() {
- try {
- const responseData: TourRow[] = await fetchAllSpotlights();
- setSpotlights(responseData);
- } catch (error) {
- console.error(error);
- }
- }
-
- // Get all tour media
- const getAllTourMedia = async () => {
- const fetchedAllTourMedia = await fetchAllTourMedia();
- setAllTourMedia(fetchedAllTourMedia);
- };
-
- // Get media
- const getMedia = async () => {
- const fetchedMedia = await fetchMedia();
- setMedia(fetchedMedia);
- };
-
- fetchData();
- getAllTourMedia();
- getMedia();
- }, []);
-
- return (
-
-
-
-
-
-
-
-
- Our Wildlife Spotlights
-
-
- Wildlife Spotlights offer insights into common questions we receive.
- Browse a Spotlight to learn more about important wildlife topics.
-
-
-
-
- {spotlights.map(spotlight => (
-
-
- {media.length > 0 && (
-
- mediaElement.id ===
- allTourMedia.find(allTourMediaElement => allTourMediaElement.tour_id === spotlight.id)
- ?.media_id,
- )?.id
- }
- src={
- media.find(
- mediaElement =>
- mediaElement.id ===
- allTourMedia.find(allTourMediaElement => allTourMediaElement.tour_id === spotlight.id)
- ?.media_id,
- )?.url ?? ''
- }
- alt={
- media.find(
- mediaElement =>
- mediaElement.id ===
- allTourMedia.find(allTourMediaElement => allTourMediaElement.tour_id === spotlight.id)
- ?.media_id,
- )?.text ?? ''
- }
- layout="fill"
- objectFit="cover"
- priority
- />
- )}
-
-
- {spotlight.name}
-
-
- {spotlight.preview_text}
-
-
-
- ))}
-
-
-
();
const [currentStop, setCurrentStop] = useState();
const [media, setMedia] = useState([]);
- const [prev, setPrev] = useState(
- `/featuredToursPage/${params.tourId}`,
- );
+ const [prev, setPrev] = useState(`/virtual-tours/${params.tourId}`);
const [prevText, setPrevText] = useState('Back');
const [next, setNext] = useState(
- `/featuredToursPage/${params.tourId}/tourEndPage`,
+ `/virtual-tours/${params.tourId}/tour-end`,
);
const [nextText, setNextText] = useState('End Tour');
+ const [isWide, setIsWide] = useState(false);
useEffect(() => {
// Get display
@@ -75,27 +75,27 @@ export default function TourStopPage({
throw new Error('Display not found in tour displays');
} else if (index === 0) {
setNext(
- `/featuredToursPage/${params.tourId}/${
+ `/virtual-tours/${params.tourId}/${
tourDisplays[index + 1].display_id
}`,
);
setNextText('Next Stop');
} else if (index === tourDisplays.length - 1) {
setPrev(
- `/featuredToursPage/${params.tourId}/${
+ `/virtual-tours/${params.tourId}/${
tourDisplays[index - 1].display_id
}`,
);
setPrevText('Last Stop');
} else {
setPrev(
- `/featuredToursPage/${params.tourId}/${
+ `/virtual-tours/${params.tourId}/${
tourDisplays[index - 1].display_id
}`,
);
setPrevText('Last Stop');
setNext(
- `/featuredToursPage/${params.tourId}/${
+ `/virtual-tours/${params.tourId}/${
tourDisplays[index + 1].display_id
}`,
);
@@ -133,37 +133,84 @@ export default function TourStopPage({
fetchDisplayMedia();
}, [params.displayId, params.tourId]);
- return (
-
+ useEffect(() => {
+ if (window) {
+ setIsWide(window.innerWidth >= 1024);
+ }
+ // Update isWide state on window resize
+ const handleResize = () => setIsWide(window.innerWidth >= 1024);
+ window.addEventListener('resize', handleResize);
+ return () => {
+ window.removeEventListener('resize', handleResize);
+ };
+ }, []);
+
+ return isWide ? (
+
- {(currentStop && tour?.stop_count) > 0 && (
-
- )}
-
- {media.length > 0 ? (
-
- ) : (
-
- )}
+
+
+
+
{display && display.title}
+
+ {media.length > 0 &&
+
+
+ {currentStop && tour?.stop_count && (
+
+ )}
+
+
+ {display && display.description}
+
+
+
+
+
+
+
+
+
-
- {display && display.title}
-
-
-
- {display && display.description}
-
-
-
+ ) : (
+
+
+
+
+ {currentStop && tour?.stop_count && (
+
+ )}
+
+
+ {media.length > 0 &&
+
+
+
{display && display.title}
+
+
{display && display.description}
+
+
+
+
+
+
+
-
-
);
diff --git a/src/app/virtual-tours/[tourId]/page.tsx b/src/app/virtual-tours/[tourId]/page.tsx
new file mode 100644
index 00000000..471b1449
--- /dev/null
+++ b/src/app/virtual-tours/[tourId]/page.tsx
@@ -0,0 +1,213 @@
+'use client';
+
+import React, { useEffect, useState } from 'react';
+import Link from 'next/link';
+
+import { fetchAllDisplays } from '../../../supabase/displays/queries';
+import { fetchMedia } from '../../../supabase/media/queries';
+import { fetchTour } from '../../../supabase/tours/queries';
+import { fetchTourDisplays } from '../../../supabase/tour_displays/queries';
+import { fetchTourMedia } from '../../../supabase/tour_media/queries';
+import {
+ DisplayRow,
+ MediaRow,
+ TourDisplaysRow,
+ TourMediaRow,
+ TourRow,
+} from '../../../types/types';
+
+import BackButton from '../../../components/userComponents/BackButton/BackButton';
+import NavBar from '../../../components/userComponents/NavBar/NavBar';
+import ButtonWithText from '../../../components/userComponents/ButtonWithText/ButtonWithText';
+
+/**
+ * @param params -
+ * @param params.params -
+ * @param params.params.tourId - The tour ID
+ * @returns The tour start page
+ */
+export default function TourStartPage({
+ params,
+}: {
+ params: { tourId: string };
+}) {
+ const [tour, setTour] = useState
();
+ const [tourDisplays, setTourDisplays] = useState([]);
+ const [displays, setDisplays] = useState([]);
+ const [tourMedia, setTourMedia] = useState([]);
+ const [media, setMedia] = useState([]);
+ const [isWide, setIsWide] = useState(false);
+
+ useEffect(() => {
+ // Fetch tour, tour displays, and tour media data
+ const fetchData = async () => {
+ const fetchedTour = await fetchTour(params.tourId);
+ setTour(fetchedTour);
+ const fetchedTourDisplays = await fetchTourDisplays(params.tourId);
+ setTourDisplays(fetchedTourDisplays);
+ const fetchedDisplays = await fetchAllDisplays();
+ setDisplays(fetchedDisplays);
+ const fetchedTourMedia = await fetchTourMedia(params.tourId);
+ setTourMedia(fetchedTourMedia);
+ const fetchedMedia = await fetchMedia();
+ setMedia(fetchedMedia);
+ };
+
+ fetchData();
+ }, [params.tourId]);
+
+ useEffect(() => {
+ if (window) {
+ setIsWide(window.innerWidth >= 1024);
+ }
+ // Update isWide state on window resize
+ const handleResize = () => setIsWide(window.innerWidth >= 1024);
+ window.addEventListener('resize', handleResize);
+ return () => {
+ window.removeEventListener('resize', handleResize);
+ };
+ }, []);
+
+ return isWide
+ ? tour && (
+
+
+
+
+
+ {media.length > 0 && (
+
m.id === tourMedia[0]?.media_id)?.id}
+ src={
+ media.find(m => m.id === tourMedia[0]?.media_id)?.url ??
+ ''
+ }
+ alt={
+ media.find(m => m.id === tourMedia[0]?.media_id)?.text ??
+ ''
+ }
+ className="object-cover w-full h-full"
+ />
+ )}
+
+
+
+
+
WELCOME TO
+
{tour.name}
+
+
+
+
+
+
+
In this tour
+
+
{tour.stop_count} stops
+
+
+
+ {tourDisplays.map(tourDisplay => (
+
+
+ {tourDisplay.display_order != null
+ ? tourDisplay.display_order + 1
+ : ''}
+ .{' '}
+ {
+ displays.find(
+ display => display.id === tourDisplay.display_id,
+ )?.title
+ }
+
+
+ ))}
+
+
+
+
+
+
+
+
+
+
+
+
+ {media.length > 0 && (
+
m.id === tourMedia[0]?.media_id)?.id}
+ src={
+ media.find(m => m.id === tourMedia[0]?.media_id)?.url ?? ''
+ }
+ alt={
+ media.find(m => m.id === tourMedia[0]?.media_id)?.text ?? ''
+ }
+ className="object-cover w-full h-full"
+ />
+ )}
+
+
+
+
+
+
WELCOME TO
+
{tour.name}
+
+
+
+
+
+
+
+
+
+
In this tour
+
+
{tour.stop_count} stops
+
+
+
+ {tourDisplays.map(tourDisplay => (
+
+
+ {tourDisplay.display_order != null
+ ? tourDisplay.display_order + 1
+ : ''}
+ .{' '}
+ {
+ displays.find(
+ display => display.id === tourDisplay.display_id,
+ )?.title
+ }
+
+
+ ))}
+
+
+
+
+
();
+ const [backLink, setBackLink] = useState(
+ `/virtual-tours/${params.tourId}`,
+ );
+ const [isWide, setIsWide] = useState(false);
+
+ useEffect(() => {
+ // Fetch tour and back link data
+ const fetchData = async () => {
+ const fetchedTour = await fetchTour(params.tourId);
+ setTour(fetchedTour);
+ const tourDisplays: TourDisplaysRow[] = await fetchTourDisplays(
+ params.tourId,
+ );
+ setBackLink(
+ `/virtual-tours/${params.tourId}/${
+ tourDisplays[tourDisplays.length - 1].display_id
+ }`,
+ );
+ };
+
+ fetchData();
+ }, [params.tourId]);
+
+ useEffect(() => {
+ if (window) {
+ setIsWide(window.innerWidth >= 1024);
+ }
+ // Update isWide state on window resize
+ const handleResize = () => setIsWide(window.innerWidth >= 1024);
+ window.addEventListener('resize', handleResize);
+ return () => {
+ window.removeEventListener('resize', handleResize);
+ };
+ }, []);
+
+ return isWide ? (
+
+
+
+
+
+
+
+
+ You’ve reached the end of this tour!
+
+
+
Thanks for visiting {tour?.name}.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ You’ve reached the end of this tour!
+
+
+
Thanks for visiting {tour?.name}.
+
+
+
+
+
+
+
+
+
+
+
([]);
+ const [allTourMedia, setAllTourMedia] = useState([]);
+ const [media, setMedia] = useState([]);
+ const [isWide, setIsWide] = useState(false);
+
+ useEffect(() => {
+ // Fetch tour and tour media data
+ const fetchData = async () => {
+ const fetchedTours = await fetchAllTours();
+ setTours(fetchedTours);
+ const fetchedAllTourMedia = await fetchAllTourMedia();
+ setAllTourMedia(fetchedAllTourMedia);
+ const fetchedMedia = await fetchMedia();
+ setMedia(fetchedMedia);
+ };
+
+ fetchData();
+ }, []);
+
+ useEffect(() => {
+ if (window) {
+ setIsWide(window.innerWidth >= 1024);
+ }
+ // Update isWide state on window resize
+ const handleResize = () => setIsWide(window.innerWidth >= 1024);
+ window.addEventListener('resize', handleResize);
+ return () => {
+ window.removeEventListener('resize', handleResize);
+ };
+ }, []);
+
+ return (
+
+
+
+ {isWide ? (
+
+
+
+
+ Home / Virtual Tours
+
+
Virtual Tours
+
+ Take a virtual sneak peek behind the scenes at our Wildlife Care
+ Center. Here you will find outside enclosures where sick,
+ injured, and orphaned wildlife recuperate and acclimate before
+ being released back into their natural habitat. Choose your
+ favorite animal to start the tour.
+
+
+
+
+
+ {tours.map(
+ tour =>
+ tour.spotlight === false && (
+
+
+ {media.length > 0 && (
+
+ m.id ===
+ allTourMedia.find(
+ tm => tm.tour_id === tour.id,
+ )?.media_id,
+ )?.url ?? ''
+ }
+ alt={
+ media.find(
+ m =>
+ m.id ===
+ allTourMedia.find(
+ tm => tm.tour_id === tour.id,
+ )?.media_id,
+ )?.text ?? ''
+ }
+ className="object-cover w-full h-full"
+ />
+ )}
+
+
+ {tour.stop_count} stops
+
+
+
+ {tour.name}
+
+
+
+
+ ),
+ )}
+
+
+
+ ) : (
+
+
+
+
+
+
Virtual Tours
+
+ Take a virtual sneak peek behind the scenes at our Wildlife Care
+ Center. Here you will find outside enclosures where sick, injured,
+ and orphaned wildlife recuperate and acclimate before being
+ released back into their natural habitat. Choose your favorite
+ animal to start the tour.
+
+
+
+ {tours.map(
+ tour =>
+ tour.spotlight === false && (
+
+
+ {media.length > 0 && (
+
+ m.id ===
+ allTourMedia.find(
+ tm => tm.tour_id === tour.id,
+ )?.media_id,
+ )?.url ?? ''
+ }
+ alt={
+ media.find(
+ m =>
+ m.id ===
+ allTourMedia.find(
+ tm => tm.tour_id === tour.id,
+ )?.media_id,
+ )?.text ?? ''
+ }
+ className="object-cover w-full h-full"
+ />
+ )}
+
+
+ {tour.stop_count} stops
+
+
+
+ {tour.name}
+
+
+
+
+
+
+ ),
+ )}
+
+
+
+ )}
+
();
+ const [otherDisplays, setOtherDisplays] = useState([]);
+ const [media, setMedia] = useState([]);
+ const [spotlight, setSpotlight] = useState();
+ const [isWide, setIsWide] = useState(false);
+
+ useEffect(() => {
+ /**
+ * @returns a display
+ */
+ async function fetchData() {
+ const currentDisplayData: DisplayRow = await fetchDisplayFromId(
+ params.displayId,
+ );
+ setDisplay(currentDisplayData);
+
+ const displaysFromSpotlight: DisplayRow[] =
+ await fetchDisplayfromSpotlight(params.spotlightId);
+ const currentDisplayId = params.displayId;
+ const responseDataOtherDisplays = displaysFromSpotlight.filter(
+ aDisplay => aDisplay.id !== currentDisplayId,
+ );
+
+ setOtherDisplays(responseDataOtherDisplays);
+ const responseDataForSpotlight: TourRow = await fetchTour(
+ params.spotlightId,
+ );
+ setSpotlight(responseDataForSpotlight);
+ }
+
+ // Fetch the display media
+ const fetchDisplayMedia = async () => {
+ const displayMedia = await fetchImagesForDisplay(params.displayId);
+ setMedia(displayMedia || []);
+ };
+
+ fetchData();
+ fetchDisplayMedia();
+ }, [params.displayId, params.spotlightId]);
+
+ useEffect(() => {
+ if (window) {
+ setIsWide(window.innerWidth >= 1024);
+ }
+ // Update isWide state on window resize
+ const handleResize = () => setIsWide(window.innerWidth >= 1024);
+ window.addEventListener('resize', handleResize);
+ return () => {
+ window.removeEventListener('resize', handleResize);
+ };
+ }, []);
+
+ return isWide ? (
+
+
+
+
+
+
{spotlight?.name}
+
{display?.title}
+
+
+
+
+ {media.length > 0 &&
+
{display?.description}
+
+ {otherDisplays.length > 0 && (
+
+
More in this spotlight...
+
+ {otherDisplays.map(otherDisplay => (
+
+
+
+
+ ))}
+
+
+
+
+
+ )}
+
+
+
+
+
+
+
+
+
+ {media.length > 0 &&
+
+
+
+
{spotlight?.name}
+
{display?.title}
+
+
{display?.description}
+
+
+ {otherDisplays.length > 0 && (
+
+
More in this spotlight...
+
+
+ {otherDisplays.map(otherDisplay => (
+
+
+
+
+ ))}
+
+
+ )}
+
+
+
+
+
();
+ const [displays, setDisplays] = useState([]);
+ const [media, setMedia] = useState([]);
+ const [tourMedia, setTourMedia] = useState([]);
+ const [allTourMedia, setAllTourMedia] = useState([]);
+ const [relatedSpotlights, setRelatedSpotlights] = useState([]);
+ const [isWide, setIsWide] = useState(false);
+
+ useEffect(() => {
+ /**
+ * @returns data from tour table and display table
+ */
+ async function fetchData() {
+ const responseDataForSpotlight: TourRow = await fetchTour(
+ params.spotlightId,
+ );
+ setSpotlight(responseDataForSpotlight);
+
+ const responseDataForDisplays: DisplayRow[] =
+ await fetchDisplayfromSpotlight(params.spotlightId);
+ setDisplays(responseDataForDisplays);
+
+ const responseDataForRelatedSpotlights: TourRow[] =
+ await fetchRelatedSpotlightsfromSpotlightId(params.spotlightId);
+ setRelatedSpotlights(responseDataForRelatedSpotlights);
+ }
+
+ // Get tour media
+ const getTourMedia = async () => {
+ const fetchedTourMedia = await fetchTourMedia(params.spotlightId);
+ setTourMedia(fetchedTourMedia);
+ };
+
+ // Get all tour media
+ const getAllTourMedia = async () => {
+ const fetchedAllTourMedia = await fetchAllTourMedia();
+ setAllTourMedia(fetchedAllTourMedia);
+ };
+
+ // Get media
+ const getMedia = async () => {
+ const fetchedMedia = await fetchMedia();
+ setMedia(fetchedMedia);
+ };
+
+ fetchData();
+ getTourMedia();
+ getMedia();
+ getAllTourMedia();
+ }, [params.spotlightId]);
+
+ useEffect(() => {
+ if (window) {
+ setIsWide(window.innerWidth >= 1024);
+ }
+ // Update isWide state on window resize
+ const handleResize = () => setIsWide(window.innerWidth >= 1024);
+ window.addEventListener('resize', handleResize);
+ return () => {
+ window.removeEventListener('resize', handleResize);
+ };
+ }, []);
+
+ return isWide ? (
+
+
+
+
+
+
+
+
+ Home / Wildlife Spotlights
+ {' '}
+ / {spotlight?.name}
+
+
+
{spotlight?.name}
+
+
+
+
+
+
+
+ {media.length > 0 && (
+
m.id === tourMedia[0]?.media_id)?.id}
+ src={
+ media.find(m => m.id === tourMedia[0]?.media_id)?.url ??
+ ''
+ }
+ alt={
+ media.find(m => m.id === tourMedia[0]?.media_id)?.text ??
+ ''
+ }
+ className="w-full h-full object-cover"
+ />
+ )}
+
+
+
+ {spotlight?.description}
+
+
+
+
+
+ {relatedSpotlights.length > 0 && (
+
+
Related Spotlights
+
+
+
+ )}
+
+
+ {displays.length > 0 && (
+
+
In this spotlight...
+
+
+ {displays.map(display => (
+
+
+
+
+ ))}
+
+
+ )}
+
+
+
+
+
+
+
+
+
+ {media.length > 0 && (
+
m.id === tourMedia[0]?.media_id)?.id}
+ src={media.find(m => m.id === tourMedia[0]?.media_id)?.url ?? ''}
+ alt={media.find(m => m.id === tourMedia[0]?.media_id)?.text ?? ''}
+ className="w-full h-full object-cover relative"
+ />
+ )}
+
+
+
+
+
{spotlight?.name}
+
{spotlight?.description}
+
+
+ {displays.length > 0 && (
+
+
+
In this spotlight...
+
+
+ {displays.map(display => (
+
+
+
+
+ ))}
+
+
+
+ )}
+
+
+
+
+
+ {relatedSpotlights.length > 0 && (
+
+
Related Spotlights
+
+
+
+ )}
+
+
([]);
+ const [media, setMedia] = useState([]);
+ const [allTourMedia, setAllTourMedia] = useState([]);
+ const [isWide, setIsWide] = useState(false);
+
+ useEffect(() => {
+ /**
+ * @returns spotlight data
+ */
+ async function fetchData() {
+ const responseData: TourRow[] = await fetchAllSpotlights();
+ setSpotlights(responseData);
+ }
+
+ // Get all tour media
+ const getAllTourMedia = async () => {
+ const fetchedAllTourMedia = await fetchAllTourMedia();
+ setAllTourMedia(fetchedAllTourMedia);
+ };
+
+ // Get media
+ const getMedia = async () => {
+ const fetchedMedia = await fetchMedia();
+ setMedia(fetchedMedia);
+ };
+
+ fetchData();
+ getAllTourMedia();
+ getMedia();
+ }, []);
+
+ useEffect(() => {
+ if (window) {
+ setIsWide(window.innerWidth >= 1024);
+ }
+ // Update isWide state on window resize
+ const handleResize = () => setIsWide(window.innerWidth >= 1024);
+ window.addEventListener('resize', handleResize);
+ return () => {
+ window.removeEventListener('resize', handleResize);
+ };
+ }, []);
+
+ return (
+
+
+
+ {isWide ? (
+
+
+
+ Home / Wildlife
+ Spotlights
+
+
+
Wildlife Spotlights
+
+ Wildlife Spotlights provide answers to many frequently asked
+ questions. You’ll find information on topics ranging from what
+ to do if you encounter a baby bird lost from its nest to how to
+ deal with nuisance animals in your yard.
+
+
+
+
+
+
+
+ ) : (
+
+
+
+
+
+
+
Wildlife Spotlights
+
+ Wildlife Spotlights provide answers to many frequently asked
+ questions. You’ll find information on topics ranging from what
+ to do if you encounter a baby bird lost from its nest to how to
+ deal with nuisance animals in your yard.
+
+
+
+
+
+
+ )}
+
+
+
);
}
diff --git a/src/components/userComponents/ButtonWithText/ButtonWithText.tsx b/src/components/userComponents/ButtonWithText/ButtonWithText.tsx
new file mode 100644
index 00000000..06bc5a7b
--- /dev/null
+++ b/src/components/userComponents/ButtonWithText/ButtonWithText.tsx
@@ -0,0 +1,25 @@
+import React, { useState } from 'react';
+
+/**
+ * @param root0 -
+ * @param root0.text - Text to display on button
+ * @returns A button with text
+ */
+export default function ButtonWithText({ text }: { text: string }) {
+ const [isClicked, setIsClicked] = useState(false);
+ const handleClick = () => {
+ setIsClicked(true);
+ };
+ return (
+
+ {text}
+
+ );
+}
diff --git a/src/components/userComponents/ExhibitPreview/ExhibitPreview.tsx b/src/components/userComponents/ExhibitPreview/ExhibitPreview.tsx
index aeeb0315..4d7ec7d5 100644
--- a/src/components/userComponents/ExhibitPreview/ExhibitPreview.tsx
+++ b/src/components/userComponents/ExhibitPreview/ExhibitPreview.tsx
@@ -6,7 +6,6 @@ import Image from 'next/image';
import Link from 'next/link';
import styles from './ExhibitPreview.module.css';
-
/**
*
* @param props - props for the ExhibitPreview component
diff --git a/src/components/userComponents/FilterButton/FilterButton.tsx b/src/components/userComponents/FilterButton/FilterButton.tsx
index cb7eb7db..d7b6bb18 100644
--- a/src/components/userComponents/FilterButton/FilterButton.tsx
+++ b/src/components/userComponents/FilterButton/FilterButton.tsx
@@ -24,11 +24,14 @@ interface FilterButtonProps {
* @returns JSX.Element
*/
function FilterButton({ content, onClick, isSelected }: FilterButtonProps) {
- const baseStyle = 'py-2.5 px-3 whitespace-nowrap font-lato text-base font-normal rounded-lg flex-grow text-center';
+ const baseStyle =
+ 'py-2.5 px-3 whitespace-nowrap font-lato text-base font-normal rounded-lg flex-grow text-center';
const selectedStyle = 'bg-hunter-green text-white';
const unselectedStyle = 'bg-mint-cream text-scary-forest';
- const buttonClass = `${baseStyle} ${isSelected ? selectedStyle : unselectedStyle}`;
+ const buttonClass = `${baseStyle} ${
+ isSelected ? selectedStyle : unselectedStyle
+ }`;
return (
See All
{tourWithMedia.map((tour: TourWithMediaRow) => (
-
+
See all virtual tours
diff --git a/src/components/userComponents/HomePageComponents/HomeWildlifeSpotlights/HomeWildlifeSpotlights.tsx b/src/components/userComponents/HomePageComponents/HomeWildlifeSpotlights/HomeWildlifeSpotlights.tsx
index 88d94e48..4f5dd282 100644
--- a/src/components/userComponents/HomePageComponents/HomeWildlifeSpotlights/HomeWildlifeSpotlights.tsx
+++ b/src/components/userComponents/HomePageComponents/HomeWildlifeSpotlights/HomeWildlifeSpotlights.tsx
@@ -48,7 +48,7 @@ function HomeWildlifeSpotlights(): React.JSX.Element {
See All
@@ -57,7 +57,10 @@ function HomeWildlifeSpotlights(): React.JSX.Element {
{spotlightsWithMedia.map((spotlight: SpotlightWithMediaRow) => (
-
+
See all wildlife spotlights
diff --git a/src/components/userComponents/HomePageComponents/VisitorResources/AdmissionButton.tsx b/src/components/userComponents/HomePageComponents/VisitorResources/AdmissionButton.tsx
index 524d5f35..21545b44 100644
--- a/src/components/userComponents/HomePageComponents/VisitorResources/AdmissionButton.tsx
+++ b/src/components/userComponents/HomePageComponents/VisitorResources/AdmissionButton.tsx
@@ -14,7 +14,7 @@ function AdmissionButton() {
bg-ivory group hover:bg-mint-cream focus:bg-mint-cream
shadow-darkest focus:shadow-vignette
px-4 py-4 web:px-8 web:py-6"
- href="/hoursAdmissionPage"
+ href="/hours-and-location"
>
+
+
{media.length > 1 && (
-
-
+
-
-
- )}
-
-
- {media.length > 0 && (
-
+
-
- {media.length > 1 && (
-
-
-
-
)}
);
diff --git a/src/components/userComponents/LastStopButton/LastStopButton.tsx b/src/components/userComponents/LastStopButton/LastStopButton.tsx
index 0eaa7253..03fc3a31 100644
--- a/src/components/userComponents/LastStopButton/LastStopButton.tsx
+++ b/src/components/userComponents/LastStopButton/LastStopButton.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
import Link from 'next/link';
import { CaretLeft } from '../../../../public/icons';
@@ -14,16 +14,21 @@ interface LastStopButtonProps {
* @returns the Last Stop button
*/
export default function LastStopButton({ text, link }: LastStopButtonProps) {
+ const [isClicked, setIsClicked] = useState(false);
+ const handleClick = () => {
+ setIsClicked(true);
+ };
return (
);
diff --git a/src/components/userComponents/NextStopButton/NextStopButton.tsx b/src/components/userComponents/NextStopButton/NextStopButton.tsx
index 53f404a7..5059154e 100644
--- a/src/components/userComponents/NextStopButton/NextStopButton.tsx
+++ b/src/components/userComponents/NextStopButton/NextStopButton.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
import Link from 'next/link';
import { CaretRight } from '../../../../public/icons';
@@ -14,13 +14,20 @@ interface NextStopButtonProps {
* @returns the Next Stop button
*/
export default function NextStopButton({ text, link }: NextStopButtonProps) {
+ const [isClicked, setIsClicked] = useState(false);
+ const handleClick = () => {
+ setIsClicked(true);
+ };
return (
diff --git a/src/components/userComponents/ProgressBar/ProgressBar.tsx b/src/components/userComponents/ProgressBar/ProgressBar.tsx
index 79127d38..4016cc4d 100644
--- a/src/components/userComponents/ProgressBar/ProgressBar.tsx
+++ b/src/components/userComponents/ProgressBar/ProgressBar.tsx
@@ -18,9 +18,9 @@ function ProgressBar({ tourName, currentStop, totalStops }: ProgressBarProps) {
return (
-
-
-
{tourName} Tour
+
+
+
{tourName} Tour
-
+
{currentStop}/{totalStops}
-
+
diff --git a/src/components/userComponents/RelatedLinks/RelatedLinks.tsx b/src/components/userComponents/RelatedLinks/RelatedLinks.tsx
new file mode 100644
index 00000000..84139e19
--- /dev/null
+++ b/src/components/userComponents/RelatedLinks/RelatedLinks.tsx
@@ -0,0 +1,61 @@
+import React, { useEffect, useState } from 'react';
+
+import { LinksRow } from '../../../types/types';
+
+import fetchAllLinks from '../../../supabase/links/queries';
+import { ExternalLinkIcon } from '../../../../public/icons';
+
+/**
+ * @returns the Related Links component
+ */
+export default function RelatedLinks() {
+ const [links, setLinks] = useState
([]);
+
+ useEffect(() => {
+ const fetchData = async () => {
+ const fetchedLinks = await fetchAllLinks();
+ setLinks(fetchedLinks);
+ };
+ fetchData();
+ }, []);
+
+ if (links.length === 0) {
+ return null;
+ }
+
+ return (
+
+ );
+}
diff --git a/src/components/userComponents/SiteMap/ExhibitPreviewCard.tsx b/src/components/userComponents/SiteMap/ExhibitPreviewCard.tsx
index 4260aa3b..6c80c793 100644
--- a/src/components/userComponents/SiteMap/ExhibitPreviewCard.tsx
+++ b/src/components/userComponents/SiteMap/ExhibitPreviewCard.tsx
@@ -51,7 +51,6 @@ function ExhibitPreviewCard({
}
}, [isWebDevice]);
-
useEffect(() => {
handleResize();
window.addEventListener('resize', handleResize);
@@ -72,18 +71,18 @@ function ExhibitPreviewCard({
useEffect(() => {
const fetchDetails = async () => {
if (!tour.image) {
- setLoading(true);
-
- let imageUrl = '';
- let displayName = '';
-
- imageUrl = tour.image;
- displayName = tour.category;
+ setLoading(true);
+
+ let imageUrl = '';
+ let displayName = '';
- // Set state variables
- setPreviewImage(imageUrl);
- setname1(displayName);
- setLoading(false);
+ imageUrl = tour.image;
+ displayName = tour.category;
+
+ // Set state variables
+ setPreviewImage(imageUrl);
+ setname1(displayName);
+ setLoading(false);
}
};
@@ -93,48 +92,78 @@ function ExhibitPreviewCard({
/** route this to spotlights */
return (
-
-
- {!loading && (
-
-
- )}
-
{
- if (handleClick && e.key === 'Enter') {
- handleClick();
- }
- }} role="button" tabIndex={0}>
-
-
{
- e.stopPropagation();
- handleClose();
- }}>
-
-
-
+
+
+ {!loading && (
+
+
-
-
- {name1}
+ )}
+
{
+ if (handleClick && e.key === 'Enter') {
+ handleClick();
+ }
+ }}
+ role="button"
+ tabIndex={0}
+ >
+
+
{
+ e.stopPropagation();
+ handleClose();
+ }}
+ >
+
+
+
+
+
+
+ {name1}
+
-
- {description}
-
-
- Go to exhibit >
-
-
+
+
+ {description}{' '}
+
+
+
+ Go to exhibit >
+
+
+
-
);
}
diff --git a/src/components/userComponents/SiteMap/MapInteractionHandler.tsx b/src/components/userComponents/SiteMap/MapInteractionHandler.tsx
index 289afc93..a99f9746 100644
--- a/src/components/userComponents/SiteMap/MapInteractionHandler.tsx
+++ b/src/components/userComponents/SiteMap/MapInteractionHandler.tsx
@@ -7,7 +7,7 @@ import { LatLngExpression } from 'leaflet';
* @param {L.LatLng} props.center - The center to which the map should fly. Must include 'lat' and 'lng' properties.
* @returns {null} Nothing is rendered by this component.
*/
-function RecenterMap({ center } : { center: LatLngExpression }) {
+function RecenterMap({ center }: { center: LatLngExpression }) {
const map = useMap();
useEffect(() => {
diff --git a/src/components/userComponents/SiteMap/SiteMap.tsx b/src/components/userComponents/SiteMap/SiteMap.tsx
index 5605d6d6..50c22a5e 100644
--- a/src/components/userComponents/SiteMap/SiteMap.tsx
+++ b/src/components/userComponents/SiteMap/SiteMap.tsx
@@ -62,15 +62,16 @@ function SiteMap({ mode }: SiteMapProps) {
const [selectedMarker, setSelectedMarker] = useState
(null);
const [loading, setLoading] = useState(true);
const isWebDevice = useWebDeviceDetection();
- const cacheRef = useRef<{ tours?: TourRow[], exhibits?: ExhibitWithCategoryRow[] }>({});
+ const cacheRef = useRef<{
+ tours?: TourRow[];
+ exhibits?: ExhibitWithCategoryRow[];
+ }>({});
-
-
useEffect(() => {
/**
* This useEffect will manage fetching Data depending on if the chosen map is tours or exhibits.
* It will also manage the initial state of the map when no marker is chosen
- *
+ *
* It will fetch tours when spotlights == True
*/
async function fetchData() {
@@ -125,7 +126,6 @@ function SiteMap({ mode }: SiteMapProps) {
setSelectedTour(null);
}, [mode]);
-
useEffect(() => {
if (!selectedTour) {
setSelectedMarker(null);
@@ -184,17 +184,17 @@ function SiteMap({ mode }: SiteMapProps) {
);
})
)}
- {selectedTour && (
- isWebDevice ? (
+ {selectedTour &&
+ (isWebDevice ? (
{mode === 'tours' ? (
{mode === 'tours' ? (
- )
- )}
-
+ ))}
+
{selectedTour == null && (false);
const [previewImage, setPreviewImage] = useState('');
const [name1, setname1] = useState('');
@@ -62,44 +66,76 @@ function TourPreviewCard({ tour, handleClick, handleClose }: TourCardProps): JSX
}, [tour]);
return (
-
-
+
+
{!loading && (
)}
-
{
- if (e.key === 'Enter' && handleClick) {
- handleClick();
- }
- }} role="button" tabIndex={0}>
+
{
+ if (e.key === 'Enter' && handleClick) {
+ handleClick();
+ }
+ }}
+ role="button"
+ tabIndex={0}
+ >
-
{
e.stopPropagation();
- handleClose();
- }}>
-
-
{category}
+ handleClose();
+ }}
+ >
+
+
+ {category}
+
-
-
+
-
+
- {name1}
+
+ {name1}
+
- {description}
+
+ {description}
+
-
+
Go to virtual tour >
diff --git a/src/components/userComponents/SpotlightDisplayButton/SpotlightDisplayButton.tsx b/src/components/userComponents/SpotlightDisplayButton/SpotlightDisplayButton.tsx
new file mode 100644
index 00000000..193f857c
--- /dev/null
+++ b/src/components/userComponents/SpotlightDisplayButton/SpotlightDisplayButton.tsx
@@ -0,0 +1,25 @@
+import React, { useState } from 'react';
+
+/**
+ * @param root0 -
+ * @param root0.text - Text to display on button
+ * @returns A spotlight display button
+ */
+export default function SpotlightDisplayButton({ text }: { text: string }) {
+ const [isClicked, setIsClicked] = useState(false);
+ const handleClick = () => {
+ setIsClicked(true);
+ };
+ return (
+
+ {text}
+
+ );
+}
diff --git a/src/components/userComponents/TextButton/TextButton.tsx b/src/components/userComponents/TextButton/TextButton.tsx
new file mode 100644
index 00000000..a47e59f4
--- /dev/null
+++ b/src/components/userComponents/TextButton/TextButton.tsx
@@ -0,0 +1,23 @@
+import React, { useState } from 'react';
+
+/**
+ * @param root0 -
+ * @param root0.text - Text to display
+ * @returns A text that acts like a button
+ */
+export default function TextButton({ text }: { text: string }) {
+ const [isClicked, setIsClicked] = useState(false);
+ const handleClick = () => {
+ setIsClicked(true);
+ };
+ return (
+
+ {text}
+
+ );
+}
diff --git a/src/components/userComponents/emailPopup/page.tsx b/src/components/userComponents/emailPopup/page.tsx
index b1e40683..af4b9353 100644
--- a/src/components/userComponents/emailPopup/page.tsx
+++ b/src/components/userComponents/emailPopup/page.tsx
@@ -148,20 +148,20 @@ export default function EmailPopup({ backLink }: { backLink: string }) {
};
// eslint-disable-next-line @typescript-eslint/no-explicit-any
- const handleChange = (e : any) => {
+ const handleChange = (e: any) => {
setInputValue(e.target.value);
setShowError(false);
};
// const { error } = await supabase.from('emails').insert({ id: 1, name: 'Denmark' })
- const isValidEmail = (email : string) => {
+ const isValidEmail = (email: string) => {
const emailRegex = /^[^\s@]+@[^\s@]+\.(com|ca)$/;
return emailRegex.test(email);
};
// eslint-disable-next-line @typescript-eslint/no-explicit-any, consistent-return
- const handleSubmit = async (e : any) => {
+ const handleSubmit = async (e: any) => {
e.preventDefault();
if (!inputValue.trim()) {
diff --git a/src/components/userComponents/navBar/navBar.tsx b/src/components/userComponents/navBar/navBar.tsx
index c524076f..d9864e07 100644
--- a/src/components/userComponents/navBar/navBar.tsx
+++ b/src/components/userComponents/navBar/navBar.tsx
@@ -1,5 +1,6 @@
-import React, { useState, useEffect } from 'react';
import Link from 'next/link';
+import React, { useState, useEffect } from 'react';
+
import { HamburgerMenu, CloseMenu } from '../../../../public/icons';
/**
@@ -7,6 +8,7 @@ import { HamburgerMenu, CloseMenu } from '../../../../public/icons';
*/
export default function NavBar() {
const [showMenu, setShowMenu] = useState(false);
+ const [isWide, setIsWide] = useState(false);
useEffect(() => {
if (showMenu) {
@@ -16,6 +18,18 @@ export default function NavBar() {
}
}, [showMenu]);
+ useEffect(() => {
+ if (window) {
+ setIsWide(window.innerWidth >= 1024);
+ }
+ // Update isWide state on window resize
+ const handleResize = () => setIsWide(window.innerWidth >= 1024);
+ window.addEventListener('resize', handleResize);
+ return () => {
+ window.removeEventListener('resize', handleResize);
+ };
+ }, []);
+
/**
* Toggles the side menu
*/
@@ -23,85 +37,87 @@ export default function NavBar() {
setShowMenu(!showMenu);
}
- return (
-
-
+ return isWide ? (
+
+
-
-
- {showMenu ?
-
+
+
+
+
+
+ ) : (
+
+
+
+
+
+
+
+
+ {showMenu ?
+
+
+
{showMenu && (
-
-
-
- WELCOME
-
-
- Home
-
-
-
- VISIT
-
-
- Hours & Location
-
-
- Site Maps
-
-
- Exhibits
-
-
-
- LEARN & EXPLORE
-
-
- Virtual Tours
-
-
- Wildlife Spotlights
-
-
- News
-
+
+
+
+
+
+
VISIT
+
+
+
+
+
+
+ LEARN & EXPLORE
+
+
+
+
+
)}
diff --git a/src/supabase/category/queries.ts b/src/supabase/category/queries.ts
index 7dc61968..5dd7978f 100644
--- a/src/supabase/category/queries.ts
+++ b/src/supabase/category/queries.ts
@@ -8,30 +8,29 @@ import { CategoryRow } from '../../types/types';
* @returns color for category, else null
*/
// eslint-disable-next-line import/prefer-default-export
-export async function getCategoryColor1(id: string|number) {
- try {
- const { data, error } = await supabase
- .from('categories')
- .select('color_hex')
- .eq('id', id);
+export async function getCategoryColor1(id: string | number) {
+ try {
+ const { data, error } = await supabase
+ .from('categories')
+ .select('color_hex')
+ .eq('id', id);
if (error) {
console.error('Error fetching from Supabase:', error.message);
return null; // Return null on query error
}
- // 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;
- }
- 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
+ // 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;
}
+ 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
+ }
}
/**
@@ -39,9 +38,9 @@ export async function getCategoryColor1(id: string|number) {
* @returns A promise that resolves to an array of ExhibitRow objects.
*/
export async function fetchAllCategories(): Promise
{
- const { data, error } = await supabase.from('categories').select('*');
- if (error) {
- throw new Error(error.message);
- }
- return data;
- }
\ No newline at end of file
+ const { data, error } = await supabase.from('categories').select('*');
+ if (error) {
+ throw new Error(error.message);
+ }
+ return data;
+}
diff --git a/src/supabase/displays/queries.tsx b/src/supabase/displays/queries.tsx
index ce7e37db..f2e1d925 100644
--- a/src/supabase/displays/queries.tsx
+++ b/src/supabase/displays/queries.tsx
@@ -41,7 +41,7 @@ export async function deleteDisplay(id: string) {
if (error) {
throw new Error(`An error occurred trying to delete displays: ${error}`);
} else {
- fetchDisplays();
+ fetchDisplay(id);
}
}
diff --git a/src/supabase/links/queries.tsx b/src/supabase/links/queries.tsx
new file mode 100644
index 00000000..d77fd9c6
--- /dev/null
+++ b/src/supabase/links/queries.tsx
@@ -0,0 +1,16 @@
+'use client';
+
+import supabase from '../client';
+import { LinksRow } from '../../types/types';
+
+/**
+ * Fetches all links from the database.
+ * @returns A promise that resolves to an array of LinksRow objects.
+ */
+export default async function fetchAllLinks(): Promise {
+ const { data, error } = await supabase.rpc('get_links');
+ if (error) {
+ throw new Error(error.message);
+ }
+ return data;
+}
diff --git a/src/supabase/media/queries.ts b/src/supabase/media/queries.ts
index 891ba21e..e0505e0a 100644
--- a/src/supabase/media/queries.ts
+++ b/src/supabase/media/queries.ts
@@ -36,7 +36,7 @@ export async function fetchImagesForDisplay(displayId: string | undefined) {
/**
*
- * @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 +53,7 @@ export async function fetchImagesForTour(
throw new Error(error.message);
}
- return data;
+ return data;
}
/**
*
diff --git a/src/supabase/tour_displays/queries.tsx b/src/supabase/tour_displays/queries.tsx
index 2dd16c73..66f5522f 100644
--- a/src/supabase/tour_displays/queries.tsx
+++ b/src/supabase/tour_displays/queries.tsx
@@ -41,8 +41,9 @@ export async function fetchMatchingTourDisplayIdsfromSpotlight(tourId: string) {
* @returns given a spotlight ID, get all the displays
*/
export async function fetchDisplayfromSpotlight(spotlightId: string) {
- const displayIds: string[] =
- await fetchMatchingTourDisplayIdsfromSpotlight(spotlightId);
+ const displayIds: string[] = await fetchMatchingTourDisplayIdsfromSpotlight(
+ spotlightId,
+ );
const displays: DisplayRow[] = await fetchDisplaysfromIds(displayIds);
return displays;
}
diff --git a/src/types/supabase.ts b/src/types/supabase.ts
index 568c97e6..15874327 100644
--- a/src/types/supabase.ts
+++ b/src/types/supabase.ts
@@ -4,548 +4,558 @@ 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
- description: string
- id: number
- image: string
- }
+ category: string | null;
+ color_hex: string;
+ created_at: string;
+ description: string | null;
+ id: number;
+ image: string | null;
+ };
Insert: {
- category?: string | null
- color_hex: string
- created_at?: string
- description: string
- id?: number
- image: string
- }
+ category?: string | null;
+ color_hex: string;
+ created_at?: string;
+ description?: string | null;
+ id?: number;
+ image?: string | null;
+ };
Update: {
- category?: string | null
- color_hex?: string
- created_at?: string
- description?: string
- id?: number
- image?: string
- }
- Relationships: []
- }
+ category?: string | null;
+ color_hex?: string;
+ created_at?: string;
+ description?: string | null;
+ id?: number;
+ image?: string | null;
+ };
+ 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
- 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
- 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
- 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;
+ first_name: string | null;
+ id: number;
+ };
Insert: {
- emails?: string | null
- id?: number
- }
+ emails?: string | null;
+ first_name?: string | null;
+ id?: number;
+ };
Update: {
- emails?: string | null
- id?: number
- }
- Relationships: []
- }
+ emails?: string | null;
+ first_name?: string | null;
+ id?: number;
+ };
+ Relationships: [];
+ };
exhibits: {
Row: {
- category_id: number
- coordinates: Json | null
- id: string
- title: string
- }
+ category_id: number;
+ coordinates: Json | null;
+ id: string;
+ title: string;
+ };
Insert: {
- category_id: number
- coordinates?: Json | null
- id?: string
- title: string
- }
+ category_id: number;
+ coordinates?: Json | null;
+ id?: string;
+ title: string;
+ };
Update: {
- category_id?: number
- coordinates?: Json | null
- id?: string
- title?: string
- }
+ 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"]
+ foreignKeyName: 'public_exhibits_category_id_fkey';
+ columns: ['category_id'];
+ isOneToOne: false;
+ referencedRelation: 'categories';
+ referencedColumns: ['id'];
},
- ]
- }
+ ];
+ };
+ links: {
+ Row: {
+ created_at: string;
+ id: string;
+ title: string | null;
+ type: string | null;
+ url: string | null;
+ };
+ Insert: {
+ created_at?: string;
+ id?: string;
+ title?: string | null;
+ type?: string | null;
+ url?: string | null;
+ };
+ Update: {
+ created_at?: string;
+ id?: string;
+ title?: string | null;
+ type?: string | null;
+ url?: string | null;
+ };
+ Relationships: [];
+ };
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
+ Args: Record;
Returns: {
- coordinates: Json
- id: number
- category: string
- description: string
- image: string
- }[]
- }
+ coordinates: Json;
+ id: number;
+ category: string;
+ description: string;
+ image: string;
+ }[];
+ };
+ get_links: {
+ Args: Record;
+ Returns: {
+ id: string;
+ created_at: string;
+ type: string;
+ title: string;
+ url: string;
+ }[];
+ };
get_non_spotlight_tours: {
- Args: Record
+ Args: Record;
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'];
+ }[];
+ };
join_all_spotlights_with_media: {
- Args: Record
+ Args: Record;
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_all_tours_with_media: {
- Args: Record
- 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_all_tours_with_media: {
- Args: Record
+ Args: Record;
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
- }[]
- }
- }
+ 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]
+type PublicSchema = Database[Extract];
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;
diff --git a/src/types/types.ts b/src/types/types.ts
index 5de02824..39e68620 100644
--- a/src/types/types.ts
+++ b/src/types/types.ts
@@ -7,6 +7,7 @@ Any updates to supabase.ts should be reflected here (new tables).
import { Database, Json } from './supabase';
export type DisplayRow = Database['public']['Tables']['displays']['Row'];
+export type LinksRow = Database['public']['Tables']['links']['Row'];
export type MediaRow = Database['public']['Tables']['media']['Row'];
export type TourDisplaysRow =
Database['public']['Tables']['tour_displays']['Row'];
diff --git a/tailwind.config.ts b/tailwind.config.ts
index d2cbeddb..c34d1fcb 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -19,6 +19,7 @@ const config: Config = {
shadow: '#808080',
silver: '#BDBDBD',
ivory: '#FFFDF7',
+ timberwolf: '#E2E2E2',
},
textColor: {
default: '#FFFDF7',
@@ -36,9 +37,6 @@ const config: Config = {
sans: ['Lato'],
lato: ['Lato'],
},
- screens: {
- web: '1024px',
- },
theme: {
fontSize: {
sm: ['14px', '20px'],
+