Create `ProjectInfo` component (left/right layout)

Issue created with ChatGPT models' help¹

Description

Create a reusable ProjectInfo component that renders the lower information panel shown beneath the map after a project marker is clicked¹. The component should follow the Figma design closely and be divided into two major sections: a left window (map layer toggles / controls) and a right window (project metadata and information display)².

This issue is primarily focused on creating the component structure, layout, styling, and data rendering flow using React + TypeScript + Material UI³. The left panel should support checkbox-based layer toggles, while the right panel should support dynamically rendered values based on the selected project⁴.

Some properties in the left window may later become conditionally rendered depending on whether the selected land project contains those values⁵. If possible, contributors may implement conditional rendering now, but it is not strictly required for completion of this issue¹.

---

Goals

• Create reusable ProjectInfo component¹
• Implement left/right panel layout from Figma²
• Support checkbox skeleton functionality for map layers³
• Could Dynamically render project information values⁴
• Use TypeScript types/interfaces for project data¹
• Prepare component for future responsive/mobile support²

---

Implementation Instructions

• Create ProjectInfo.tsx under components/project or similar folder¹
• Use Material UI components (Box, Stack, Checkbox, Typography, etc.)²
• Define TypeScript interfaces/types for project metadata³
• Split layout into left window + right window⁴
• Add placeholder/skeleton checkbox behavior for map layer toggles¹
• Checkbox interactions should prepare for future Leaflet layer toggling²
• Render static property labels with dynamic project values³
• Consider conditional rendering of properties with missing/null values⁴
• Keep layout responsive using breakpoints where possible¹
• Styling can use MUI sx, theme folder, or styles folder²

---

Layout Specs (Figma)

Project info container

• width: 1188;¹
• height: 451;²
• angle: 0 deg;³
• opacity: 1;⁴
• border-bottom-width: 2px;¹
• padding-right: 24px;²
• padding-left: 24px;³
• background: #FFFFFF;⁴
• border-bottom: 2px solid #E8E8E8;¹

---

Left window

⚠️ Note: Some left window properties or the entire left panel itself may later become conditionally rendered depending on available land project data¹.

Suggested condition:

• If a project does not contain values for a property/layer, do not render that property²

This logic is optional for this issue but recommended if contributor bandwidth allows³.

Layout Specs

• width: 300;¹
• height: 451;²
• angle: 0 deg;³
• opacity: 1;⁴
• border-right-width: 2px;¹
• padding-top: 4px;²
• padding-right: 24px;³
• border-right: 2px solid #E8E8E8;⁴

---

Right window

⚠️ Note: The right window intentionally contains extra whitespace because additional metadata sections will be added later¹.

Layout Specs

• width: 840;²
• height: 451;³
• angle: 0 deg;⁴
• opacity: 1;¹
• padding-top: 4px;²
• padding-left: 24px;³

---

Expected Component Behavior

Left Window

• Contains layer/property checkboxes¹
• Checkbox interactions should prepare for future Leaflet map layer toggling²
• Example behavior: checking “Acreage” or “Watershed” shows corresponding map layer³
• Full Leaflet integration is optional for this issue⁴

---

Right Window

• Property labels may remain static¹

• Property values should render dynamically based on selected project²

• Example fields:

  • Status³
  • Partner⁴
  • Acreage¹
  • Location²
  • Watershed³
  • Restoration Services⁴
  • Active Monitoring¹

---

Notes

• Please reach out to the maintainer team for access to the Figma file¹
• Use the Figma file for exact spacing/typography/details because this issue may not list every specification²
• Consider using responsive breakpoints³
• Structure component cleanly for future routing/services integration⁴

---

Acceptance Criteria

• ProjectInfo component renders correctly with left/right layout¹
• Left panel contains checkbox controls²
• Right panel is setup to display dynamically rendered project metadata values³
• Layout visually matches Figma structure⁴
• Component uses React + TypeScript + MUI¹
• Code structure supports future responsiveness and map integration²
• Critical Testing validation optional but good to have

Consider helping after PR for this issue is merged

• Once PR for this issue is merged, please check dependencies heading in #16, if all the issues there are done, please move that issue to ready column/status

---

Resources

¹ https://mui.com/material-ui/react-box/
² https://mui.com/material-ui/react-checkbox/
³ https://react.dev/learn/conditional-rendering
⁴ https://react.dev/learn/typescript

Figma Design (Refer for full details): https://www.figma.com/proto/e9z8edludVssFYABGEWsoI/OpenNature-Map--Hackathons-?node-id=1-1465&viewport=787%2C545%2C0.11&t=Xwc2asfn9Qksi99P-8&scaling=scale-down&content-scaling=fixed&starting-point-node-id=1%3A896&page-id=0%3A1&hide-ui=1

Start with the Figma prototype and inspect the existing component structure before creating ProjectInfo.tsx under components/project or a similar location. Define the project metadata types, then implement the left checkbox panel and right dynamic values with MUI responsive layout. Done means the component matches the Figma structure, renders the specified controls and metadata, and supports future map integration.