Create `ProjectTitle` component

[SAUMILDHANKAR]

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 and include a bookmark/save icon that allows users to save the project (functionality can be stubbed initially)³. 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³
• Include bookmark/save icon in UI⁴
• 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³
• Add bookmark icon (click handler can be placeholder for now)⁴
• 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¹
• Bookmark icon is visible and clickable²
• Clicking bookmark should eventually save project (can be stubbed for now)³
• 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²
• Bookmark icon is present and clickable³
• Component visually matches Figma design⁴
• Component is reusable and accepts props cleanly¹

---

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/design/eRcnlUKzSsIJv3JcOMddwU/OpenNature-Map?node-id=5771-3802&t=R2HRz2FxbgryeS8U-0

---