Create `ProjectTitle` component

Issue created with ChatGPT models help¹

Parent: Epic Feature – Project Detail View (Map Interaction + Title & Info Panels)³

---

Description

Create a reusable ProjectTitle React component that appears when a user clicks on a map marker and the project detail view is activated¹. This component represents the top header bar (as shown in Figma) and displays the project title dynamically based on the clicked marker label².

The component should visually match the Figma design. The primary goal of this issue is to implement the UI structure and styling, while keeping the component flexible for future integration with routing and backend services⁴.

---

Goals

• Create reusable ProjectTitle component¹
• Dynamically display project title from marker click event²
• Match Figma layout and styling exactly³
• Keep component extensible for future routing/service integration¹

---

Implementation Instructions

• Create ProjectTitle.tsx (or .jsx) component¹
• Accept props such as title (string) and optional onSave handler²
• Render title text dynamically from selected map marker³
• Apply exact Figma layout specs (see below)¹
• Use flex layout for alignment and spacing²
• Ensure component integrates cleanly with parent layout (map + info panel)³
• Please use MUI components where possible.
• (Optional) Add basic state handling for saved/unsaved UI toggle⁴

---

Layout Specs (Figma)

• Width: 1188px¹
• Height: 73px²
• Gap: 12px³
• Padding: 20px (top/bottom), 24px (left/right)⁴
• Border-bottom: 2px solid #E8E8E8¹
• Background: #FFFFFF²
• Display: Flex (row, space-between alignment recommended)³

---

Behavior

• Title updates dynamically based on clicked marker label¹
• Component should render only when a project is selected⁴

---

Acceptance Criteria

• ProjectTitle component renders with correct layout and styling¹
• Title updates dynamically from selected marker²
• Component visually matches Figma design⁴
• Component is reusable and accepts props cleanly¹

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://react.dev/learn/passing-props-to-a-component
² https://react.dev/learn/conditional-rendering
³ https://developer.mozilla.org/en-US/docs/Web/CSS/flex
⁴ https://developer.mozilla.org/en-US/docs/Web/CSS/padding

Figma Design: 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

---

Locate the existing map-marker selection flow and the parent map-plus-info-panel layout before creating ProjectTitle.tsx or .jsx. Use the Figma reference and the stated dimensions, flex alignment, border, and padding as the UI specification. Done means the reusable component accepts a title, renders only for a selected project, updates from the marker label, and matches the listed acceptance criteria.