Create `ProjectInfo` component (left/right layout)

[SAUMILDHANKAR]

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 Implement map click interaction + layout state #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/design/eRcnlUKzSsIJv3JcOMddwU/OpenNature-Map?node-id=5771-3802&t=R2HRz2FxbgryeS8U-0