From 36040896657019ee4472bb8e7ef476b03f8c82d9 Mon Sep 17 00:00:00 2001 From: CloudLun Date: Wed, 10 Apr 2024 17:44:30 +0800 Subject: [PATCH] add the contact column --- app/page.tsx | 3 ++- components/infoPage/infoBox/InfoBox.tsx | 15 +++++++++------ components/infoPage/infoBox/InfoContact.tsx | 12 ++++++++++++ components/map/Map.css | 2 +- components/map/Map.tsx | 2 +- components/narrative/Narrative.tsx | 4 ++-- components/streetView/StreetInfo.tsx | 2 +- components/streetView/StreetView.tsx | 2 +- hooks/useTooltips.tsx | 3 ++- 9 files changed, 31 insertions(+), 14 deletions(-) create mode 100644 components/infoPage/infoBox/InfoContact.tsx diff --git a/app/page.tsx b/app/page.tsx index 819460f..2e00179 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -12,15 +12,16 @@ import StreetView from '@/components/streetView/StreetView' import Narrative from '@/components/narrative/Narrative' + export default function Home() { return (
- logos_white + diff --git a/components/infoPage/infoBox/InfoBox.tsx b/components/infoPage/infoBox/InfoBox.tsx index e9bbd8a..42593fa 100644 --- a/components/infoPage/infoBox/InfoBox.tsx +++ b/components/infoPage/infoBox/InfoBox.tsx @@ -11,6 +11,7 @@ import { XMarkIcon, Bars3Icon } from '@heroicons/react/16/solid' import InfoAbout from './InfoAbout' import InfoCredit from './InfoCredit' import InfoAI from './InfoAI' +import InfoContact from './InfoContact' @@ -18,7 +19,7 @@ import InfoAI from './InfoAI' const InfoBox = () => { - const [selected, setSelected] = useState<'About' | "Credit" | 'Introduction' | 'AI'>("About") + const [selected, setSelected] = useState<'About' | "Credit" | 'Introduction' | 'AI' | "Contact">("About") const [boxShown, setBoxShown] = useState(false) const { setOpenNarrative } = useContext(NarrativeContext) as NarrativeType @@ -28,7 +29,7 @@ const InfoBox = () => { const isDesktop = useMediaQuery({ query: "(min-width: 1024px)" }) - const selectedClickHandler = (s: 'About' | "Credit" | "Introduction" | "AI") => { + const selectedClickHandler = (s: 'About' | "Credit" | "Introduction" | "AI" | "Contact") => { setSelected(s) } @@ -44,12 +45,12 @@ const InfoBox = () => { return ( <> -
+
{/* floodgen */} { isDesktop ? : - + } {/* */} @@ -59,16 +60,18 @@ const InfoBox = () => {
Introduction
selectedClickHandler("AI")}>How to identify an AI generated image
selectedClickHandler("Credit")}>Credits
+
selectedClickHandler("Contact")}>Contact
{ selected === "About" ? boxShownClickHandler(false)} /> : selected === "AI" ? : - + selected === "Contact" ? : + }
-
boxShown ? boxShownClickHandler(false) : boxShownClickHandler(true)}> +
boxShown ? boxShownClickHandler(false) : boxShownClickHandler(true)}> { boxShown ? : } diff --git a/components/infoPage/infoBox/InfoContact.tsx b/components/infoPage/infoBox/InfoContact.tsx new file mode 100644 index 0000000..aa27c20 --- /dev/null +++ b/components/infoPage/infoBox/InfoContact.tsx @@ -0,0 +1,12 @@ +import React from 'react' + +const InfoContact = () => { + return ( +
+ +
+ + ) +} + +export default InfoContact \ No newline at end of file diff --git a/components/map/Map.css b/components/map/Map.css index de86728..4ebda53 100644 --- a/components/map/Map.css +++ b/components/map/Map.css @@ -4,7 +4,7 @@ border-radius: 20px !important; width: 270px !important; height: 120px !important; - z-index: 100000; + z-index: 100000 !important; } /* .content { diff --git a/components/map/Map.tsx b/components/map/Map.tsx index 2f1e9a9..8b2fea8 100644 --- a/components/map/Map.tsx +++ b/components/map/Map.tsx @@ -97,7 +97,7 @@ const Map = () => { "#3B9CD9", ['all', ['==', ['get', "FLD_ZONE"], "AE"]], "#7FBEE6", - "#3C9CD9", + "#C1DFF3", ], 'fill-opacity': 1 } diff --git a/components/narrative/Narrative.tsx b/components/narrative/Narrative.tsx index 4bfc2b0..42dbbc8 100644 --- a/components/narrative/Narrative.tsx +++ b/components/narrative/Narrative.tsx @@ -21,10 +21,10 @@ const Narrative = () => { { openNarrative && ( <> -
+
-
+
diff --git a/components/streetView/StreetInfo.tsx b/components/streetView/StreetInfo.tsx index dc49fda..ec41c59 100644 --- a/components/streetView/StreetInfo.tsx +++ b/components/streetView/StreetInfo.tsx @@ -22,7 +22,7 @@ const StreetInfo = ({ openStreetView }: Props) => { return ( <> { - openStreetView &&
+ openStreetView &&

{selectedSitesFeatures.properties['Place']}

diff --git a/components/streetView/StreetView.tsx b/components/streetView/StreetView.tsx index 23cb99b..6145daa 100644 --- a/components/streetView/StreetView.tsx +++ b/components/streetView/StreetView.tsx @@ -135,7 +135,7 @@ const StreetView = () => {
-
+
{ floodingBtnsData.map((f, i) => floodingButtonClickHandler(f.title)} mouseEnterHandler={() => mouseEnterHandler(i)} mouseLeaveHandler={mouseLeaveHandler} />) } diff --git a/hooks/useTooltips.tsx b/hooks/useTooltips.tsx index 2dac970..f2b55c4 100644 --- a/hooks/useTooltips.tsx +++ b/hooks/useTooltips.tsx @@ -33,8 +33,9 @@ const useTooltips = () => { // } map?.on("mousemove", "coastal_flooding", (e: MapMouseEvent & EventData) => { + console.log(e.features[0].properties.FLD_ZONE === "VE" ? 'aaa' : "failed") const content = `
- ${e.features[0].properties.FLD_ZONE === "VE" ? "
1% annual chance flood event (coastal)
" : + ${e.features[0].properties.FLD_ZONE === "VE" ? "
1% annual chance flood event (coastal)
" : e.features[0].properties.FLD_ZONE === "AE" ? "
1% annual chance flood event
" : "
0.2% annual chance of flood hazard
" }