diff --git a/frontend/src/components/terrestrial-data-disclaimer-dialog.tsx b/frontend/src/components/terrestrial-data-disclaimer-dialog.tsx index 34125427..be4c8564 100644 --- a/frontend/src/components/terrestrial-data-disclaimer-dialog.tsx +++ b/frontend/src/components/terrestrial-data-disclaimer-dialog.tsx @@ -13,10 +13,15 @@ import { import Icon from '@/components/ui/icon'; import { terrestrialDataDisclaimerDialogAtom } from '@/containers/map/store'; import Notification from '@/styles/icons/notification.svg'; +import { FCWithMessages } from '@/types'; -interface TerrestrialDataDisclaimerDialogProps {} +interface TerrestrialDataDisclaimerDialogProps { + onClose?: () => void; +} -const TerrestrialDataDisclaimerDialog = ({}: TerrestrialDataDisclaimerDialogProps) => { +const TerrestrialDataDisclaimerDialog: FCWithMessages = ({ + onClose, +}) => { const t = useTranslations('pages.progress-tracker'); const [, setOpen] = useAtom(terrestrialDataDisclaimerDialogAtom); @@ -39,7 +44,7 @@ const TerrestrialDataDisclaimerDialog = ({}: TerrestrialDataDisclaimerDialogProp @@ -49,4 +54,6 @@ const TerrestrialDataDisclaimerDialog = ({}: TerrestrialDataDisclaimerDialogProp ); }; +TerrestrialDataDisclaimerDialog.messages = ['pages.progress-tracker']; + export default TerrestrialDataDisclaimerDialog; diff --git a/frontend/src/containers/homepage/intro/index.tsx b/frontend/src/containers/homepage/intro/index.tsx index bc897779..f785aca2 100644 --- a/frontend/src/containers/homepage/intro/index.tsx +++ b/frontend/src/containers/homepage/intro/index.tsx @@ -1,7 +1,10 @@ +import { useState } from 'react'; + import Image from 'next/image'; import { useLocale, useTranslations } from 'next-intl'; +import TerrestrialDataDisclaimerDialog from '@/components/terrestrial-data-disclaimer-dialog'; import Icon from '@/components/ui/icon'; import SidebarItem from '@/containers/homepage/intro/sidebar-item'; import { formatPercentage } from '@/lib/utils/formats'; @@ -17,6 +20,8 @@ const Intro: FCWithMessages = ({ onScrollClick }) => { const t = useTranslations('containers.homepage-intro'); const locale = useLocale(); + const [openDisclaimer, setOpenDisclaimer] = useState(false); + const { data: protectionStatsData } = useGetProtectionCoverageStats<{ marine?: string; terrestrial?: string; @@ -117,7 +122,11 @@ const Intro: FCWithMessages = ({ onScrollClick }) => { percentage={protectionStatsData.terrestrial} text={t('current-total-protected-area')} icon="icon2" + onClickInfoButton={() => setOpenDisclaimer(true)} /> + {openDisclaimer && ( + setOpenDisclaimer(false)} /> + )}
+ )} +