[feat] Make Projects Listing Modal #55

api/maps/AddMarkers.tsx

@@ -22,9 +22,13 @@ export default function AddMarker({
   ) => {
     setSelectedProjectId(prevId => (prevId === projectId ? null : projectId)); // close modal if same, open if different
     map?.panTo(position); // change center of map to selected marker
+    if (selectedProjectId === projectId) {
+      document.title = 'ACE NY';
+    }
   };
 
   const closeModal = () => {
+    document.title = 'ACE NY';
     setSelectedProjectId(null); // close modal
   };
 
@@ -45,7 +49,6 @@ export default function AddMarker({
               lng: project.longitude,
             }}
             projectName={project.project_name}
-            projectDev={project.developer}
             technology={project.renewable_energy_technology}
             projectId={project.id}
             onMarkerClick={handleMarkerClick}

api/maps/MarkerInfoWindow.tsx

@@ -7,6 +7,7 @@ import {
   Pin,
   useAdvancedMarkerRef,
 } from '@vis.gl/react-google-maps';
+import { TagText2 } from '@/styles/texts';
 import energyStorage from '../../assets/Custom-Markers/energy_storage.svg';
 import geothermal from '../../assets/Custom-Markers/geothermal.svg';
 import hydroelectric from '../../assets/Custom-Markers/hydroelectric.svg';
@@ -22,14 +23,13 @@ const technologyToPin: Record<string, string> = {
   'Land-Based Wind': landbased_wind,
   'Offshore Wind': offshore_wind,
   'Pumped Storage': pumped_storage,
-  Solar: solarPower,
+  'Solar PV': solarPower,
 };
 
 export const MarkerInfoWindow = ({
   position,
   projectId,
   projectName,
-  projectDev,
   technology,
   onMarkerClick,
   clusterer,
@@ -38,7 +38,6 @@ export const MarkerInfoWindow = ({
   position: { lat: number; lng: number };
   projectId: number;
   projectName: string;
-  projectDev: string;
   technology: string;
   onMarkerClick: (
     projectId: number,
@@ -112,8 +111,7 @@ export const MarkerInfoWindow = ({
       </AdvancedMarker>
       {infoWindowShown && (
         <InfoWindow anchor={marker} onClose={handleClose} disableAutoPan={true}>
-          <h2>{projectName}</h2>
-          <p>Developer: {projectDev}</p>
+          <TagText2>{projectName}</TagText2>
         </InfoWindow>
       )}
     </>

app/layout.tsx

@@ -9,7 +9,7 @@ const sans = Inter({
 
 // site metadata - what shows up on embeds
 export const metadata: Metadata = {
-  title: 'Project Name',
+  title: 'ACE NY',
   description: 'Description of project',
 };
 

app/page.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { CSSProperties, useEffect, useState } from 'react';
+import AllProjectsModal from '@/components/AllProjectsModal';
 import Map from '@/components/Map';
 import queryProjects from '../api/supabase/queries/query';
 import { Project } from '../types/schema';
@@ -21,6 +22,7 @@ export default function Home() {
     <main style={mainStyles}>
       {error ? <div style={errorStyles}>{error}</div> : null}
       {projects ? <Map projects={projects} /> : null}
+      <AllProjectsModal />
     </main>
   );
 }

app/testing/page.tsx

@@ -0,0 +1,23 @@
+'use client';
+
+import { CSSProperties } from 'react';
+import ProjectItem from '@/components/ProjectItem';
+
+export default function Home() {
+  return (
+    <main style={mainStyles}>
+      <ProjectItem project_id={20}></ProjectItem>
+    </main>
+  );
+}
+
+// CSS styles
+
+const mainStyles: CSSProperties = {
+  width: '100%',
+  height: '100%',
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  justifyContent: 'center',
+};

assets/Size-Icons/icons.tsx

@@ -0,0 +1,17 @@
+export const SmallSizeIcon = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="6"
+    height="9"
+    viewBox="0 0 6 9"
+    fill="none"
+  >
+    <path
+      d="M0.590391 4.57726L4.22789 0.45262L3.63751 3.54051L5.60318 3.90278L1.96568 8.02742L2.55606 4.93954L0.590391 4.57726Z"
+      stroke="#2E3A59"
+      strokeOpacity="0.5"
+      strokeWidth="0.75"
+      strokeLinejoin="round"
+    />
+  </svg>
+);

assets/Status-Tag-Icons/icons.tsx

@@ -0,0 +1,40 @@
+export const CalendarIcon = () => (
+  <svg
+    width="7"
+    height="8"
+    viewBox="0 0 7 8"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M1.54412 0.5C1.62602 0.5 1.70457 0.532537 1.76249 0.590452C1.8204 0.648368 1.85294 0.726918 1.85294 0.808824V1.11765H4.52941V0.808824C4.52941 0.726918 4.56195 0.648368 4.61986 0.590452C4.67778 0.532537 4.75633 0.5 4.83824 0.5C4.92014 0.5 4.99869 0.532537 5.05661 0.590452C5.11452 0.648368 5.14706 0.726918 5.14706 0.808824V1.12094C5.20965 1.12259 5.26798 1.12561 5.32206 1.13C5.47853 1.14235 5.62512 1.17035 5.76388 1.24118C5.97699 1.34975 6.15025 1.52301 6.25882 1.73612C6.32965 1.87488 6.35765 2.02147 6.37 2.17794C6.38235 2.32824 6.38235 2.51147 6.38235 2.73176V5.88588C6.38235 6.10618 6.38235 6.28941 6.37 6.43971C6.35765 6.59618 6.32965 6.74276 6.25882 6.88153C6.15036 7.09458 5.97725 7.26783 5.76429 7.37647C5.62512 7.44729 5.47853 7.47529 5.32206 7.48765C5.17177 7.5 4.98853 7.5 4.76865 7.5H1.61412C1.39382 7.5 1.21059 7.5 1.06029 7.48765C0.903824 7.47529 0.757235 7.44729 0.618471 7.37647C0.405486 7.26812 0.23224 7.09516 0.12353 6.88235C0.052706 6.74318 0.024706 6.59659 0.012353 6.44012C8.6613e-08 6.28982 0 6.10659 0 5.88671V2.73176C0 2.51147 8.6613e-08 2.32824 0.012353 2.17794C0.024706 2.02147 0.052706 1.87488 0.12353 1.73612C0.2321 1.52301 0.40536 1.34975 0.618471 1.24118C0.757235 1.17035 0.903824 1.14235 1.06029 1.13C1.11437 1.12561 1.17271 1.12259 1.23529 1.12094V0.808824C1.23529 0.768268 1.24328 0.72811 1.2588 0.690642C1.27432 0.653174 1.29707 0.619129 1.32575 0.590452C1.35442 0.561775 1.38847 0.539028 1.42594 0.523508C1.4634 0.507988 1.50356 0.5 1.54412 0.5ZM5.76471 3.38235H0.617647V5.87353C0.617647 6.10906 0.617647 6.26759 0.627941 6.38906C0.637412 6.50765 0.654706 6.56406 0.673647 6.60112C0.723059 6.69829 0.801706 6.77694 0.898882 6.82635C0.935941 6.84529 0.992353 6.86259 1.11053 6.87206C1.23241 6.88194 1.39053 6.88235 1.62647 6.88235H4.75588C4.99141 6.88235 5.14994 6.88235 5.27141 6.87206C5.39 6.86259 5.44641 6.84529 5.48347 6.82635C5.58048 6.77698 5.65933 6.69812 5.70871 6.60112C5.72765 6.56406 5.74494 6.50765 5.75441 6.38906C5.76429 6.26759 5.76471 6.10906 5.76471 5.87353V3.38235ZM2.16176 2.04412C2.07986 2.04412 2.00131 2.07665 1.94339 2.13457C1.88548 2.19249 1.85294 2.27104 1.85294 2.35294C1.85294 2.43485 1.88548 2.5134 1.94339 2.57131C2.00131 2.62923 2.07986 2.66176 2.16176 2.66176H4.22059C4.30249 2.66176 4.38104 2.62923 4.43896 2.57131C4.49688 2.5134 4.52941 2.43485 4.52941 2.35294C4.52941 2.27104 4.49688 2.19249 4.43896 2.13457C4.38104 2.07665 4.30249 2.04412 4.22059 2.04412H2.16176Z"
+      fill="#4974E0"
+    />
+  </svg>
+);
+
+export const GreenDotOperationalIcon = () => (
+  <svg
+    width="5"
+    height="6"
+    viewBox="0 0 5 6"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <circle cx="2.5" cy="3" r="2.5" fill="#1BA546" />
+  </svg>
+);
+
+export const GreyDotInProgressIcon = () => (
+  <svg
+    width="5"
+    height="6"
+    viewBox="0 0 5 6"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <circle cx="2.5" cy="3" r="2.5" fill="#D6D6D6" />
+  </svg>
+);