diff --git a/src/app/find-properties/[[...opa_id]]/page.tsx b/src/app/find-properties/[[...opa_id]]/page.tsx index 587bde18..c7a1f809 100644 --- a/src/app/find-properties/[[...opa_id]]/page.tsx +++ b/src/app/find-properties/[[...opa_id]]/page.tsx @@ -18,6 +18,7 @@ import { ThemeButton } from '../../../components/ThemeButton'; import { useRouter } from 'next/navigation'; import { ViewState } from 'react-map-gl'; import { PiX } from 'react-icons/pi'; +import DataDisclaimerModal from '@/components/DataDisclaimerModal'; export type BarClickOptions = 'filter' | 'download' | 'detail' | 'list'; @@ -209,6 +210,7 @@ const MapPage = ({ params }: MapPageProps) => { return ( +
{ fov="0.7" /> +
diff --git a/src/components/DataDisclaimerModal.tsx b/src/components/DataDisclaimerModal.tsx new file mode 100644 index 00000000..31d1b3a7 --- /dev/null +++ b/src/components/DataDisclaimerModal.tsx @@ -0,0 +1,79 @@ +import { + Modal, + ModalContent, + ModalHeader, + ModalBody, + ModalFooter, + useDisclosure, +} from '@nextui-org/react'; +import { ThemeButton } from './ThemeButton'; +import { PiX } from 'react-icons/pi'; +import { useEffect, useState } from 'react'; + +export default function DataDisclaimerModal() { + const { isOpen, onOpen, onClose } = useDisclosure(); + const [isClientSide, setIsClientSide] = useState(false); + + // Use useEffect to check if modal has been shown and open it if not + useEffect(() => { + setIsClientSide(true); // Ensure client-side rendering + + const hasSeenModal = localStorage.getItem('hasSeenModal'); // Check localStorage + + if (!hasSeenModal) { + onOpen(); // Open modal if not seen before + } + }, [onOpen]); + + const closeHandler = () => { + localStorage.setItem('hasSeenModal', 'true'); // Set flag so modal doesn't show again + onClose(); // Close modal + }; + + if (!isClientSide) return null; + + return ( + <> + + + +

Disclaimer

+ } + onPress={closeHandler} // Close modal and set flag + /> +
+ + +

+ The City of Philadelphia recently stopped collecting key + information used in determining which properties in the city are + likely vacant. We are currently in conversations with relevant + partners about how to address this challenge. In the meantime, + please be advised that the vacancy data that we are showing here + have not been updated since July of 2024. +

+
+ + + +
+
+ + ); +}