[feat] Direct Search Item Component

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';
@@ -29,7 +30,6 @@ 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/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>
+);