add the site information

BetaNYC · Mar 20, 2024 · ab62fd2 · ab62fd2
1 parent c027bab
commit ab62fd2
Show file tree

Hide file tree

Showing 6 changed files with 1,779 additions and 145 deletions.
diff --git a/components/infoPage/infoBox/InfoBox.tsx b/components/infoPage/infoBox/InfoBox.tsx
@@ -3,49 +3,62 @@ import React, { useContext, useState, useEffect } from 'react'
 import { useMediaQuery } from 'react-responsive'
 
 import { StreetViewContext, StreetViewType } from '@/contexts/StreetViewContext'
+import { NarrativeContext, NarrativeType } from '@/contexts/NarrativeContext'
 
 import { XMarkIcon, Bars3Icon } from '@heroicons/react/16/solid'
 
 // import InfoTitle from './InfoTitle'
 import InfoAbout from './InfoAbout'
 import InfoCredit from './InfoCredit'
+import InfoIntroduction from './InfoIntroduction'
 
 import Image from 'next/image'
 
 
 const InfoBox = () => {
 
 
-    const [selected, setSelected] = useState<'About' | "Credit">("About")
+    const [selected, setSelected] = useState<'About' | "Credit" | 'Introduction' | 'AI'>("About")
     const [boxShown, setBoxShown] = useState(false)
 
-    const { openStreetView } = useContext(StreetViewContext) as StreetViewType
+    const { setOpenNarrative } = useContext(NarrativeContext) as NarrativeType
+    const { setOpenStreetView } = useContext(StreetViewContext) as StreetViewType
 
 
     const isDesktop = useMediaQuery({ query: "(min-width: 1024px)" })
 
 
-    const selectedClickHandler = (s: 'About' | "Credit") => {
+    const selectedClickHandler = (s: 'About' | "Credit" | "Introduction" | "AI") => {
         setSelected(s)
     }
 
     const boxShownClickHandler = (b: boolean) => {
         setBoxShown(b)
     }
 
+    const narrativeClickHandler = () => {
+        setOpenNarrative(true)
+        setBoxShown(false)
+        setOpenStreetView(false)
+    }
+
     return (
         <>
             <div className={`absolute top-[36%] lg:top-0 w-full h-[64%] lg:h-full bg-white lg:bg-secondary_blue rounded-t-[1rem] lg:rounded-none z-30 overflow-y-auto ${boxShown ? "translate-y-0 duration-700" : "translate-y-full duration-700"}`}>
                 <div className=' px-5 lg:px-16 pt-8 lg:pt-[5rem] pb-8 w-full rounded-t-[1rem]'>
-                    <Image width={isDesktop ? 203 : 80} height={isDesktop ? 38.17 : 15.4} src="./logos/floodgen.svg" alt='floodgen' className='mb-2'/>
+                    <Image width={isDesktop ? 203 : 80} height={isDesktop ? 38.17 : 15.4} src="./logos/floodgen.svg" alt='floodgen' className='mb-2' />
                     {/* <InfoTitle /> */}
                     <div className='lg:flex lg:mt-8'>
-                        <div className='flex lg:flex-col gap-3 lg:gap-5 lg:mr-[8.25rem] w-full lg:w-[12.68rem]'>
-                            <div className={`w-[50%] text-heading lg:text-[1.625rem] text-title_black cursor-pointer ${selected === "About" && "pb-[0.05rem] font-bold border-b-[3px] border-primary_blue"}`} onClick={() => selectedClickHandler("About")}>About</div>
-                            <div className={`w-[50%] text-heading lg:text-[1.625rem] text-title_black cursor-pointer ${selected === "Credit" && "pb-[0.05rem] font-bold border-b-[3px] border-primary_blue"}`} onClick={() => selectedClickHandler("Credit")}>Credit</div>
+                        <div className='flex lg:flex-col gap-3 lg:gap-5  text-[#9C9C9C] '>
+                            <div className={`w-[50%] font-bold text-heading lg:text-[1.625rem]  cursor-pointer ${selected === "About" && "pb-[0.05rem] text-title_black border-b-[3px] border-primary_blue"}`} onClick={() => selectedClickHandler("About")}>About</div>
+                            <div className={`w-[50%] font-bold text-heading lg:text-[1.625rem]  cursor-pointer ${selected === "Introduction" && "pb-[0.05rem]  text-title_black border-b-[3px] border-primary_blue"}`} onClick={() => selectedClickHandler("Introduction")}>Introduction</div>
+                            <div className={`w-[60%] font-bold text-heading lg:text-[1.625rem]  cursor-pointer ${selected === "AI" && "pb-[0.05rem] text-title_black border-b-[3px] border-primary_blue"}`} onClick={() => selectedClickHandler("AI")}>How to identify an AI generated image</div>
+                            <div className={`w-[50%] font-bold text-heading lg:text-[1.625rem]  cursor-pointer ${selected === "Credit" && "pb-[0.05rem] text-title_black border-b-[3px] border-primary_blue"}`} onClick={() => selectedClickHandler("Credit")}>Credits</div>
                         </div>
                         {
-                            selected === "About" ? <InfoAbout clickHandler={() => boxShownClickHandler(false)} /> : <InfoCredit />
+                            selected === "About" ? <InfoAbout clickHandler={() => boxShownClickHandler(false)} /> :
+                                selected === "Introduction" ? <InfoIntroduction clickHandler={narrativeClickHandler} /> :
+                                    <InfoCredit />
                         }
                     </div>
                 </div>

diff --git a/components/infoPage/infoBox/InfoIntroduction.tsx b/components/infoPage/infoBox/InfoIntroduction.tsx
@@ -0,0 +1,18 @@
+import React from 'react'
+
+
+type Props = {
+    clickHandler: () => void
+}
+
+
+const InfoIntroduction = ({ clickHandler }: Props) => {
+    return (
+        <div>
+            <button className='mt-2 px-6 py-1 font-semibold text-small lg:text-[1.5rem] text-white bg-primary_blue rounded-[2.5rem]' onClick={clickHandler}>Visual narrative</button>
+        </div>
+
+    )
+}
+
+export default InfoIntroduction
diff --git a/components/streetView/StreetInfo.tsx b/components/streetView/StreetInfo.tsx
@@ -3,34 +3,42 @@ import React, { useContext, useState } from 'react'
 import Image from 'next/image'
 import { ChevronUpIcon, ChevronDownIcon } from '@heroicons/react/20/solid'
 
+import sites from "../../public/data/floodgen_sites.geo.json"
+import useOnClickSites from '@/hooks/useOnClickSites'
+
 type Props = {
   openStreetView: boolean | null
 }
 
 const StreetInfo = ({ openStreetView }: Props) => {
 
+  const { id } = useOnClickSites()
+
+
+  const selectedSitesFeatures = sites.features.filter(site => site.properties.ID === id)[0]
+  console.log(selectedSitesFeatures)
+
   const [expanded, setExpanded] = useState(true)
 
   return (
     <>
       {
-        openStreetView && <div className={`absolute bottom-[-100%] lg:left-8 lg:top-7 px-4 pt-[1.56rem] lg:pt-4 w-full lg:w-[17.56rem] ${expanded ? "h-[100%] lg:h-[calc(100%_-_3.5rem)]" : "h-[9.375rem] lg:h-[7.75rem]"}  bg-white rounded-[1rem] z-20 `}>
+        openStreetView && <div className={`absolute bottom-[-100%] lg:left-8 lg:top-7 px-4 pt-[1.56rem] lg:pt-4 w-full lg:w-[17.56rem] ${expanded ? "h-[100%] lg:h-[calc(100%_-_3.5rem)]" : "h-[9.375rem] lg:h-[9.5rem]"}  bg-white rounded-[1rem] z-20 overflow-scroll`}>
           <div className='flex justify-between items-center w-full'>
-            <h2 className='font-bold text-heading text-content_black'>Rivington St & Suffolk St</h2>
+            <h2 className='font-bold text-heading text-content_black'>{selectedSitesFeatures.properties['Place']}</h2>
 
-            {expanded ? <ChevronUpIcon className='w-6  h-6 text-black' onClick={() =>setExpanded(false)} /> : <ChevronDownIcon className='w-6  h-6 text-black' onClick={() =>setExpanded(true)}/>}
+            {expanded ? <ChevronUpIcon className='w-6  h-6 text-black' onClick={() => setExpanded(false)} /> : <ChevronDownIcon className='w-6  h-6 text-black' onClick={() => setExpanded(true)} />}
 
           </div>
-          <h3 className='text-medium text-[#727272]'>Lower East Side, Manhattan</h3>
+          <h3 className='text-medium text-[#727272]'>{selectedSitesFeatures.properties['Case Study']}, {selectedSitesFeatures.properties['Borough']}</h3>
           <div className='my-[0.6875rem] w-full h-[1px] bg-[#C9C9C9]'></div>
-          <div className='flex justify-between mb-4'>
-            <h2 className='font-bold text-heading text-gray'>Lower East Side</h2>
+          <div className='flex justify-between mb-2'>
+            <h2 className='font-bold text-heading text-gray'>Description</h2>
             {/* <Image width={24} height={24} src="./icons/info.svg" alt='info' /> */}
             <img src="/icons/info.svg" alt="" className='w-6 h-6' />
           </div>
           <p className={`${expanded ? "visible" : "hidden"} text-medium text-black leading-normal`}>
-            Explain why the project focuses on these areas.
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
+            {selectedSitesFeatures.properties.Description}
           </p>
         </div>
       }

diff --git a/components/streetView/StreetView.tsx b/components/streetView/StreetView.tsx
@@ -93,12 +93,10 @@ const StreetView = () => {
     }
 
     return (
-        <>
-            <div className={`absolute top-0 left-0 pt-[1.75rem] ${openStreetView ? "translate-y-0" : "translate-y-[-100%]"}   lg:pl-8 w-full h-[50%] bg-slate-400 z-20 transition-all duration-[1500ms] ease-in-out`}>
+        <div className={`absolute top-0 left-0  ${openStreetView ? "translate-y-0" : "translate-y-[-100%]"} w-full h-[50%] z-20 transition-all duration-[1500ms] ease-in-out`}>
+            {/* <img src="https://raw.githubusercontent.com/BetaNYC/floodgen-images/main/flood_image_output/01_F0_V2.png?token=GHSAT0AAAAAACED3PLELYEM7BONTPFDFV4UZP2JJVA" alt="" className='w-full h-full object-cover' /> */}
+            <div className={`pt-[1.75rem] lg:pl-8`}>
                 <div className='flex gap-[1rem] ml-[4.5rem] lg:ml-[18.56rem] overflow-x-scroll [&::-webkit-scrollbar]:hidden'>
-                    {/* <div className='flex items-center justify-center min-w-[2.5rem] h-[2.5rem] bg-[rgba(255,255,255,.65)] z-20'>
-                    <Image width={18} height={12} src="./icons/hamburger.svg" alt='hamburger' className='cursor-pointer' />
-                </div> */}
                     {
                         floodingBtnsData.map((f, i) => <FloodingButton key={f.title} clicked={clicked[f.title]} hovered={hovered[i]} title={f.title} src={clicked[f.title] || hovered[i] ? f.src_white : f.src} clickHandler={() => floodingButtonClickHandler(f.title)} mouseEnterHandler={() => mouseEnterHandler(i)} mouseLeaveHandler={mouseLeaveHandler} />)
                     }
@@ -117,7 +115,7 @@ const StreetView = () => {
                 {/* <Image width={80} height={80} src="./icons/fullscreen.svg" alt="fullscreen" className='absolute right-4 bottom-0 opacity-75 cursor-pointer' /> */}
             </div>
 
-        </>
+        </div>
     )
 }
 

diff --git a/hooks/useOnClickSites.tsx b/hooks/useOnClickSites.tsx
@@ -1,6 +1,6 @@
 "use client"
-import React, { useEffect, useContext } from 'react'
-import mapboxgl, { MapMouseEvent } from 'mapbox-gl'
+import React, { useEffect, useContext, useState } from 'react'
+import mapboxgl, { MapMouseEvent, EventData } from 'mapbox-gl'
 
 import { MapContext, MapContextType } from '@/contexts/MapContext'
 import { StreetViewContext, StreetViewType } from '@/contexts/StreetViewContext'
@@ -16,9 +16,13 @@ const useOnClickSites = () => {
   const { openStreetView, setOpenStreetView } = useContext(StreetViewContext) as StreetViewType
   const { setDirection, setMarker, setDirectionDegree } = useContext(MarkerContext) as MarkerContextType
 
+  const [id, setId] = useState(0)
+
   useEffect(() => {
 
-    map?.on("click", 'sites', (e: MapMouseEvent) => {
+    map?.on("click", 'sites', (e: MapMouseEvent & EventData) => {
+      console.log(e.features[0].properties.ID)
+      setId(18)
       if (!openStreetView) {
         setOpenStreetView(prevOpenStreetView => {
           if (!prevOpenStreetView) {
@@ -52,6 +56,9 @@ const useOnClickSites = () => {
 
   }, [map, openStreetView]);
 
+
+  return {id}
+
 }
 
 export default useOnClickSites